1.0.3 • Published 3 years ago
l-drag v1.0.3
l-drag
查看源码
Project setup
npm install
Compiles and hot-reloads for development
npm run serve
使用组件 l-drag
main.js
1、安装: npm i l-drag
2、引入: import lDrag from 'l-drag'
3、引入样式: import 'l-drag/lib/ldrag.css'
4、使用插件: Vue.use(lDrag)
配置
一、属性配置
属性 说明 类型 默认值
visible 是否显示drag 支持.sync boolean false
title drag的标题 string 无
width drag的宽度 string min-width: 500px
top drag距离浏览器的top值 string 15vh
二、slot
footer drag 的底部slot
三、事件
open drag打开的回调
close drag关闭的回调
四、例子
<template>
<div class="about">
<div @click="handleClick">点击打开拖拽组件</div>
<l-drag
title="提示"
:visible.sync="isShowDrag"
width="40%"
@open="handleOpen"
@close="handleClose">
</l-drag>
</div>
</template>
<script>
export default {
data () {
return {
isShowDrag: false
}
},
methods: {
handleClick () {
this.isShowDrag = true
},
handleOpen () {
},
handleClose () {
}
}
}
</script>
欢迎star~~~(*^▽^*)