vue-Split如何实现面板分割

这篇文章主要为大家展示了“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{                background: brown;      }      &-right{        right: 0;        bottom: 0;                background: chartreuse;      }      &-trigger-con{        z-index: 100;        height: 100%;        background: red;        position: absolute;        top: 0;      }    }  }</style>

以上是“vue-Split如何实现面板分割”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注编程网精选频道！