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, // 響應(yīng)moveable操作的元素
      origin: false, // moveable元素的中心點(diǎn)是否可見,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時(shí)節(jié)流的單位(px),即每次resize的最小變動(dòng)為100px, 默認(rèn)不節(jié)流
  }
);

2 事件

resize事件有resizeStart,resize,resizeEnd三種,通過moveable實(shí)例的on方法添加監(jiān)聽事件,返回值event

• resize

this.moveable
  .on(
    "resize",
    ({
      currentTarget, // moveable實(shí)例,即this.moveable
      moveable, // moveable的manager對(duì)象, const manager = this.moveable.getManager();
      target, // DOM 初始化moveable的target元素
      clientX, // number 鼠標(biāo)所在屏幕的橫坐標(biāo)
      clientY, // number 鼠標(biāo)實(shí)例所在屏幕的縱坐標(biāo)
      datas,
      inputEvent, // Event 鼠標(biāo)事件mousemove
      direction, // // [numberX, numberY] 用來判斷所操作的句柄: [1,1]表示操作的句柄為右下,[-1,-1]表示操作的句柄是左上, [1,0]表示操作的句柄為右側(cè)邊的中點(diǎn)
      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]相對(duì)于原始數(shù)據(jù)的變化數(shù)據(jù)[x,y]
      delta, // number[] 元素的[width,height]的相對(duì)上一次數(shù)據(jù)的數(shù)據(jù)[deltaX,deltaY]
      isPinch, // 元素是否被壓縮,不包括resize,scale所引起的形變[**暫未證實(shí)具體作用**]
      drag, // 元素的拖拽事件,同onDrag的參數(shù)
    }) => {
      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, 設(shè)置元素的style寬高
      setMin, // (minSize: number[minWidth, minHeight]) => any, 設(shè)置元素的style最小寬高
      setMax, // (minSize: number[maxWidth, maxHeight]) => any, 設(shè)置元素的style最大寬高
      setOrigin, // (origin: Array<string | number>) => any, 設(shè)置css起點(diǎn), (default: % %)[**暫未發(fā)現(xiàn)實(shí)際作用**]
      setFixedDirection, // (startDirecition: number[]) => any, 設(shè)置resize的固定方向; 默認(rèn)為反方向:即往左或往上修改元素大小為負(fù)值,預(yù)期結(jié)果為往左或往上更改元素寬高;如果設(shè)置為正值,則元素寬高只能往右或往下延展,即使操作是往左或往上修改元素大小
      setRatio, // (ratio: number) => any, 設(shè)置resize的比例,僅在keepRatio屬性為true時(shí)生效, 默認(rèn)為offsetWidth / offsetHeight
      currentTarget, 
      moveable, 
      target, 
      clientX, 
      clientY, 
      datas,
      inputEvent, 
      direction, 
    }) => {
      console.log('resizeStart')
    }
  )

• resizeEnd

this.moveable
    .on(
          "resizeEnd",
          ({
            lastEvent, // 最后一個(gè)拖動(dòng)的事件,如果moveable實(shí)例未被執(zhí)行resize操作,則為undefined
            isDrag,  // boolean moveable實(shí)例是否被拖動(dòng)了
            isDouble,  // boolean moveable實(shí)例是否被雙擊
            currentTarget, 
            moveable, 
            target, 
            clientX, 
            clientY, 
            datas,
            inputEvent,
          }) => {
            
          }
        )

3 方法

• request({direction, deltaWidth, deltaHeight, offsetWidth, offsetHeight, isInstant})
  direction // number[], default:[1, 1] resize的方向[暫時(shí)未發(fā)現(xiàn)實(shí)際作用]
  deltaWidth,deltaHeight // number, resize后的元素相對(duì)于resize前的元素的寬高變化的數(shù)據(jù)(單位:px)
  offsetWidth, offsetHeight// number, 元素resize后的絕對(duì)(實(shí)際)寬高(單位:px)
  isInstant, // boolean, 是否立即執(zhí)行request和requestEnd

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