可拖拽分隔面板(vue-splitpane)
可拖拽分隔面板(vue-splitpane)
·
使用 vue-splitpane 组件可实现垂直或者水平的面板分隔
1、安装
npm install vue-splitpane
2、引入(在需要引入 vue-splitpane 的模块文件中进行引入)
import splitPane from 'vue-splitpane'
export default {
componnets: { splitPane }
}
3、使用
<!-- 简单使用 -->
<split-pane @resize="resize" :min-percent="10" :default-percent="30" split="vertical">
<template slot="paneL">left content</template>
<template slot="paneR">right content</template>
</split-pane>
<!-- 嵌套使用 -->
<split-pane @resize="resize" :min-percent="10" :default-percent="30" split="vertical">
<template slot="paneL">left content</template>
<template slot="paneR">
<split-pane @resize="resize" :min-percent="10" :default-percent="30" split="horizontal">
<template slot="paneL">top content</template>
<template slot="paneR">bottom content</template>
</split-pane>
</template>
</split-pane>
4、Props & Function
split: String 拆分类型(垂直拆分:vertical; 水平查分:horizontal)
min-percent: Number paneL 的最小占比
max-percent: Number paneL 的最大占比
resize: Function 事件
更多推荐
已为社区贡献32条内容
所有评论(0)