vue-Split 面板分割

花儿开富贵花

已于 2023-06-07 17:52:18 修改

阅读量1.7k

点赞数

文章标签： vue.js javascript 前端

于 2021-08-12 16:46:48 首次发布

本文链接：https://blog.csdn.net/weixin_43843679/article/details/119648189

版权

这是一个使用Vue.js实现的动态布局组件，允许用户通过点击按钮调整左侧区域的宽度。组件包含左右两个pane和一个触发器，样式使用SCSS编写，并且通过计算属性计算CSS样式值。点击按钮会减少左侧pane的宽度，从而改变整个布局的比例。

摘要由CSDN通过智能技术生成

在这里插入图片描述

<template>
  <div class="split-pane-wrapper">
    <div class="pane pane-left" :style="{width:leftOffsetPercent}">
      <button @click="handleClick">点击减少左侧宽度</button>
    </div>
    <div class="pane-trigger-con" :style="{left:triggerLeft,width:triggerWidthPx}"></div>
    <div class="pane pane-right" :style="{left:leftOffsetPercent}"></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>