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

使用方法

yarn add dty-directives

// main.js
import * as dtyDirectives from 'dty-directives'

Object.keys(dtyDirectives).forEach((directive) => {
  Vue.directive(directive, dtyDirectives[directive])
})

/*
1. v-drag 支持在h5 web上的拖动
  @params{ type:string } h5 / web
  @params{ area:string } 在哪个区域进行拖动 可传 类名 或者 id
*/
<template>
  <div id="app">
    <router-view />
    <div class="wrapper">
      <div class="box" v-drag="{ type:'h5',area: '.wrapper' }"></div>
    </div>
  </div>
</template>

html,
body,
#app {
  width: 100%;
  height: 100%;
  margin: 0;
}
/* 在哪区域可以进行拖动  position:relative */
.wrapper {
  width: 300px;
  height: 300px;
  border: 1px solid #ddd;
  position: relative;
  margin: 100px;
}
/* 记得要给目标元素添加 position:absolute */
.box {
  width: 50px;
  height: 50px;
  background-color: green;
  position: absolute;
  top: 0;
  left: 0;
}