dom-resize

dom 节点缩放插件

安装

npm install dom-zoom

使用

<div class="box"></div>

import DomZoom from 'dom-zoom'

// 初始化
const dom = new DomZoom(document.querySelector('.box'))
// or 带参数配置初始
const dom = new DomZoom('.box', {
  width: [0, 500],
  proportional: 0.5, // 宽和高按照1/2比例关联缩放
  control: [
    'bottom',
    {
      name: 'right',
      disabled: false,
      styles: {
        position: 'absolute',
        top: 0,
        right: '-5px',
        width: '10px',
        height: '100%',
        cursor: 'e-resize',
      },
    },
  ],
})

// 注册回调事件
/**
 * 开始缩放事件回调
 * @param {String} direction 缩放方向
 * @param {Element} el 缩放节点
 */
dom.on('start', (direction, el) => {
  console.log(direction, el)
})

// 缩放过程中的回调
dom.on('move', (direction, el) => {
  console.log(direction, el)
})

// 缩放结束回调
dom.on('end', (direction, el) => {
  console.log(direction, el)
})

// 注销回调事件
dom.off('end')
dom.off('move')

// 设置控制器状态及样式
dom.setControlState('bottom', true, {
  background: 'red',
})

// 设置所有控制器状态
dom.setAllControlState(false)

参数选项 options

属性名	类型	默认值	可选值	说明
width	Array	[0, Infinity]	-	宽度的缩放范围，单位 px
height	Array	[0, Infinity]	-	高度度的缩放范围，单位 px
proportional	Boolean	false	-	是否按比例缩放，当为 false 时宽和高无关联，当设置为true时，宽和高将按照dom原始比例缩放
control	Array	['left', 'right', 'top', 'bottom', 'topLeft', 'topRight', 'bottomLeft', 'bottomRight']	-	渲染的控制器及配置

回调函数

回调名	说明	返回参数
start	开始缩放回调	direction: 缩放方向，el: 缩放节点
move	缩放中回调	direction: 缩放方向，el: 缩放节点
end	结束缩放回调	direction: 缩放方向，el: 缩放节点

实例方法

回调名	说明	参数
setControlState	设置控制器状态	controlName：控制器名称， state：状态， controlDom： 深度操控控制器 dom
setAllControlState	设置所有控制器状态	state：状态， controlDom： 深度操控控制器 dom
destroy	销毁	-

controlDom 参数

深度操控控制器 dom

• 启用模式下： controlDom 如果 dom 节点不存在，是否创建 dom 节点,如果传值为 true 使用默认样式渲染; 如果传值为 Object,使用 Object 和默认属性合并后的属性渲染
• 禁用模式下： controlDom 是否删除控制器 dom, 如果传值为 true 将删除控制器 dom; 如果传值为 false, 不会删除控制器 dom