1.1.1 • Published 1 year ago
dom-zoom v1.1.1
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