dty-directives v1.0.2

基于vue的自定义的指令的封装

• 快速开发
• 简单上手

使用方式

安装

• yarn add dty-directives
• npm i dty-directives

拖拽

• 介绍：支持pc,移动端的拖拽 ，简单快速实现拖拽功能（默认支持el-dialog的拖拽）

// main.js
import  {Drag}  from 'dty-directives'
Vue.use(Drag)

// 组件中

//  指定移动的元素在哪个区域移动  v-drag="{ header: '.header', area: '.box', container: '.wrapper' }"

 <div
      class="container"
      style="width: 500px; height: 500px; border: 1px solid #ddd"
      v-drag="{ header: '.header', area: '.box', container: '.wrapper' }"
    >
      <div
        class="wrapper"
        style="width: 200px; height: 200px; background-color: green"
      >
        <div
          style="
            width: 80px;
            height: 80px;
            background-color: red;
            margin-left: 20px;
          "
        >
          <div
            style="width: 30px; height: 30px; background-color: pink"
            class="header"
          ></div>
        </div>
      </div>
    </div>

// 默认支持el-dialog
<el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      @on-drag-dialog="onDragDialog"
      v-drag
    >
      <span>这是一段信息</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false"
          >确 定</el-button
        >
      </span>
</el-dialog>

参数说明

配置参数

• header 指定的拖拽头
• container 当前拖拽要移动的元素 默认指令在那个元素上哪个元素为拖动主体 要想自定义拖拽的主体元素的话 v-drag层级高于被指定的主体元素
• area 在哪块区域上移动 默认body

事件

• on-drag-dialog 拖动完成后返回的回调函数，参数 x,y表示当前的坐标信息

复制剪贴

• 介绍：点击即可复制到剪切板

// main.js
import {Clipboard} from 'dty-directives'
Vue.use(Clipboard)

//组件中
// 点击复制即可复制到剪贴板
<span v-clipboard:success="success" v-clipboard:copy="'dylan66ty'">复制</span>

参数说明

配置参数

• args success/error copy/cut

事件

• v-clipboard:success 复制/剪贴成功的回调
• v-clipboard:error 复制/剪贴失败的回调

水波纹

• 介绍： 单机会有水波纹的样式

// main.js
import {Waves} from 'dty-directives'
Vue.use(Waves)

//组件中
// 点击按钮触发水波纹
<el-button v-waves="{el:'',type:'',color:''}">Waves</el-button>

参数说明

配置参数

• ele: el, // 波纹作用元素
• type: 'hit', // hit 点击位置扩散 center中心点扩展
• color: 'rgba(0, 0, 0, 0.15)' // 波纹颜色

事件

• todo

粘性布局

• 介绍： 粘性布局

// main.js
import {Sticky}  from 'dty-directives'
Vue.use(Sticky)

//组件中
// 滚动触发粘性布局
<div v-sticky>粘性布局</div>

参数说明

配置参数

• stickyTop: 0 // 距离顶部定位的位置
• zIndex: 1000 // 定位的层级

事件

• todo