## 组件介绍
1. `sc-suspension` 是一个能够任意拖动的组件，内部可放任意元素
2. 它同时适用于移动端和 PC 端
3. 且它具有吸附效果
4. 如果对该组件有任何意见，可发送至934772615@qq.com
**2.0版本新增**
**注意**⚠️：部分属性的使用发生变化，与之前版本不同
- 新增 `dialog` 模式
- 添加文本域插槽，支持文本复制等操作
- 新增 `absolute`模式
- 使用`absoult`模式后，为其盒子设置宽高，即可限制拖拽范围
## 组件使用
### 安装
`npm i sc-suspension`
`yarn add sc-suspension`
### 引入
1. 全局引入
```js
// 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)
```
2. 组件内引入
```js
import {ScSuspension} from 'sc-suspension'
export default {
components: {
ScSuspension
}
}
```
## 使用示例
### suspend模式
```vue
<template>
<sc-suspension>
xxx
</sc-suspension>
</template>
<script>
import {ScSuspension} from 'sc-suspension'
export default {
components: {
ScSuspension
}
}
</script>
```
### dialog模式
```vue
<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模式
```vue
<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模式
```vue
<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：普通悬浮模式<br />dialog：对话窗口模式<br />all：同时使用两种模式 | suspend |
| dialogClass | 用于设置`dialog`盒子的类名（大概可以用到？） | dialog-box |
| absolute | 开启后，设置盒子宽高，即可控制其可滑动区域 | false |
| boxClass | 给外层的盒子添加类名 | '' |
| move | 控制某一方向是否可移动 | {x: true, y: true} |
## 组件方法
| 事件 | 用途 | 返回值 |
| --------- | -------------------------------- | --------------------------------------------- |
| moveStart | 在该组件刚开始移动时会触发的事件 | 无 |
| moveEnd | 在组件移动结束时会触发的事件 | left / right （只有开启吸边效果时才有返回值） |
