手写分屏插件（VUE版）_vue 分屏插件

国外基于vue的分屏插件

Splitpanes：https://antoniandre.github.io/splitpanes/

自己手写一个简易版的分屏组件

为什么不用Splitpanes？在具体项目中，我发现Splitpanes存在bug，在使用Splitpanes时，如果里面的其中一个分屏出现iframe，则每次调整中间的分屏条都会很卡顿，貌似官方也没给具体的解决方案（查了很多种原因，试了很多种方解决都不行）。所以我这边又找网上资料，参照的写了个基于vue2版本的分屏组件。

具体实现

废话不多说，直接上代码

<template>
  <div class="pane" :style="{ flexDirection: direction }" ref="pane">
    <div class="left" :style="lengthType + paneLengthValue" v-show="leftVisable">
      <slot name="left">
      </slot>
    </div>
    <div
      class="trigger"
      :style="lengthType + triggerLengthValue"
      @mousedown="handleMouseDown"
      title="拖动调整"
    ></div>
    <div class="iframeDiv" ref="iframeDiv" v-show="leftVisable && rightVisable"></div>
    <div class="right" v-show="rightVisable">
      <slot name="right">
      </slot>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    direction: {
      //切屏方向
      type: String,
      default: "row",
    },
    paneLengthPercent: {
      //左侧切屏宽度%
      type: Number,
      default: 50,
    },
    triggerLength: {
      //滑块宽度px
      type: Number,
      default: 10,
    },
    leftVisable: {
      type: Boolean,
      default: ()=>true
    },
    rightVisable: {
      type: Boolean,
      default: ()=>true
    },
    triggerClick:{
      
    }
  },
  components: {},
  data() {
    return {
      triggerLeftOffset: 0, //鼠标距离滑轮左侧顶边距离
    };
  },
  computed: {
    lengthType() {
      if (this.direction === "row") {
        return "height:100%;width:";
      } else {
        return "width:100%;height:";
      }
    },
    paneLengthValue() {
      return `calc(${this.paneLengthPercent}% - ${
        this.triggerLength / 2 + "px"
      })`;
    },
    triggerLengthValue() {
      return `${this.triggerLength + "px"}`;
    },
    pane() {
      return this.$refs.pane;
    },
    iframeDiv() {
      return this.$refs.iframeDiv;
    },
  },
  watch:{
    leftVisable(val){
      console.log('leftVisable:',val)
      if(val){
        if(this.rightVisable){
          this.paneLengthPercent = 50
          this.triggerLength = 10  
        }else{
          this.paneLengthPercent = 100
          this.triggerLength = 0  
        }
      }else{
        this.paneLengthPercent = 0
        this.triggerLength = 0
      }
    },
    rightVisable(val){
      console.log('rightVisable:',val)
      if(val){
        if(this.leftVisable){
          this.paneLengthPercent = 50
          this.triggerLength = 10
        }else{
          this.paneLengthPercent = 0
          this.triggerLength = 0
        }
      }else{
        if(this.leftVisable){
          this.paneLengthPercent = 100
          this.triggerLength = 0
        }else{
          this.paneLengthPercent = 0
          this.triggerLength = 0
        }
      }
    }
  },
  methods: {
    // 按下滑动器后
    handleMouseDown(e) {
      console.log(e)
      document.addEventListener("mousemove", this.handleMouseMove);
      document.addEventListener("mouseup", this.handleMouseUp);
      //计算滑轮宽度
      if (this.direction === "row") {
        this.triggerLeftOffset =
          e.pageX - e.srcElement.getBoundingClientRect().left;
      } else {
        this.triggerLeftOffset =
          e.pageY - e.srcElement.getBoundingClientRect().top;
      }
      this.changeIframeDivStyle("");
    },
    // 按下滑动器后移动
    handleMouseMove(e) {
      const clientRect = this.pane.getBoundingClientRect(); //容器dom
      if (this.direction == "row") {
        const offset =
          e.pageX -
          clientRect.left -
          this.triggerLeftOffset +
          this.triggerLength / 2;
        this.paneLengthPercent = (offset / clientRect.width) * 100;
      } else {
        const offset =
          e.pageY -
          clientRect.height -
          this.triggerLeftOffset +
          this.triggerLength / 2;
        this.paneLengthPercent = (offset / clientRect.height) * 100;
      }
    },
    //鼠标松开
    handleMouseUp() {
      this.changeIframeDivStyle("none");
      document.removeEventListener("mousemove", this.handleMouseMove);
    },
    changeIframeDivStyle(display) {
      this.iframeDiv.style.display = display;
    },
  },
  mounted() {
    this.changeIframeDivStyle("none");
  },
};
</script>

<style>
.pane {
  display: flex;
  height: 100vh;
  position: relative;
}

.trigger {
  background-color: rgb(166, 175, 184);
  user-select: none;
}

.trigger:hover {
  cursor: col-resize;
  background-color: rgb(112, 126, 141);
}

.left {
  position: relative;
}

.right {
  flex: 1;
}

.iframeDiv {
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 9999;
  filter: alpha(opacity=0);
  opacity: 0;
  background: transparent;
}
</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
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201

（注意：上面的iframeDiv遮罩层就可以解决卡顿问题）

具体使用

import SplitPane from '~/SplitPane'
<SplitPane :leftVisable="iframeCertShow" :rightVisable="iframeOriginShow">
    <template v-slot:left>
      <div >
        <iframe
          ref="cert"
          :src="iframeSrcCert"
          frameborder="0"
          width="100%"
          style="height: 98vh; overflow-x: auto"
        />
      </div>

    </template>
    <template v-slot:right >
      <div >
        <iframe
          ref="orgin"
          :src="iframeSrcOrigin"
          frameborder="0"
          style="height: 98vh; overflow-x: auto"
          width="100%"
        />
      </div>
    </template>
  </SplitPane>
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

实际效果