Admin.UI/src/directive/resizable.js

这里只显示每个文件的开头 60 行。登录后可以解锁完整代码。

微信扫码关注公众号，代码整理好后第一时间通知你。

/**
 *  元素拖拽改变尺寸指令
 *  @module @/directive/resizable
 */

import { addClass, removeClass, getStyle, setStyle } from 'element-ui/lib/utils/dom'

// 需要继承Events
import Events from '@/utils/events'

// 禁止页面选择className
const USER_SELECT_NONE = 'user-select--none'

// 拖拽容器的className
const RESIZABLE_CLASS = 'my-resizable'

const RESIZING_CLASS = 'my-resizable--resizing'

// 空函数
const noop = function() {
}

/**
 * Resizable实例化默认参数
 * @const
 * @type {object}
 * @property {boolean} [disabled=false] 是否禁用
 * @property {string} [handles=all]  可resize的方向，可选值 e,s,w,n,nw,ne,sw,se,all
 * @property {number} [minWidth=20] 可resize最小宽度
 * @property {number} [minHeight=20] 可resize最小高度
 * @property {number} [maxWidth=10000] 可resize最大宽度
 * @property {number} [maxHeight=10000] 可resize最大高度
 * @property {Object} [offset={}] 位置定义
 * @property {string} [offset.left=left] x位置名称
 * @property {string} [offset.top=top] y位置名称
 * @property {function} [onStartResize] 开始改变尺寸时回调
 * @property {function} [onStopResize] 结束改变尺寸时回调
 * @property {function} [onResize] 正在改变尺寸时回调
 */
const defaultOptions = {
  // 宿主元素选择器
  host: null,
  disabled: false,
  // 可resize的方向，可选值 e,s,w,n,nw,ne,sw,se,all
  handles: 'all',
  minWidth: 100,
  minHeight: 100,
  maxWidth: 10000,
  maxHeight: 10000,
  // 自动计算范围
  autoCalcRange: false,
  // 范围元素选择器
  rangeDom: null,
  // 是否只改变width和height的值，在layout组件不需要改变left 和 top
  onlySize: false,
  // 位置定义
  offset: {
    left: 'left',
    top: 'top'
  },