修改双视图组件

src/utils/model/myView/index.vue

@@ -1,233 +1,213 @@
 <template>
-  <!-- 双视图 -->
-  <div class="myView" v-listenDom="getShow" :style="{ 'flex-direction': direction }" ref="myView">
-    <slot name="left" class="myView_Left"></slot>
-    <div :class="className" data-type="mouse" @mousedown="mousedown" v-show="show"></div>
-    <slot name="right" class="myView_Right"></slot>
-  </div>
+    <!-- 双视图 -->
+    <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'
-    }
-  },
-  data() {
-    return {
-      show: true,
-      direction: null,
-      className: 'myView_Middle',
-    }
-  },
-  // 自定义指令
-  directives: {
-    listenDom: {
-      // 只调用一次
-      bind: function (el, binding, vnode) {
-        vnode.context.EventListener(el)
-        if (el.childNodes.length < 3) {
-          binding.value(false, el)
-        } else if (el.childNodes.length == 3) {
-          if (el.childNodes[2].style.display == 'none' || el.childNodes[0].style.display == 'none') {
-            binding.value(false, el)
-          } else {
-            binding.value(true, el)
-          }
-        }
+  
+  <script>
+  export default {
+    props: {
+      position: {
+        default: 'row'
       },
-      // 插入中
-      inserted: function (el, binding) {
-        if (el.childNodes[2].style.display == 'none' || el.childNodes[0].style.display == 'none') {
-          binding.value(false, el)
-        } else {
-          binding.value(true, el)
-        }
+      showView:{
+        default:true
       },
-      // 更新前
-      update: function (el, binding) {
+      disabled:{
+        default:false
+      }
+    },
+    data() {
+      return {
+        direction: null,
+        className: 'myView_Middle',
+      }
+    },
+    watch: {
+      position() {
+        this.directionRule()
       },
-      // 更新后
-      componentUpdated: function (el, binding) {
-        if (el.childNodes.length < 3) {
-          binding.value(false, el)
-        } else if (el.childNodes.length == 3) {
-          if (el.childNodes[2].style.display == 'none' || el.childNodes[0].style.display == 'none') {
-            binding.value(false, el)
-          } else {
-            binding.value(true, el)
-          }
-        }
+      showView(){
+        this.getShow()
+      },
+      disabled(){
+        this.getMouse()
       }
-    }
-  },
-  watch: {
-    position() {
+    },
+    mounted() {
       this.directionRule()
-    }
-  },
-  mounted() {
-    this.directionRule()
-
-  },
-  methods: {
-    // 窗口缩放，内容等比例缩放
-    EventListener(dom) {
-      window.addEventListener('resize', (e) => {
-        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 = '10px'
-            } 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 - 10)) * 100 + '%'
+      this.getShow()
+      this.getMouse()
+      window.addEventListener('resize',this.EventListener)
+    },
+    methods: {
+      // 窗口缩放，内容等比例缩放
+      EventListener() {
+        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 {
-              dom.childNodes[i].style.height = (dom.childNodes[i].clientHeight / (dom.clientHeight - 10)) * 100 + '%'
+              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 + '%'
+              }
+  
             }
-
           }
+      },
+      getShow(){
+        var dom = this.$refs.myView
+        var display = this.showView?'block':'none'
+        if(!this.showView){
+            dom.childNodes[0].style.width = '100%'
         }
-      })
-    },
-    // 排列方向
-    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'
-      }
-    },
+        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'
+        }
+      },
 
-    //获取show的值
-    getShow(val, dom) {
-      this.$set(this, 'show', val)
-      if (!val) {
-        var 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 = '10px'
-            } else {
-              dom.childNodes[i].style.width = '100%'
+      // 鼠标按下
+      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;
+        // 鼠标拖动
+        document.onmousemove = (e) => {
+          if (this.direction == 'row' || this.direction == 'row-reverse') {
+            var endX = e.clientX;
+            // （endx-startx）=移动的距离。
+            // now.left + 移动的距离 - 整个盒子距离左侧的距离 = 左边区域最后的宽度
+            var moveLen = now.left + (endX - startX) - box.offsetLeft;
+            // 容器宽度 - 左边区域的宽度 = 右边区域的宽度
+            var maxT = box.clientWidth - now.offsetWidth;
+            // 左边区域的最小宽度为150px
+            if (moveLen < 150) moveLen = 150;
+            //右边区域最小宽度为150px
+            if (moveLen > maxT - 150) moveLen = maxT - 150;
+            // 设置目标元素距离左侧区域的距离
+            now.style.left = moveLen;
+            // 左侧（上一个）的兄弟元素
+            prev.style.width = moveLen + 'px';
+            // prev.style.width = moveLen / box.clientWidth * 100 + '%';
+            now.style.width = '5px'
+            if (next) {
+              next.style.width = box.clientWidth - moveLen - 5 + 'px';
+              // next.style.width = (box.clientWidth - moveLen - 5)/ box.clientWidth * 100 + '%';
             }
           } else {
-            if (this.direction == 'row' || this.direction == 'row-reverse') {
-              dom.childNodes[i].style.width = '100%'
-            } else {
-              dom.childNodes[i].style.height = '100%'
+            var endY = e.clientY;
+            // （endx-startx）=移动的距离。 
+            // now.Top + 移动的距离 - 整个盒子距离上边的距离= 上边区域最后的宽度
+            var moveLen = now.Top + (endY - startY) - box.offsetTop;
+            // 容器宽度 - 上边区域的宽度 = 下边区域的宽度
+            var maxT = box.clientHeight - now.offsetHeight;
+            // 上边区域的最小宽度为150px
+            if (moveLen < 150) moveLen = 150;
+            //下边区域最小宽度为150px
+            if (moveLen > maxT - 150) moveLen = maxT - 150;
+            // 设置目标元素距离顶部的距离
+            now.style.left = moveLen;
+            // 左侧（上一个）的兄弟元素
+            prev.style.height = moveLen + 'px';
+            now.style.height = '5px'
+            if (next) {
+              next.style.height = (box.clientHeight - moveLen) + 'px';
             }
-
           }
-
         }
-      }
-    },
-    // 鼠标按下
-    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;
-      // 鼠标拖动
-      document.onmousemove = (e) => {
-        if (this.direction == 'row' || this.direction == 'row-reverse') {
-          var endX = e.clientX;
-          // （endx-startx）=移动的距离。
-          // now.left + 移动的距离 - 整个盒子距离左侧的距离 = 左边区域最后的宽度
-          var moveLen = now.left + (endX - startX) - box.offsetLeft;
-          // 容器宽度 - 左边区域的宽度 = 右边区域的宽度
-          var maxT = box.clientWidth - now.offsetWidth;
-          // 左边区域的最小宽度为150px
-          if (moveLen < 150) moveLen = 150;
-          //右边区域最小宽度为150px
-          if (moveLen > maxT - 150) moveLen = maxT - 150;
-          // 设置目标元素距离左侧区域的距离
-          now.style.left = moveLen;
-          // 左侧（上一个）的兄弟元素
-          prev.style.width = moveLen + 'px';
-          // prev.style.width = moveLen / box.clientWidth * 100 + '%';
-          now.style.width = '10px'
-          if (next) {
-            next.style.width = box.clientWidth - moveLen - 10 + 'px';
-            // next.style.width = (box.clientWidth - moveLen - 10)/ box.clientWidth * 100 + '%';
-          }
-        } else {
-          var endY = e.clientY;
-          // （endx-startx）=移动的距离。 
-          // now.Top + 移动的距离 - 整个盒子距离上边的距离= 上边区域最后的宽度
-          var moveLen = now.Top + (endY - startY) - box.offsetTop;
-          // 容器宽度 - 上边区域的宽度 = 下边区域的宽度
-          var maxT = box.clientHeight - now.offsetHeight;
-          // 上边区域的最小宽度为150px
-          if (moveLen < 150) moveLen = 150;
-          //下边区域最小宽度为150px
-          if (moveLen > maxT - 150) moveLen = maxT - 150;
-          // 设置目标元素距离顶部的距离
-          now.style.left = moveLen;
-          // 左侧（上一个）的兄弟元素
-          prev.style.height = moveLen + 'px';
-          now.style.height = '10px'
-          if (next) {
-            next.style.height = (box.clientHeight - moveLen) + 'px';
-          }
+        // 鼠标抬起清空按下及拖动事件
+        document.onmouseup = (e) => {
+          document.onmouseup = null;
+          document.onmousemove = null;
         }
-      }
-      // 鼠标抬起清空按下及拖动事件
-      document.onmouseup = (e) => {
-        document.onmouseup = null;
-        document.onmousemove = null;
-      }
+      },
     },
-  },
-  deactivated(){
-    window.removeEventListener('resize',()=>{})
+    deactivated(){
+      window.removeEventListener('resize',()=>{})
+    }
   }
-}
-</script>
-
-<style lang="scss" scoped>
-.myView {
-  width: 100%;
-  height: 100%;
-  display: flex;
-
-  .myView_Middle {
-    min-width: 10px;
-    width: 10px;
+  </script>
+  
+  <style lang="scss" scoped>
+  .myView {
+    --displays:'none';
+    width: 100%;
     height: 100%;
-    background: #dbdbdb;
-    cursor: col-resize;
-  }
+    display: flex;
 
-  .myView_Middle2 {
-    height: 20px;
-    width: 100%;
-    background: #ABABAB;
-    cursor: row-resize;
+    .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;
+    }
   }
-}
-</style>
+ 
+
+  </style>

src/utils/model/myView/index1.vue

@@ -0,0 +1,233 @@
+<template>
+  <!-- 双视图 -->
+  <div class="myView" v-listenDom="getShow" :style="{ 'flex-direction': direction }" ref="myView">
+    <slot name="left" class="myView_Left"></slot>
+    <div :class="className" data-type="mouse" @mousedown="mousedown" v-show="show"></div>
+    <slot name="right" class="myView_Right"></slot>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    position: {
+      default: 'row'
+    }
+  },
+  data() {
+    return {
+      show: true,
+      direction: null,
+      className: 'myView_Middle',
+    }
+  },
+  // 自定义指令
+  directives: {
+    listenDom: {
+      // 只调用一次
+      bind: function (el, binding, vnode) {
+        vnode.context.EventListener(el)
+        if (el.childNodes.length < 3) {
+          binding.value(false, el)
+        } else if (el.childNodes.length == 3) {
+          if (el.childNodes[2].style.display == 'none' || el.childNodes[0].style.display == 'none') {
+            binding.value(false, el)
+          } else {
+            binding.value(true, el)
+          }
+        }
+      },
+      // 插入中
+      inserted: function (el, binding) {
+        if (el.childNodes[2].style.display == 'none' || el.childNodes[0].style.display == 'none') {
+          binding.value(false, el)
+        } else {
+          binding.value(true, el)
+        }
+      },
+      // 更新前
+      update: function (el, binding) {
+      },
+      // 更新后
+      componentUpdated: function (el, binding) {
+        if (el.childNodes.length < 3) {
+          binding.value(false, el)
+        } else if (el.childNodes.length == 3) {
+          if (el.childNodes[2].style.display == 'none' || el.childNodes[0].style.display == 'none') {
+            binding.value(false, el)
+          } else {
+            binding.value(true, el)
+          }
+        }
+      }
+    }
+  },
+  watch: {
+    position() {
+      this.directionRule()
+    }
+  },
+  mounted() {
+    this.directionRule()
+
+  },
+  methods: {
+    // 窗口缩放，内容等比例缩放
+    EventListener(dom) {
+      window.addEventListener('resize', (e) => {
+        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 = '10px'
+            } 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 - 10)) * 100 + '%'
+            } else {
+              dom.childNodes[i].style.height = (dom.childNodes[i].clientHeight / (dom.clientHeight - 10)) * 100 + '%'
+            }
+
+          }
+        }
+      })
+    },
+    // 排列方向
+    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'
+      }
+    },
+
+    //获取show的值
+    getShow(val, dom) {
+      this.$set(this, 'show', val)
+      if (!val) {
+        var 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 = '10px'
+            } else {
+              dom.childNodes[i].style.width = '100%'
+            }
+          } else {
+            if (this.direction == 'row' || this.direction == 'row-reverse') {
+              dom.childNodes[i].style.width = '100%'
+            } else {
+              dom.childNodes[i].style.height = '100%'
+            }
+
+          }
+
+        }
+      }
+    },
+    // 鼠标按下
+    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;
+      // 鼠标拖动
+      document.onmousemove = (e) => {
+        if (this.direction == 'row' || this.direction == 'row-reverse') {
+          var endX = e.clientX;
+          // （endx-startx）=移动的距离。
+          // now.left + 移动的距离 - 整个盒子距离左侧的距离 = 左边区域最后的宽度
+          var moveLen = now.left + (endX - startX) - box.offsetLeft;
+          // 容器宽度 - 左边区域的宽度 = 右边区域的宽度
+          var maxT = box.clientWidth - now.offsetWidth;
+          // 左边区域的最小宽度为150px
+          if (moveLen < 150) moveLen = 150;
+          //右边区域最小宽度为150px
+          if (moveLen > maxT - 150) moveLen = maxT - 150;
+          // 设置目标元素距离左侧区域的距离
+          now.style.left = moveLen;
+          // 左侧（上一个）的兄弟元素
+          prev.style.width = moveLen + 'px';
+          // prev.style.width = moveLen / box.clientWidth * 100 + '%';
+          now.style.width = '10px'
+          if (next) {
+            next.style.width = box.clientWidth - moveLen - 10 + 'px';
+            // next.style.width = (box.clientWidth - moveLen - 10)/ box.clientWidth * 100 + '%';
+          }
+        } else {
+          var endY = e.clientY;
+          // （endx-startx）=移动的距离。 
+          // now.Top + 移动的距离 - 整个盒子距离上边的距离= 上边区域最后的宽度
+          var moveLen = now.Top + (endY - startY) - box.offsetTop;
+          // 容器宽度 - 上边区域的宽度 = 下边区域的宽度
+          var maxT = box.clientHeight - now.offsetHeight;
+          // 上边区域的最小宽度为150px
+          if (moveLen < 150) moveLen = 150;
+          //下边区域最小宽度为150px
+          if (moveLen > maxT - 150) moveLen = maxT - 150;
+          // 设置目标元素距离顶部的距离
+          now.style.left = moveLen;
+          // 左侧（上一个）的兄弟元素
+          prev.style.height = moveLen + 'px';
+          now.style.height = '10px'
+          if (next) {
+            next.style.height = (box.clientHeight - moveLen) + 'px';
+          }
+        }
+      }
+      // 鼠标抬起清空按下及拖动事件
+      document.onmouseup = (e) => {
+        document.onmouseup = null;
+        document.onmousemove = null;
+      }
+    },
+  },
+  deactivated(){
+    window.removeEventListener('resize',()=>{})
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.myView {
+  width: 100%;
+  height: 100%;
+  display: flex;
+
+  .myView_Middle {
+    min-width: 10px;
+    width: 10px;
+    height: 100%;
+    background: #dbdbdb;
+    cursor: col-resize;
+  }
+
+  .myView_Middle2 {
+    height: 20px;
+    width: 100%;
+    background: #ABABAB;
+    cursor: row-resize;
+  }
+}
+</style>

src/utils/model/route.vue

@@ -1,17 +1,27 @@
 <template>
-    <div class="tishi">
-      <div class="longen">
-          可以点击新手指引再次打开提示框
+  <div>
+      <el-button @click="show = !show">切换</el-button>
+
+    <myView2 :showView="show">
+      <div slot="left">
+        111
       </div>
-    </div>
+      <div slot="right">222</div>
+    </myView2>
+  </div>
 </template>
 
 <script>
+import myView2 from './myView/index.vue'
 export default {
-  components: {},
+  components: {
+    myView2
+  },
   props: {},
   data() {
-    return {};
+    return {
+      show:true
+    };
   },
   watch: {},
   computed: {},
@@ -21,39 +31,9 @@ export default {
 };
 </script>
 <style lang="scss" scoped>
-.tishi{
-  position: fixed;
-  top: 100px;
-  left:100px;
-  width: 150px;
-  height: 60px;
-  .longen {
+div{
+  border: 1px solid black;
   width: 100%;
-  // height: 100%;
-  padding:10px;
-  border: 1px solid rgb(116, 123, 128);
-  position: relative;
-  background-color: #fff;
-}
-
-.longen:before,
-.longen:after {
-  content: "";
-    display: block;
-    border-width: 10px;
-    position: absolute;
-    top: calc(50% - 8px);
-    right: -21px;
-    border-style: dashed dashed solid;
-    border-color: transparent transparent transparent rgb(116, 123, 128);
-    font-size: 0;
-    line-height: 0;
+  height: 100%;
 }
-
-.longen:after {
-  right: -20px;
-  border-color: transparent transparent transparent #fff;
-}
-}
-
 </style>

src/views/project/patentDetails/index.vue

@@ -0,0 +1,28 @@
+<template>
+  <div class="height_100">
+    <el-container>
+        <el-aside></el-aside>
+        <el-main>
+            
+        </el-main>
+    </el-container>
+  </div>
+</template>
+
+<script>
+export default {
+  components: {},
+  props: {},
+  data() {
+    return {
+    };
+  },
+  watch: {},
+  computed: {},
+  created() {},
+  mounted() {},
+  methods: {},
+};
+</script>
+<style lang="scss" scoped>
+</style>