sc-suspension

组件介绍

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

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