layer-to-drag-vue3 v1.0.0

LayerToDrag 可拖拽组件 ( VUE 3 )

1. 引入代码

import LayerToDrag from 'layer-to-drag-vue3'

createApp(App).use(LayerToDrag).mount('#app')

2. 代码使用

<LayerToDrag
  :closeToLeft="false"
  :closeToTop="true"
  :zIndex="1"
  >
  <template #title>
    这是标题
  </template>
  <template #close>
    X按钮
  </template>
  <template #default>
    这里写入提示内容
  </template>
</LayerToDrag>

3. 属性说明

• closeToLeft : 布尔类型, 默认 false, 代表初始化的时候靠近屏幕左侧还是右侧
• closeToTop : 布尔类型, 默认 true, 代表初始化的时候靠近屏幕上方还是下方
• zIndex : 数字类型, 默认 1, 代表拖拽层的堆叠顺序

4. 核心说明

将可拖拽区域设置为 position: fixed;, 并将 left 和 top 属性动态设置, 默认绑定 document 对象以监听移动过程, 因此可以全屏幕移动