# sc-suspension

**Repository Path**: f-s2/sc-suspension

## Basic Information

- **Project Name**: sc-suspension
- **Description**: 用于存储悬浮拖拽组件相关代码，主要代码分支为 component/suspend
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: https://gitee.com/f-s2/sc-suspension/tree/component%2Fsuspend/
- **GVP Project**: No

## Statistics

- **Stars**: 4
- **Forks**: 0
- **Created**: 2020-12-16
- **Last Updated**: 2025-11-04

## Categories & Tags

**Categories**: vue-extensions

**Tags**: vue3, TypeScript

## README

## 组件介绍

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 （只有开启吸边效果时才有返回值） |