组件介绍
-
sc-suspension
是一个能够任意拖动的组件,内部可放任意元素 - 它同时适用于移动端和 PC 端
- 且它具有吸附效果
- 如果对该组件有任何意见,可发送至934772615@qq.com
2.0版本新增
注意
- 新增
dialog
模式- 添加文本域插槽,支持文本复制等操作
- 新增
absolute
模式- 使用
absoult
模式后,为其盒子设置宽高,即可限制拖拽范围
- 使用
组件使用
安装
npm i sc-suspension
yarn add sc-suspension
引入
- 全局引入
// vue2
import Vue from 'vue'
import ScSuspension from 'sc-suspension'
Vue.use(ScSuspension)
// vue3
import {createApp} from 'vue'
import App from './App.vue'
import ScSuspension from 'sc-suspension'
const app = createApp(App)
app.use(ScSuspension)
- 组件内引入
import {ScSuspension} from 'sc-suspension'
export default {
components: {
ScSuspension
}
}
使用示例
suspend模式
<template>
<sc-suspension>
xxx
</sc-suspension>
</template>
<script>
import {ScSuspension} from 'sc-suspension'
export default {
components: {
ScSuspension
}
}
</script>
dialog模式
<template>
<sc-suspension mode="dialog">
<template v-slot:dialog>
<div>
测试文本
</div>
</template>
</sc-suspension>
</template>
<script>
import {ScSuspension} from 'sc-suspension'
export default {
components: {
ScSuspension
}
}
</script>
all模式
<template>
<sc-suspension mode="all">
<div>
这是另一段测试文本
</div>
<template v-slot:dialog>
<div>
测试文本
</div>
</template>
</sc-suspension>
</template>
<script>
import {ScSuspension} from 'sc-suspension'
export default {
components: {
ScSuspension
}
}
</script>
absolute模式
<template>
<sc-suspension class="box" absolute>
<div>
这是一段测试文本
</div>
</sc-suspension>
</template>
<script>
import {ScSuspension} from 'sc-suspension'
export default {
components: {
ScSuspension
}
}
</script>
<style>
.box {
width: 300px;
height: 400px;
background: rgb(193, 193, 243);
}
</style>
组件属性
属性 | 用途 | 默认值 |
---|---|---|
stickup | 用来控制该组件是否开启吸边效果 | true |
defaultSite | 设置其初始坐标,x 与y 分别表示盒子的left 与 top 初始值( 默认单位为px ,目前仅支持px,rem,vw,vh ,支持负数) |
{x: '', y: ''} |
zIndex | 设置层级 | 9999 |
mode | suspend:普通悬浮模式 dialog:对话窗口模式 all:同时使用两种模式 |
suspend |
dialogClass | 用于设置dialog 盒子的类名(大概可以用到?) |
dialog-box |
absolute | 开启后,设置盒子宽高,即可控制其可滑动区域 | false |
boxClass | 给外层的盒子添加类名 | '' |
move | 控制某一方向是否可移动 | {x: true, y: true} |
组件方法
事件 | 用途 | 返回值 |
---|---|---|
moveStart | 在该组件刚开始移动时会触发的事件 | 无 |
moveEnd | 在组件移动结束时会触发的事件 | left / right (只有开启吸边效果时才有返回值) |