位置:首页 > web前端 > vue

vueresize使用方法

dearweb 发布:2021-11-12 23:18:40阅读:

vueresize 插件使用方式介绍

安装:

npm i -s vue-drag-resize

使用

<template>
  <div>
    <VueDragResize :isActive="true"  :isResizable="false" >
      <img src="../assets/logo.png" v-drag height="100px" width="100px" />
    </VueDragResize>
  </div>
</template>

<style>
// 删除边框
.vdr.active:before{
  outline: none
}
</style>
   
<script>
// 引入文件
import VueDragResize from "vue-drag-resize";
export default {
  components: {
    VueDragResize
  },
  data() {
    return {};
  },
  methods: {},
  mounted() {
   
  }
};
</script>
// :isResizable="false" 不支持缩放,只支持拖拽

属性

isActive 是否激活状态

Type: Boolean || Required: false || Default: false

处于激活状态的组件才能进行拖拽与缩放等操作,状态呈现激活状态

isDraggable 是否允许拖拽

Type: Boolean || Required: false || Default: true

isResizable 是否允许缩放

Type: Boolean || Required: false || Default: true

aspectRatio 是否等比例缩放

Type: Boolean || Required: false || Default: false

设置为true,则会按照元素的元比例缩放。坑:定义了这个属性,发现重新设置宽高的时候出现了异常(新值比例不同于旧值),需要在重设宽高的时候把aspectRatio设置为false,再将其设置回去,才能保证新值的等比例

w 组件宽度

Type: Number || Required: false || Default: 200

h 组件高度

Type: Number || Required: false || Default: 200

minw 最小宽度

Type: Number || Required: false || Default: 50

注意,不能设置为0,因为这个组件里面属性要求大于0

minh 最小高度

Type: Number || Required: false || Default: 50

注意,不能设置为0,因为这个组件里面属性要求大于0

x 定位left

Type: Number || Required: false || Default: 0

y 定位top

Type: Number || Required: false || Default: 0

z 层级

Type: Number || Required: false || Default: auto

注意在元素激活的时候,z会被设置为最高的,所以在管理z的时候要注意

sticks元素缩放的节点定义

Type: Array || Required: false || Default: [‘tl’, ‘tm’, ‘tr’, ‘mr’, ‘br’, ‘bm’, ‘bl’, ‘ml’]


tl - Top left

tm - Top middle

tr - Top right

mr - Middle right

br - Bottom right

bm - Bottom middle

bl - Bottom left

ml - Middle left

preventActiveBehavior 单击组件外区域来禁止组件行为

Type: Boolean || Required: false || Default: false


设置这个属性true,就可以解决在其他区域操作返回到组件区域的时候,不需要再次点击就激活组件

parentLimitation 是否超出父级元素

Type: Boolean || Required: false || Default: false

设置为true,则限制操作组件不能超出父级元素

parentW 父级宽度

Type: Number || Required: false || Default: 0


该值限制了元素可以拖动的水平最大宽度,前提是parentLimitation=true

parentH 父级高度

Type: Number || Required: false || Default: 0

该值限制了元素可以拖动的水平最大高度,前提是parentLimitation=true

parentScaleX

Type: Number || Required: false || Default: 1

parentScaleY

Type: Number || Required: false || Default: 1

axis 允许拖拽的方向,

Type: String || Required: false || Default: both

取值可以为x、 y、 both、none

dragHandle 定义拖拽时的classname

Type: String || Required: false

dragCancel 定义取消拖拽时的classname

Type: String || Required: false

事件

clicked 组件点击事件

Required: false || Parameters: 组件实例

activated 点击组件外事件

Required: false || Parameters: 无

resizing 缩放时事件

Required: false || Parameters: object

{
    left: Number, //the X position of the component
    top: Number, //the Y position of the component
    width: Number, //the width of the component
    height: Number //the height of the component
}

resizestop 缩放结束

Required: false || Parameters: object

object 同resizing的object

dragging拖拽时事件

Required: false || Parameters: object

object 同resizing的object

dragstop 拖拽结束事件

Required: false || Parameters: object

object 同resizing的object

issues

在拖拽元素里面添加input等类似的表单性元素,无法正常点击操作,特别是focus无法做到,click也是经常失效[摊手]

vue-drag-resize 的设计问题,在元素内部只能触发本元素,如果是有表单元素,只能被动的触发;解决:

 <vue-drag-resize @activated="activateEv(index)" />
 
 activateEv(index) {
    console.log('activateEv' + index);
    this.$refs['drag-input'].focus();
  }

怎么修改使点击组件外面后,不需要点击组件才能进行?

:preventActiveBehavior=“true” 设置这个属性,禁用点击组件外事件

插件地址

github地址:https://github.com/kirillmurashov/vue-drag-resize


24人点赞 返回栏目 分享一波

小礼物走一波,支持作者

还没有人赞赏,支持一波吧

留言 评论仅代表网友个人 留言列表

暂无留言,快来抢沙发吧!

手机扫码查看 手机扫码查看