一、效果图(可拖动/自动停靠)
- 悬浮效果
- 可拖动
- 支持自动停靠
参考资源:https://ext.dcloud.net.cn/plugin?id=11998
(免广告版)
可拖动的悬浮按钮,兼容小程序、H5,支持自动停靠,支持自定义样式,使用相当简单,源码简单易修改。
二、源代码:
<template>
<movable-area class="movable-area" :scale-area="false">
<movable-view class="movable-view" @click.stop="btnClick" :class="!isRemove?'animation-info':''" style="pointer-events: auto;" @click="clickBtn" @touchstart="touchstart" @touchend="touchend"
@change="onChange" direction="all" inertia="true" :x="x" :y="y" :disabled="disabled" :out-of-bounds="true" :damping="200" :friction="100"
:style="'width: '+width+'px;height: '+height+'px;'">
<slot></slot>
</movable-view>
</movable-area>
</template>
<script>
export default {
props: {
//是否禁用拖动
disabled: {
type