sc-suspension v2.0.5

组件介绍

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

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>

组件属性

组件方法