1.0.15 • Published 2 months ago
suspend-vue v1.0.15
组件介绍
suspend-vue是一个能够任意拖动的组件，内部可放任意元素- 它同时适用于移动端和 PC 端
- 且它具有吸附效果
- 具有自定义指令等多种使用方式
- 如果对该组件有任何意见，可发送至934772615@qq.com
组件使用
安装
npm i suspend-vue
yarn add suspend-vue
引入
- 全局引入
import {createApp} from 'vue'
import App from './App.vue'
import SuspendPlugin from 'suspend-vue'
const app = createApp(App)
app.use(SuspendPlugin)- 组件内引入
<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}"
更多内容敬请期待