组件介绍

1. sc-suspension 是一个能够任意拖动的组件，内部可放任意元素
2. 它同时适用于移动端和 PC 端
3. 且它具有吸附效果
4. 如果对该组件有任何意见，可发送至[email protected]

2.0版本新增

注意⚠️：部分属性的使用发生变化，与之前版本不同

• 新增 dialog 模式
  • 添加文本域插槽，支持文本复制等操作
• 新增 absolute模式
  • 使用absoult模式后，为其盒子设置宽高，即可限制拖拽范围

组件使用

安装

npm i sc-suspension

yarn add sc-suspension

引入

1. 全局引入

// 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. 组件内引入

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