更新记录

1.1.1（2023-12-01）

文档说明修正错误说明

1.1.0（2023-12-01）

1.新添props参数can-drag、can-scale、can-delete 2.readme.md 文档说明优化

1.0.9（2023-11-30）

文档补充更新

平台兼容性

dragTemp

uniapp 微信小程序端拖拽组件、可拖拽 插入图片或插入文案拖拽

插件只是一个拖拽外壳，可在此基础上根据业务拓展添加内容

文档：

props 属性：

slot 插槽:

event事件：

实例获取

1. 通过绑定ref 获取组件实例

   this.$refs[id].getAttribute()

2. 通过id 获取组件实例 （小程序）

   this.selectComponent("#id").$vm.getAttribute()

   getAttribute(){return:Obj}返回当前组件的一些基础信息：

   Obj: { id, width, height, left, top }

使用案例

参考demo：https://github.com/CrazyAz10/az-drag-temp-uni-wx

以下案例并非完整代码 请自行参考使用

<az-drag-temp 
    :id="id" 
    :width="100" 
    :height="30" 
    :limitX="limitX" 
    :limitY="limitY" 
    :limit-min-width="50" 
    :limit-min-height="20" 
    :limit-max-width="200" 
    :limit-max-height="60" 
    :intervalRangeLimit="intervalRangeLimit" 
    :scrollTop="scrollTop"
    @click="dragClick" @change="changeTemp" @delete="deleteTemp">
    <template v-slot:content>
        <!-- 根据个人需求调整内容 -->
        <view class="content-wrap" style="width: 100%;height: 100%;">
            <image v-if="selectImagePic" :src="selectImagePic" style="width: 100%;height: 100%;" mode="aspectFit" />
            <view v-else class="textbtn" >
                <view class="default-text">
                    <image src="@/static/icons/pansou.png" class="mr-10" mode=""></image>
                    <text>电子签名</text>
                </view>
            </view>
        </view>
    </template>
</az-drag-temp>

export default {
    data() {
        return {
            limitX: 0,
            limitY: 0,
            scrollTop: 0,
            intervalRangeLimit: [],
            selectImagePic: ""
        }
    },
    methods: {
        dragClick() {
            // 点击了拖拽外壳
        },
        changeTemp() {
            // 拖拽外壳有变动 大小/位置
        },
        deleteTemp(id) {
            // 拖拽外壳点击了删除操作 id 是唯一标识
        }
    }
}

注释：插件还在更新迭代中，有问题可以评论区留言，不定时间会扫荡评论区