hd-idevvue3 3.0.3 → 3.0.4

package/src/hdcom/HdFooter.vue

@@ -1,149 +1,182 @@
 <template>
-  <ExFooter :height="nowHeight" ref="footer" style="display: flex; flex-direction: column;">
-    <div class="asideDrag" @mousedown="mousedown($event)" v-if="!noDrag" :class="{dragShowCls:dragShow}"
-         @mouseover="dragShow=true" @mouseout="dragShow=false"></div>
-    <div ref="moveline" class="moveline" v-show="dragFrom!=null"></div>
+  <ExFooter
+    :height="nowHeight"
+    ref="footer"
+    style="display: flex; flex-direction: column"
+  >
+    <div
+      class="asideDrag"
+      @mousedown="mousedown($event)"
+      v-if="!noDrag"
+      :class="{ dragShowCls: dragShow }"
+      @mouseover="dragShow = true"
+      @mouseout="dragShow = false"
+    ></div>
+    <div ref="moveline" class="moveline" v-show="dragFrom != null"></div>
     <div class="hdFooter">
       <template v-if="title">
         <div class="hd-title">
-          <div align="left" style="float:left">{{$t(title)}}</div>
+          <div align="left" style="float: left">{{ $t(title) }}</div>
           <slot name="title"></slot>
           <div align="right" v-if="arrowShow">
-            <i v-bind:class="[fa, arrowClass]" @click="isShrink?doShrink(false):doShrink(true)" style="cursor:pointer;">
+            <i
+              v-bind:class="[fa, arrowClass]"
+              @click="isShrink ? doShrink(false) : doShrink(true)"
+              style="cursor: pointer"
+            >
             </i>
           </div>
         </div>
       </template>
-      <div style="flex:1;height: 100%;position: relative;  ">
-        <div style="position: absolute; width: 100%;height: 100%;" v-show="!isShrink">
+      <div style="flex: 1; height: 100%; position: relative">
+        <div
+          style="position: absolute; width: 100%; height: 100%"
+          v-show="!isShrink"
+        >
           <slot></slot>
         </div>
       </div>
     </div>
-
   </ExFooter>
 </template>
 
 <script>
-
+/**
+ * 覆写ElFooter,增加拖动和title
+ * 插槽:<slot name="title"></slot> title进行额外扩展如增加按钮等
+ * @module HdFooter
+ */
+export default {
+  name: 'HdFooter',
+  component: {},
   /**
-   * 覆写ElFooter,增加拖动和title
-   * 插槽:<slot name="title"></slot> title进行额外扩展如增加按钮等
-   * @module HdFooter
+   * Props 继承ElFooter属性和事件,,如果仅需要elementui的ElFooter请使用ExFooter
+   * @prop {String} title 标题
+   * @prop {Boolen} arrowShow 是否显示一键收缩
+   * @prop {Boolen} noDrag 是否可拖动,默认否
    */
-  export default {
-    name: 'HdFooter',
-    component: {},
-    /**
-     * Props 继承ElFooter属性和事件,,如果仅需要elementui的ElFooter请使用ExFooter
-     * @prop {String} title 标题
-     * @prop {Boolen} arrowShow 是否显示一键收缩
-     * @prop {Boolen} noDrag 是否可拖动,默认否
-     */
-    props: {
-      height: String,
-      title: String,
-      arrowShow: {type: Boolean, default: true},
-      noDrag: {type: Boolean, default: false}
-    },
-    inheritAttrs: false,
-    data() {
-      return {
-        isShrink: false, // 收缩还是展开
-        dragFrom: null,
-        iconCls: 'el-icon-d-caret',
-        arrowClass: 'fa-chevron-down',
-        fa: 'fa',
-        inputHeight: 0,
-        nowHeight: '100px',
-        dragShow: false
-      }
-    },
-    mounted() {
-      if (this.height) {
-        this.nowHeight = this.height
-      }
-      this.inputHeight = this.nowHeight
-    },
-    methods: {
-      doShrink(isShrink) {
-        if (isShrink) {
-          if (this.title) {
-            this.nowHeight = "30px"
-          } else {
-            this.nowHeight = "15px"
-          }
-          this.arrowClass = 'fa-chevron-up'
+  props: {
+    height: String,
+    title: String,
+    arrowShow: { type: Boolean, default: true },
+    noDrag: { type: Boolean, default: false },
+  },
+  inheritAttrs: false,
+  data() {
+    return {
+      isShrink: false, // 收缩还是展开
+      dragFrom: null,
+      iconCls: 'el-icon-d-caret',
+      arrowClass: 'fa-chevron-down',
+      fa: 'fa',
+      inputHeight: 0,
+      nowHeight: '100px',
+      dragShow: false,
+    }
+  },
+  mounted() {
+    if (this.height) {
+      this.nowHeight = this.height
+    }
+    this.inputHeight = this.nowHeight
+  },
+  methods: {
+    doShrink(isShrink) {
+      if (isShrink) {
+        if (this.title) {
+          this.nowHeight = '30px'
         } else {
-          this.nowHeight = this.inputHeight
-          this.arrowClass = 'fa-chevron-down'
-        }
-        this.isShrink = isShrink
-      },
-      mousedown: function (event) {
-        this.$set(this.$store.state, 'hotKey', "-1") //避免热键样式影响体验
-        this.dragFrom = event.y
-        this.$refs.moveline.style.top = this.dragFrom + "px"
-        document.documentElement.addEventListener('mousemove', this.handleMove, true)
-        document.documentElement.addEventListener('mouseup', this.handleMouseup, true)
-      },
-      handleMove: function (event) {
-        this.$refs.moveline.style.top = event.y + "px"
-      },
-      handleMouseup: function (event) {
-        document.documentElement.removeEventListener('mousemove', this.handleMove, true)
-        document.documentElement.removeEventListener('mouseup', this.handleMouseup, true)
-        let newHeight = this.$refs.footer.$el.offsetHeight - event.y + this.dragFrom
-        this.nowHeight = newHeight + 'px';
-        this.dragFrom = null
-        this.$set(this.$store.state, 'hotKey', null) //避免热键样式影响体验
-        if (newHeight <= 70) { // 少于一定宽度自动收缩
-          this.doShrink(true)
-        }
-        if (newHeight >= 100) { // 少于一定宽度自动收缩
-          this.isShrink = false
+          this.nowHeight = '15px'
         }
+        this.arrowClass = 'fa-chevron-up'
+      } else {
+        this.nowHeight = this.inputHeight
+        this.arrowClass = 'fa-chevron-down'
       }
+      this.isShrink = isShrink
     },
-    watch: {
-      nowHeight(val) {
-
-        this.$emit('update:height', val);
-      },
-      width(val) {
-        this.nowHeight = val
+    mousedown: function (event) {
+      this.$set(this.$store.state, 'hotKey', '-1') //避免热键样式影响体验
+      this.dragFrom = event.y
+      this.$refs.moveline.style.top = this.dragFrom + 'px'
+      document.documentElement.addEventListener(
+        'mousemove',
+        this.handleMove,
+        true
+      )
+      document.documentElement.addEventListener(
+        'mouseup',
+        this.handleMouseup,
+        true
+      )
+    },
+    handleMove: function (event) {
+      this.$refs.moveline.style.top = event.y + 'px'
+    },
+    handleMouseup: function (event) {
+      document.documentElement.removeEventListener(
+        'mousemove',
+        this.handleMove,
+        true
+      )
+      document.documentElement.removeEventListener(
+        'mouseup',
+        this.handleMouseup,
+        true
+      )
+      let newHeight =
+        this.$refs.footer.$el.offsetHeight - event.y + this.dragFrom
+      this.nowHeight = newHeight + 'px'
+      this.dragFrom = null
+      this.$set(this.$store.state, 'hotKey', null) //避免热键样式影响体验
+      if (newHeight <= 70) {
+        // 少于一定宽度自动收缩
+        this.doShrink(true)
       }
-    }
-  }
-
+      if (newHeight >= 100) {
+        // 少于一定宽度自动收缩
+        this.isShrink = false
+      }
+    },
+  },
+  watch: {
+    nowHeight(val) {
+      this.$emit('update:height', val)
+    },
+    width(val) {
+      this.nowHeight = val
+    },
+  },
+}
 </script>
-<style rel="stylesheet/scss" lang="scss" scoped>
-  .hdFooter {
-    display: flex;
-    flex-direction: column;
-    flex: 1;
-  }
 
-  .asideDrag {
-    width: 100%;
-    height: 5px;
-    overflow: hidden;
-    cursor: ns-resize;
-    user-select: none;
-  }
+<style lang="scss" rel="stylesheet/scss" scoped>
+.hdFooter {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+}
+
+.asideDrag {
+  width: 100%;
+  height: 5px;
+  overflow: hidden;
+  cursor: ns-resize;
+  user-select: none;
+}
 
-  .moveline {
-    width: 100%;
-    height: 5px;
-    overflow: hidden;
-    position: fixed;
-    cursor: ns-resize;
-    background-color: red;
-    z-index: 9999;
-    user-select: none;
-  }
+.moveline {
+  width: 100%;
+  height: 5px;
+  overflow: hidden;
+  position: fixed;
+  cursor: ns-resize;
+  background-color: red;
+  z-index: 9999;
+  user-select: none;
+}
 
-  .dragShowCls {
-    background-color: #409EFF;
-  }
+.dragShowCls {
+  background-color: #409eff;
+}
 </style>