记一次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

全部代码