xiaoshi_system/src/utils/model/myView/index.vue

<template>
    <!-- 双视图 -->
    <div class="myView" :style="{ 'flex-direction': direction }" ref="myView">
      <slot name="left" class="myView_Left"></slot>
      <div :class="className" data-type="mouse" @mousedown="mousedown" v-show="showView"></div>
      <slot name="right" class="myView_Right"></slot>
    </div>
</template>
  
  <script>
  export default {
    props: {
      position: {
        default: 'row'
      },
      showView:{
        default:true
      },
      disabled:{
        default:false
      }
    },
    data() {
      return {
        direction: null,
        className: 'myView_Middle',
        haveIframe:false
      }
    },
    watch: {
      position() {
        this.directionRule()
        this.getShow()
      },
      showView(){
        this.getShow()
      },
      disabled(){
        this.getMouse()
      }
    },
    mounted() {
      this.directionRule()
      this.getShow()
      this.getMouse()
      
      window.addEventListener('resize',this.EventListener)
    },
    methods: {
      // 窗口缩放，内容等比例缩放
      EventListener() {
        if(!this.showView){
          return
        }
        var dom = this.$refs.myView
          let len = dom.childNodes.length
          for (var i = 0; i < len; i++) {
            if (dom.childNodes[i].getAttribute('data-type') && dom.childNodes[i].getAttribute('data-type') == 'mouse') {
              if (this.direction == 'row' || this.direction == 'row-reverse') {
                dom.childNodes[i].style.width = '5px'
              } else {
                dom.childNodes[i].style.width = '100%'
              }
            } else {
              if (this.direction == 'row' || this.direction == 'row-reverse') {
                dom.childNodes[i].style.width = (dom.childNodes[i].clientWidth / (dom.clientWidth - 5)) * 100 + '%'
              } else {
                dom.childNodes[i].style.height = (dom.childNodes[i].clientHeight / (dom.clientHeight - 5)) * 100 + '%'
              }
  
            }
          }
      },
      checkIframe(){
        if(!this.showView){
          return false
        }
        // 获取所有的 iframe 元素
        var iframes = document.getElementsByClassName('myIframe');
        
        if (iframes.length > 0) {
            this.haveIframe = true
        }
      },
      changeIframe(display){
        // 获取所有的 iframe 元素
        var iframes = document.getElementsByClassName('myIframe');
        for(var i = 0;i<iframes.length;i++){
          iframes[i].style.pointerEvents = display
        }
      },
      getShow(){
        var dom = this.$refs.myView
        var display = this.showView?'block':'none'
        if(!this.showView){
            dom.childNodes[0].style.width = '100%'
            dom.childNodes[0].style.height = '100%'
        }else{
          dom.childNodes[0].style.width = '100%'
          dom.childNodes[2].style.width = '100%'
          dom.childNodes[0].style.height = '100%'
          dom.childNodes[2].style.height = '100%'
        }
        if (this.direction == 'row' || this.direction == 'row-reverse') {
          dom.childNodes[1].style.height = '100%'
          dom.childNodes[1].style.width = '5px'
        } else {
          dom.childNodes[1].style.height = '5px'
          dom.childNodes[1].style.width = '100%'
        }
        dom.style.setProperty('--displays',`${display}`)
      },
      getMouse(){
        var dom = this.$refs.myView
        var dom2 = dom.querySelector('[data-type="mouse"]')
        if(this.disabled){
            dom2.classList.add('disabled')
        }else{
            if(dom2.classList.contains('disabled')){
                dom2.classList.remove('disabled')
            }
            
        }
      },
      // 排列方向
      directionRule() {
        var a = ['row', "row-reverse", "column", "column-reverse"]
        if (a.indexOf(this.position) == -1) {
          this.direction = 'row'
        } else {
          this.direction = this.position
        }
  
        if (this.direction == 'row' || this.direction == 'row-reverse') {
          this.className = 'myView_Middle'
        } else {
          this.className = 'myView_Middle2'
        }
      },

      // 鼠标按下
      mousedown(e) {
        // 上一个兄弟
        var prev = e.currentTarget.previousElementSibling
        // 下一个兄弟
        var next = e.currentTarget.nextElementSibling
        // 绑定事件的目标元素
        var now = e.currentTarget
        // 绑定事件目标元素的父级
        var box = e.currentTarget.parentNode
        // 当事件被触发时鼠标相对于窗口左侧的距离
        var startX = e.clientX;
        // 目标元素距离左侧的距离
        now.left = now.offsetLeft;
        // 当事件被触发时鼠标相对于窗口顶部的距离
        var startY = e.clientY;
        // 目标元素距离顶部的距离
        now.Top = now.offsetTop;
        this.checkIframe()
        // 鼠标拖动
        document.onmousemove = (e) => {
          window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
          if(this.haveIframe){
            this.changeIframe('none')
          }
          var endX = e.clientX;
          var endY = e.clientY;
          // now.left + 移动的距离 - 整个盒子距离左侧的距离 = 左边区域最后的宽度
          var moveLenX = now.left + (endX - startX) - box.offsetLeft;
          // now.Top + 移动的距离 - 整个盒子距离上边的距离= 上边区域最后的宽度
          var moveLenY = now.Top + (endY - startY) - box.offsetTop;
          // 容器宽度 - 左边区域的宽度 = 右边区域的宽度
          var maxTX = box.clientWidth - now.offsetWidth;
          // 容器宽度 - 上边区域的宽度 = 下边区域的宽度
          var maxTY = box.clientHeight - now.offsetHeight;
          // 左边区域的最小宽度为150px
          if (moveLenX < 150) moveLenX = 150;
          //右边区域最小宽度为150px
          if (moveLenX > maxTX - 150) moveLenX = maxTX - 150;
          // 上边区域的最小宽度为150px
          if (moveLenY < 150) moveLenY = 150;
          //下边区域最小宽度为150px
          if (moveLenY > maxTY - 150) moveLenY = maxTY - 150;

          switch(this.direction){
            case 'row':
              // 设置目标元素距离左侧区域的距离
              now.style.left = moveLenX;
              prev.style.width = moveLenX + 'px';
              now.style.width = '5px'
              if (next) {
                next.style.width = box.clientWidth - moveLenX - 5 + 'px';
              }
              break;
            case 'row-reverse':
              now.style.left = moveLenX;
              next.style.width = moveLenX + 'px';
              now.style.width = '5px'
              if (prev) {
                prev.style.width = box.clientWidth - moveLenX - 5 + 'px';
              }
              break;
            case 'column':
              // 设置目标元素距离顶部的距离
              now.style.top = moveLenY;
              // 左侧（上一个）的兄弟元素
              prev.style.height = moveLenY + 'px';
              now.style.height = '5px'
              if (next) {
                next.style.height = (box.clientHeight - moveLenY) + 'px';
              }
              break;
            case 'column-reverse':
              // 设置目标元素距离顶部的距离
              now.style.top = moveLenY;
              // 左侧（上一个）的兄弟元素
              next.style.height = moveLenY + 'px';
              now.style.height = '5px'
              if (prev) {
                prev.style.height = (box.clientHeight - moveLenY) + 'px';
              }
              break;
          }
        }
        // 鼠标抬起清空按下及拖动事件
        document.onmouseup = (e) => {
          if(this.haveIframe){
            this.changeIframe('')
          }
          document.onmouseup = null;
          document.onmousemove = null;
        }
      },

    },
    deactivated(){
      window.removeEventListener('resize',()=>{})
    },
    beforeDestroy(){
      window.removeEventListener('resize',()=>{})
    }
  }
  </script>
  
  <style lang="scss" scoped>
  .myView {
    --displays:'none';
    width: 100%;
    height: 100%;
    display: flex;

    .myView_Middle {
      min-width: 5px;
      width: 5px;
      height: 100%;
      background: #dbdbdb;
      cursor: col-resize;
      pointer-events: auto;
    }
  
    .myView_Middle2 {
      height: 10px;
      width: 100%;
      background: #ABABAB;
      cursor: row-resize;
      pointer-events: auto;
    }
    .disabled{
        cursor: not-allowed;
        pointer-events: none;
    }
    &>:last-child{
        display: var(--displays) !important;
        // color: red !important;
    }
    &>*{
      overflow: auto;
    }
  }
 

  </style>