1. 安装及引入
npm install vue-splitpane
import splitPane from 'vue-splitpane'
// 注册为全局组件
Vue.component('split-pane', splitPane);
属性说明
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| split | 分割类型 | String [ horizontal （水平），vertical （垂直） ] | 必选一种 |
| min-percent | 面板最小百分比 | Number | 10 |
| max-percent | 面板最大百分比 | Number | 10 |
2. 使用
分割成两列：
<template>
<div class="wrap">
<split-pane @resize="resize" :min-percent='20' :default-percent='30' split="vertical">
<template slot="paneL">
<!-- 编辑自己的代码 -->
<div class="paneL"></div>
</template>
<template slot="paneR">
<!-- 编辑自己的代码 -->
<div class="paneR"></div>
</template>
</split-pane>
</div>
</template>
<script>
export default {
methods: {
resize(){}
},
}
</script>
<style lang="stylus" scoped>
.wrap{
height:300px;
.paneL{
background-color:red;
height:100%;
width:100%;
}
.paneR{
background-color: pink;
height:100%;
width:100%;
}
}
</style>
效果：
分割成三列：
<split-pane @resize="resize" :min-percent='20' :default-percent='30' split="vertical">
<template slot="paneL">
A
</template>
<template slot="paneR">
<split-pane split="horizontal">
<template slot="paneL">
B
</template>
<template slot="paneR">
C
</template>
</split-pane>
</template>
</split-pane>
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/141338.html
