suspend-vue/README.md

一个悬浮窗组件，支持组件形式 / 自定义指令

## 组件介绍

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

## 组件使用

### 安装

`npm i suspend-vue`

`yarn add suspend-vue`

### 引入

1. 全局引入

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

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

2. 组件内引入

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

## 使用示例

### 组件模式

```vue
<template>
	<Suspend>
    	xxx
  </Suspend>
</template>

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

### 指令模式

```vue
<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}"`





> 更多内容敬请期待