这篇文章主要为大家展示了“vue-Split如何实现面板分割”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“vue-Split如何实现面板分割”这篇文章吧。
具体内容如下
<template>
<div class="split-pane-wrapper">
<div class="pane pane-left" :>
<button @click="handleClick">点击减少左侧宽度</button>
</div>
<div class="pane-trigger-con" :></div>
<div class="pane pane-right" :></div>
</div>
</template>
<script>
export default {
components: {},
data() {
return{
// 在这定义一个值。这样用户可以直接指定占比的值
// 在页面css 布局使用的值 使用计算属性拼接即可
leftOffset:0.3,
triggerWidth:8
}
},
computed:{
// 动态属性去拼接生成css 实际需要的代%形式的数据
leftOffsetPercent(){
return `${this.leftOffset * 100}%`
},
triggerWidthPx(){
return `${this.triggerWidth}px`
},
triggerLeft(){
return `calc(${this.leftOffset * 100}% - ${this.triggerWidth/2}px)`
},
},
methods: {
handleClick(){
this.leftOffset -= 0.02
}
},
}
</script>
<style lang="scss" scoped>
.split-pane-wrapper{
width: 100%;
height: 100%;
position: relative;
.pane{
position: absolute;
height: 100%;
top:0;
&-left{
/*width: 30%;*/
background: brown;
}
&-right{
right: 0;
bottom: 0;
/*left: 30%;*/
background: chartreuse;
}
&-trigger-con{
z-index: 100;
height: 100%;
background: red;
position: absolute;
top: 0;
}
}
}
</style>
以上是“vue-Split如何实现面板分割”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注亿速云行业资讯频道!
亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。