记一次vue-splitpane使用_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));
      })
    }
  }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

属性选项设置

全部代码

<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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134