xsd-move

1. 组件介绍

1. xsd-move 是一个可以让用户拖动的容器，里面可以放置任意元素。
2. 我们通过使用这个组件可以十分轻松的完成拖动功能。
3. 欢迎你的使用，如果对 xsd-move 有任何的意见和建议，请发送至 [e-mail] ,我们将进行快速迭代。

2. 组件使用

2.1 安装

1. npm i xsd-move

2.2 引入

1. 全局引入

   import Vue from 'vue'
   import xsdMove from 'xsd-move'
   Vue.use(xsdMove)

1. 全局按需引入

   import {
       xsdMove
   } from 'xsd-move'
   Vue.component('xsd-move', xsdMove)

1. 组件内引入

   import {
       xsdMove
   } from 'xsd-move'
   export default {
       components: {
           xsdMove
       }
   }

2.3 使用

2.3.1 组件的属性

1. positionX: 初始的横坐标，不要带单位
2. positionY: 初始的纵坐标，不要带单位

2.3.2 使用示例

<template>
  <div id="app">
    <xsd-move
      :positionX="90"
      :positionY="100"
    >
      <div style="width: 200px; height: 200px; border-radius: 50%;background-color: skyblue;"></div>
    </xsd-move>
  </div>
</template>
 
<script>
import { xsdMove } from './xsd-move'
 
export default {
  components: {
    xsdMove
  },
 
}
</script>
 
<style scoped>
</style>

3. 样式

.xsd-move {
  z-index: 999;
  position: fixed;
  user-select: none;
  cursor: move;
}