moveable组件学习笔记三: resize更改大小

resize 更改元素大小

https://daybrush.com/moveable/release/latest/doc/Moveable.Resizable.html

1 属性

this.moveable = new Moveable(
  this.$refs.container, // moveable元素的父元素
  {
      className: 'draggable', // 可交互组件的class名称
      target: this.$refs.example, // 响应moveable操作的元素
      origin: false, // moveable元素的中心点是否可见,default: true
      /**更改大小属性 */
      resizable: true, // 是否支持更改大小
      keepRatio: false, // 是否等比例更改大小, default: false
      renderDirections:  ["nw", "ne", "sw", "se"], // resize的句柄显示, default: ["n", "nw", "ne", "s", "se", "sw", "e", "w"]
      throttleResize: 100, // resize时节流的单位(px),即每次resize的最小变动为100px, 默认不节流
  }
);

2 事件

resize事件有resizeStart,resize,resizeEnd三种,通过moveable实例的on方法添加监听事件,返回值event

• resize

this.moveable
  .on(
    "resize",
    ({
      currentTarget, // moveable实例,即this.moveable
      moveable, // moveable的manager对象, const manager = this.moveable.getManager();
      target, // DOM 初始化moveable的target元素
      clientX, // number 鼠标所在屏幕的横坐标
      clientY, // number 鼠标实例所在屏幕的纵坐标
      datas,
      inputEvent, // Event 鼠标事件mousemove
      direction, // // [numberX, numberY] 用来判断所操作的句柄: [1,1]表示操作的句柄为右下,[-1,-1]表示操作的句柄是左上, [1,0]表示操作的句柄为右侧边的中点
      width, // number 元素(target)的css宽度
      height, // number 元素(target)的css高度
      offsetWidth, // number 元素(target)的offsetWidth(padding + width + border)
      offsetHeight, // number 元素(target)的offsetHeight(padding + height + border)
      dist, // number[] 元素的[width,height]相对于原始数据的变化数据[x,y]
      delta, // number[] 元素的[width,height]的相对上一次数据的数据[deltaX,deltaY]
      isPinch, // 元素是否被压缩,不包括resize,scale所引起的形变[**暂未证实具体作用**]
      drag, // 元素的拖拽事件,同onDrag的参数
    }) => {
      target.style.width = `${width}px`;
      target.style.height = `${height}px`;
      target.style.transform = `translate(${drag.beforeTranslate[0]}px, ${drag.beforeTranslate[1]}px)`;
    }
  )

• resizeStart

this.moveable
  .on(
    "resizeStart",
    ({
      dragStart, // 同dragStart事件
      set, // (size: number[width, height]) => any, 设置元素的style宽高
      setMin, // (minSize: number[minWidth, minHeight]) => any, 设置元素的style最小宽高
      setMax, // (minSize: number[maxWidth, maxHeight]) => any, 设置元素的style最大宽高
      setOrigin, // (origin: Array<string | number>) => any, 设置css起点, (default: % %)[**暂未发现实际作用**]
      setFixedDirection, // (startDirecition: number[]) => any, 设置resize的固定方向; 默认为反方向:即往左或往上修改元素大小为负值,预期结果为往左或往上更改元素宽高;如果设置为正值,则元素宽高只能往右或往下延展,即使操作是往左或往上修改元素大小
      setRatio, // (ratio: number) => any, 设置resize的比例,仅在keepRatio属性为true时生效, 默认为offsetWidth / offsetHeight
      currentTarget, 
      moveable, 
      target, 
      clientX, 
      clientY, 
      datas,
      inputEvent, 
      direction, 
    }) => {
      console.log('resizeStart')
    }
  )

• resizeEnd

this.moveable
    .on(
          "resizeEnd",
          ({
            lastEvent, // 最后一个拖动的事件,如果moveable实例未被执行resize操作,则为undefined
            isDrag,  // boolean moveable实例是否被拖动了
            isDouble,  // boolean moveable实例是否被双击
            currentTarget, 
            moveable, 
            target, 
            clientX, 
            clientY, 
            datas,
            inputEvent,
          }) => {
            
          }
        )

3 方法

• request({direction, deltaWidth, deltaHeight, offsetWidth, offsetHeight, isInstant})
  direction // number[], default:[1, 1] resize的方向[暂时未发现实际作用]
  deltaWidth,deltaHeight // number, resize后的元素相对于resize前的元素的宽高变化的数据(单位:px)
  offsetWidth, offsetHeight// number, 元素resize后的绝对(实际)宽高(单位:px)
  isInstant, // boolean, 是否立即执行request和requestEnd

dragRequest() {
      const requester = this.moveable.request("draggable");
      requester.request({ deltaX: 10, deltaY: 10 });
      requester.requestEnd();
    },