组件介绍

1. suspend-vue 是一个能够任意拖动的组件，内部可放任意元素
2. 它同时适用于移动端和 PC 端
3. 且它具有吸附效果
4. 具有自定义指令等多种使用方式
5. 如果对该组件有任何意见，可发送至[email protected]

组件使用

安装

npm i suspend-vue

yarn add suspend-vue

引入

1. 全局引入

import {createApp} from 'vue'
import App from './App.vue'
import SuspendPlugin from 'suspend-vue'

const app = createApp(App)
app.use(SuspendPlugin)

2. 组件内引入

<script lang="ts" setup>
	import { Suspend } from 'suspend-vue'
</script>

使用示例

组件模式

<template>
	<Suspend>
    	xxx
  </Suspend>
</template>

<script lang="ts" setup>
	import { Suspend } from 'suspend-vue'
</script>

指令模式

<template>
    <div v-suspend>
        这是一段测试文本  
    </div>
</template>

<script lang="ts" setup>
</script>

组件属性

| 属性 | 用途 | 默认值 | | ----------- | ------------------------------------------------------------ | ------------------- | | adsorption | 是否开启吸附贴边功能， | {x: false, y:false} | | defaultSite | 设置其初始坐标，x与y分别表示盒子的left与 top 初始值（ 默认单位为px，目前仅支持px,rem,vw,vh，支持负数） | {x: '', y: ''} | | zIndex | 设置层级 | 999 | | contentMove | 点击 slot 内容区域是否可以拖动 | flase | | delay | 动画时长，为 0 时则关闭动画，单位 ms | 300 | | absolute | 开启后，设置盒子宽高，即可控制其可滑动区域 | false | | model | 使用模式，window（对话窗口模式） ｜ default | default |

组件方法

| 事件 | 用途 | 返回值 | | --------- | -------------------------------- | ------ | | moveStart | 在该组件刚开始移动时会触发的事件 | 无 | | moveEnd | 在组件移动结束时会触发的事件 | 无 |

指令回调函数

| 事件 | 用途 | 返回值 | | --------- | ------------------------------ | ------ | | click | 点击事件 | event | | moveStart | 该组件刚开始移动时会触发的事件 | void | | moveEnd | 在组件移动结束时会触发的事件 | void |

Q&A

Q：拖拽时会触发点击事件

A:

• 组件形式在 v1.0.8 版本修复了这个问题
• 指令形式会触发元素本身的点击事件，目前还没找到比较好的解决方法，可以通过回调函数的形式使用v-suspend="{click: onclick}"

更多内容敬请期待