可拖动组件：
<template>
<div>
<movable-area class="fixed-box">
<movable-view v-if="showButton"
class="fixed-button"
direction="all"
:inertia="true">
<slot></slot>
</movable-view>
</movable-area>
</div>
</template>
<script>
export default {
data () {
return {
showButton: true,
}
},
methods: {
},
created () {
},
mounted () {
},
}
</script>
<style lang="scss" scoped>
.fixed-box {
pointer-events: none; // 这里是重点，盒子可穿透操作
width: 100vw;
height: 100vh;
position: fixed;
left: 0;
bottom: 0;
z-index: 100000;
}
.fixed-button {
pointer-events: auto;
width: max-content;
height: auto;
overflow: hidden;
z-index: 9999;
display: flex;
align-items: center;
justify-content: center;
left: 85vw;
top: 50vh;
}
/* 适配iphonex 有底部横条的 */
@supports (bottom: constant(safe-area-inset-bottom)) or (bottom: env(safe-area-inset-bottom)) {
.fixed-box {
bottom: constant(safe-area-inset-bottom);
bottom: env(safe-area-inset-bottom);
}
}
</style>
组件使用：
<my-move-btn>
<view>
<uni-icons type="plus" size="56" style="color: #67C23A;" @click="addAccount"></uni-icons>
</view>
</my-move-btn>
