zhkt-drage v1.0.2

zhkt-drage

Build Setup

# install dependencies
npm install zhkt-drage --save
yarn add zhkt-drage

如何使用

<template>
  <div id="app">
    <Drage :left="200" :top="200" @blur="handleBlur" @focus="handleFocus">
      <div style="width: 200px; height: 200px; background: red"></div>
    </Drage>
  </div>
</template>

<script>
import Drage from "zhkt-drage"; // 引入
export default {
  data() {
    return {};
  },
  components: {
    Drage,
  },
  methods: {
    handleFocus(data) {
      console.log(data, "handleFocus");
    },
    handleBlur(data) {
      console.log(data, "handleBlur");
    },
  },
};
</script>

Props

zIndex
Type: Number, String,
Default: 1
zIndex 表示拖拽的时候该元素的层级

left
Type: Number
Default: 0
left 表示该可拖拽元素页面渲染时距离最近定位父元素左边的位置

top
Type: Number
Default: 0
top 表示该可拖拽元素页面渲染时距离最近定位父元素上边的位置

width
Type: Number
Default: 0
width 表示该可拖拽元素在页面渲染时的宽度

height
Type: Number
Default: 0
height 表示该可拖拽元素在页面渲染时的高度

Events

out,over,focus,blur
所有事件都会接受一个对象，对象里面包含的是当前可拖拽元素唯一标示，距离最近定位父元素左边距离和顶部距离，以及该拖拽元素的高度和宽度

{
       width: this.baseWidth,
       height: this.baseHeight,
       left: this.baseLeft,
       top: this.baseTop,
     }

out
当鼠标指针从元素上移开时触发该事件

over
鼠标指针位于元素上方时触发该事件

focus 当鼠标指针移动到元素上方,并按下鼠标左键时触发该事件，该事件触发之后，表示元素可以跟着鼠标移动

blur
当鼠标指针移动到元素上方,并松开鼠标左键时触发，表示已经拖拽完成