vue-Split如何實現(xiàn)面板分割

這篇文章主要為大家展示了“vue-Split如何實現(xiàn)面板分割”，內(nèi)容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學習一下“vue-Split如何實現(xiàn)面板分割”這篇文章吧。

具體內(nèi)容如下

<template>
  <div class="split-pane-wrapper">
    <div class="pane pane-left" :>
      <button @click="handleClick">點擊減少左側(cè)寬度</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:{
    // 動態(tài)屬性去拼接生成css 實際需要的代%形式的數(shù)據(jù)
    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如何實現(xiàn)面板分割”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學習更多知識，歡迎關(guān)注億速云行業(yè)資訊頻道！