movableAll 组件拖拽

背景

为了实现小程序中需要有拖拽功能的组件

使用

<template>
	<movable-all :posStyle="posStyle">
		<view></view>
	</movable-all>
</template>
<script>
export default {
    data(){
        posStyle: {
			  top: 'initial',
			  left: 'initial',
			  bottom: '160rpx',
			  right: '20rpx'
		},

    },
    methods:{
        moveClick:()=>{
            console.log('点击触发')
        }
    }
}
</script>

参数说明

属性	描述	类型	可选值	默认值
posStyle	组件样式	Object	——	default:()=>({top: 'initial',left: 'initial',bottom: '100rpx',right: '20rpx'})

slot

插槽	说明
slot	默认插槽 将想要拖拽的组件用此组件包裹即可

组件源码及综合示例参考

组件源码 (opens new window)组件参考 (opens new window)