基于 vue2.0 ,可自由拖拽、自由调整大小、收缩展开的 panel 组件
# install vue global expand
npm install -g @vue/cli-service-global
# install dependencies
npm install
# serve => demo at localhost:8080
npm start
属性 | 说明 | 类型 | 默认值 |
---|---|---|---|
resizeable | 是否可以调整大小,默认x、y轴都可,也可单独设置x('horizontal'),y ('vertical') | Boolean、String | false |
collapsable | 是否允许收缩扩展 | Boolean | true |
width | 面板初始宽度 | Number | auto |
height | 面板初始高度 | Boolean | auto |
maxWidth | 面板最大宽度 | Boolean | 视口宽度(100vw) |
maxHeight | 面板最大高度 | Boolean | 视口高度(100vh) |
minWidth | 面板最小宽度, 值必须>=36 | Array | 36 |
minHeight | 面板最小高度, 值必须>=36 | Number | 36 |
事件名 | 说明 | 返回值 |
---|---|---|
toggle-expand | 面板切换展开、收缩状态时触发 | expandState (当前是否展开,返回 Boolean ) |
panel 元素为绝对定位(absolute),注意父元素 position 属性的设置。