记一次vue-splitpane使用

参考链接
splitpane – 分割面板组件 介绍，是一个可以拖动菜单宽度，可以生成想要
的菜单宽度和内容宽度的一种布局方式。

事件绑定

v-on:resize="resize"
methods:{
    // 用于设置当向左或右拖拽时允许的最小宽度
    resize(data) {
      this.$nextTick(()=>{
        var newWidth = JSON.parse(JSON.stringify(this.$refs.stepBoxStyle.clientWidth));
        if (newWidth < this.stepBoxWidth) {
          this.minPercent = 40;
        } else if (newWidth > this.stepBoxWidth) {
          this.minPercent = 15;
        }
        this.stepBoxWidth = JSON.parse(JSON.stringify(newWidth));
      })
    }
  }

属性选项设置

属性 Property	描述 Description	类型 type	默认值 default
分割 split	分割的类型 the split type	水平还是垂直 String [horizontal,vertical]	必须选择一种类型 must choose one type
最小比例 min-percent	面板最大最小百分比 paneL max-min-percent	数值 Number	10
最大比例 max-percent	面板最大百分比 paneL max-percent	数值 Number	10

全部代码

<template>
  <div class="box">
    <el-container>
      <el-header>抬头信息布局</el-header>
      <el-main>
        <split-pane v-on:resize="resize" :min-percent='minPercent' :default-percent="foldStyle=='icon-uniE14A'?85:100" split="vertical">
        <template slot="paneL">
          <div class="stepBoxStyle" ref="stepBoxStyle">
            <el-steps :active="stepActive" :align-center="true">
              <el-step title="抬头" @click.native="stepNext(0)"></el-step>
              <el-step title="往来核销" @click.native="stepNext(1)"></el-step>
              <el-step title="生成凭证" @click.native="stepNext(2)"></el-step>
            </el-steps>
          </div>
          <div class="content">
            内容
          </div>
        </template>
        <template slot="paneR">
          右侧步骤条
        </template>
      </split-pane>
      <i id="foldBtn" :class="foldStyle" @click="foldToggle"></i>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import SplitPane from 'vue-splitpane'
export default {
  components: {
    SplitPane
  },
  data(){
    return {
      foldStyle:'icon-uniE14A',// 默认为收缩按钮，icon-uniE14E为展开按钮
      stepActive:0,
      minPercent:15, // 往右拖动最小为15，往左最小为
      stepBoxWidth: null
    }
  },
  mounted(){
    // 记录左侧宽度
    this.stepBoxWidth = this.$refs.stepBoxStyle.clientWidth;
  },
  methods:{
    resize(data) {
      this.$nextTick(()=>{
        var newWidth = JSON.parse(JSON.stringify(this.$refs.stepBoxStyle.clientWidth));
        if (newWidth < this.stepBoxWidth) {
          this.minPercent = 40;
        } else if (newWidth > this.stepBoxWidth) {
          this.minPercent = 15;
        }
        this.stepBoxWidth = JSON.parse(JSON.stringify(newWidth));
      })
    },
    foldToggle(){
      this.foldStyle=this.foldStyle=='icon-uniE14A'?'icon-uniE14E':'icon-uniE14A';
    },
    stepNext(index){
      this.stepActive = index;
    }
  }
}
</script>

<style lang="scss" scoped>
.box {
  width: 100%;
  position: fixed;
  left: 0;
  top: 0;
}
.el-header {
  background-color: #b3c0d1;
  color: #333;
  text-align: center;
  height: 98px !important;
  line-height: 98px;
}

.el-main {
  background-color: #e9eef3;
  color: #333;
  text-align: center;
  height: calc(100vh - 98px);
  padding: 0;
  position: relative;
}

.el-main #foldBtn{
  color: #14A6FE;
  position: absolute;
  right: 10px;
  top: 20px;
  cursor: pointer;
  font-size: 20px;
}

// 进度条样式修改
.stepBoxStyle {
  height: 69px;
  border-bottom: 1px solid #ccc;
  padding-top: 10px;
  box-sizing: border-box;
  /deep/ .is-process{
    color: white;
    border-color: #2395ED;
  }
  /deep/ .is-process .is-text{
    background: #2395ED;
  }
  /deep/ .el-step__main .is-process {
    color: #303133;
  }
  /deep/ .is-finish{
    color: #2395ED;
  }
  /deep/ .el-step__main .is-finish {
    color: #303133;
    font-weight: bold;
  }
  /deep/ .is-wait{
    color: #2395ED;
    border-color: #2395ED;
  }
  /deep/ .el-step__main .is-wait {
    color: #303133;
    font-weight: bold;
  }
}
</style>