网页特效栏目收集了最全最新的前端网页插件,包括最流行的jQuery,Bootstrap,Js,Css,Vue等主流特效插件。
一个多列分割视图组件,用于在您的应用中生成可调整大小的垂直和/或水平分割布局。
1.导入寄存器组件。
import { MultiSplitPane, Pane } from 'vue-multi-split-pane';
export default {
components: {
MultiSplitPane,
Pane
// ...
}
}
2.创建一个基本的水平拆分布局。
<MultiSplitPane
split="horizontal"
height="400px"
width="1000px"
resizerWidth="30px"
classes="v-pane-custom"
@onPaneCollapsed="onPaneCollapsed"
@onPaneExpanded="onPaneExpanded"
>
<Pane>
<template v-slot:resizer>
Resizer 1
</template>
<template v-slot:content>
Content 1
</template>
</Pane>
<Pane>
<template v-slot:content>
Content 2
</template>
</Pane>
<Pane>
<template v-slot:content>
Content 3
</template>
</Pane>
</MultiSplitPane>
export default {
components: {
MultiSplitPane,
Pane
// ...
},
methods: {
onPaneCollapsed(paneIndex, paneClass, containerClass) {
console.log(
`${paneIndex}. pane collapsed. Pane class: '${paneClass}' MultiSplitPane class: '${containerClass}'`
)
},
onPaneExpanded(paneIndex, paneClass, containerClass) {
console.log(
`${paneIndex}. pane expanded. Pane class: '${paneClass}' MultiSplitPane class: '${containerClass}'`
)
}
}
}
3. 拆分布局还支持嵌套窗格。
<MultiSplitPane
split="horizontal"
height="400px"
width="1000px"
resizerWidth="30px"
classes="v-pane-custom"
:nested="true"
@onPaneCollapsed="onPaneCollapsed"
@onPaneExpanded="onPaneExpanded"
>
<Pane>
<template v-slot:content>
Content 1
</template>
</Pane>
<Pane classes="paneNested">
<template v-slot:content>
<MultiSplitPane
height="400px"
resizerWidth="30px"
classes="v-pane-custom"
>
<Pane>
<template v-slot:content>
Content 2.1
</template>
</Pane>
<Pane>
<template v-slot:content>
Content 2.2
</template>
</Pane>
</MultiSplitPane>
</template>
</Pane>
</MultiSplitPane>
4. 组件默认配置项。
height: { type: String, required: true },
width: { type: String, default: '100%' },
classes: { type: String },
split: { type: String, default: 'vertical' },
resizerWidth: { type: String, default: '30px' },
nested: { type: Boolean, default: false }
转载请注明来源:vue多列布局组件(vue-multi-split-pane)
本文永久链接地址:https://www.moyouyouw.cn/code/1184.html
郑重声明:本站所有主题/文章除标明原创外,均来自网络转载,版权归原作者所有,如果有侵犯到您的权益,请联系本站删除,谢谢!我们不承担任何技术及版权问题,且不对任何资源负法律责任。
已有 位小伙伴发表了看法
欢迎 你 发表评论