Ninety-nine Pitchers of Malt

    vue-draggable-resizable-zyw

    1.0.9 • Public • Published

    logo

    VueDraggableResizable 2

    Latest Version on NPM Software License npm

    新增特征

    • 辅助线(新)
    • 元素对齐(新)
    • 冲突检测
    • 吸附对齐
    • 默认样式优化

    Q交流群:138146781

    说明

    说明:组件基于vue-draggable-resizable进行二次开发

    距离上1.7版本版本的修改已经过去快一年的时间了,原版组件在之前已经更新到了2.0版本。

    虽然之前适配过旧版组件,但是因为2.0版本原作者对代码进行了重构,原来修改的代码照搬是不可能的了。

    所以也就一直没有将冲突检测以及吸附对齐功能适配到2.0版本,最近正好有时间就适配一下。

    功能预览

    英文版演示地址 | 中文版演示地址

    注意:英文版为官方原版,没有新增功能的演示。中文版为google翻译版本,新增功能在高级目录下可查看

    新增Props

    handleInfo
    类型: Object
    必需: false
    默认: { size: 8, offset: -5, switch: true }

    当使用transform:scale()进行缩放操作时,其中switch为是否让handle始终保持视觉效果不变,size为handle的大小(宽高相同), offset为handle的位置偏移,通常在自定义handle样式时需要设置。

    <vue-draggable-resizable :handle-info="{size: 14,offset: -5,switch: true}" />

    scaleRatio
    类型: Number
    必需: false
    默认: 1

    当使用transform:scale()进行缩放操作时,用来修复操作组件时鼠标指针与移动缩放位置有所偏移的情况

    详见:Issues

    <vue-draggable-resizable :scale-ratio="0.6" />

    isConflictCheck
    类型: Boolean
    必需: false
    默认: false

    定义组件是否开启冲突检测。

    <vue-draggable-resizable :is-conflict-check="true" />

    snap
    类型: Boolean
    必需: false
    默认: false

    定义组件是否开启元素对齐。

    <vue-draggable-resizable :snap="true" />

    snapTolerance
    类型: Number
    必需: false
    默认: 5

    当调用snap时,定义组件与元素之间的对齐距离,以像素(px)为单位。

    <vue-draggable-resizable :snap="true" :snap-tolerance="20" />

    新增Events

    refLineParams
    参数: params

    返回参数是一个Object,里面包含vLinehLine,具体使用参考下面代码。

    <div>
      <vue-draggable-resizable :snap="true" :snap-tolerance="20" @refLineParams="getRefLineParams" />
      <vue-draggable-resizable :snap="true" :snap-tolerance="20" @refLineParams="getRefLineParams" />
      <span class="ref-line v-line"
          v-for="item in vLine"
          v-show="item.display"
          :style="{ left: item.position, top: item.origin, height: item.lineLength}"
      />
      <span class="ref-line h-line"
          v-for="item in hLine"
          v-show="item.display"
          :style="{ top: item.position, left: item.origin, width: item.lineLength}"
      />
    </div>
    
    <script>
    import VueDraggableResizable from 'vue-draggable-resizable'
    import 'vue-draggable-resizable-gorkys/dist/VueDraggableResizable.css'
    
    export default {
      name: 'app',
      components: {
        VueDraggableResizable
      },
      data () {
        return {
          vLine: [],
          hLine: []
        }
      },
      methods: {
        getRefLineParams (params) {
          const { vLine, hLine } = params
          this.vLine = vLine
          this.hLine = hLine
        }
      }
    }
    </script>
    

    其它属性

    英文版 | 中文版

    注意:英文版为官方原版,中文版为google翻译版本

    安装使用

    $ npm install --save vue-draggable-resizable-gorkys

    全局注册组件

    //main.js
    import Vue from 'vue'
    import vdr from 'vue-draggable-resizable-gorkys'
    
    // 导入默认样式
    import 'vue-draggable-resizable-gorkys/dist/VueDraggableResizable.css'
    Vue.component('vdr', vdr)

    局部注册组件

    <template>
      <div style="height: 500px; width: 500px; border: 1px solid red; position: relative;">
        <vdr :w="100" :h="100" v-on:dragging="onDrag" v-on:resizing="onResize" :parent="true">
          <p>Hello! I'm a flexible component. You can drag me around and you can resize me.<br>
          X: {{ x }} / Y: {{ y }} - Width: {{ width }} / Height: {{ height }}</p>
        </vdr>
        <vdr
          :w="200"
          :h="200"
          :parent="true"
          :debug="false"
          :min-width="200"
          :min-height="200"
          :isConflictCheck="true"
          :snap="true"
          :snapTolerance="20"
        >
        </vdr>
      </div>
    </template>
    
    <script>
    import vdr from 'vue-draggable-resizable-gorkys'
    import 'vue-draggable-resizable-gorkys/dist/VueDraggableResizable.css'
    export default {
      components: {vdr},
      data: function () {
        return {
          width: 0,
          height: 0,
          x: 0,
          y: 0
        }
      },
      methods: {
        onResize: function (x, y, width, height) {
          this.x = x
          this.y = y
          this.width = width
          this.height = height
        },
        onDrag: function (x, y) {
          this.x = x
          this.y = y
        }
      }
    }
    </script>

    License

    The MIT License (MIT). Please see License File for more information.

    Install

    npm i vue-draggable-resizable-zyw

    DownloadsWeekly Downloads

    1

    Version

    1.0.9

    License

    MIT

    Unpacked Size

    2.07 MB

    Total Files

    25

    Last publish

    Collaborators

    • ywalexyw