haiwei-ui 1.0.3 → 1.0.4

package/packages/components/select-whether/index.vue

@@ -5,38 +5,38 @@
   </el-select>
 </template>
 <script>
-export default {
-  name: 'SelectWhether',
-  data() {
-    return {
-      value_: this.value
-    }
-  },
-  props: {
-    value: [String, Number],
-    placeholder: {
-      type: String,
-      default: '请选择...'
+  export default {
+    name: 'SelectWhether',
+    data() {
+      return {
+        value_: this.value
+      }
     },
-    clearable: {
-      type: Boolean,
-      default: true
-    }
-  },
-  methods: {
-    onChange(val) {
-      this.$emit('input', val)
-      this.$emit('change', val)
+    props: {
+      value: [String, Number],
+      placeholder: {
+        type: String,
+        default: '请选择...'
+      },
+      clearable: {
+        type: Boolean,
+        default: true
+      }
     },
-    reset() {
-      this.value_ = ''
-      this.onChange('')
-    }
-  },
-  watch: {
-    value(val) {
-      this.value_ = val
+    methods: {
+      onChange(val) {
+        this.$emit('input', val)
+        this.$emit('change', val)
+      },
+      reset() {
+        this.value_ = ''
+        this.onChange('')
+      }
+    },
+    watch: {
+      value(val) {
+        this.value_ = val
+      }
     }
   }
-}
 </script>

package/packages/components/split/index.vue

@@ -30,149 +30,149 @@
 </template>
 
 <script>
-// 从iView迁移
-import { mapState } from 'vuex'
-import Trigger from './trigger.vue'
-export default {
-  name: 'Split',
-  components: {
-    Trigger
-  },
-  props: {
-    value: {
-      type: [Number, String],
-      default: 0.5
-    },
-    mode: {
-      validator(value) {
-        return value === 'horizontal' || value === 'vertical'
+  // 从iView迁移
+  import { mapState } from 'vuex'
+  import Trigger from './trigger.vue'
+  export default {
+    name: 'Split',
+    components: {
+      Trigger
+    },
+    props: {
+      value: {
+        type: [Number, String],
+        default: 0.5
       },
-      default: 'horizontal'
-    },
-    min: {
-      type: [Number, String],
-      default: '40px'
-    },
-    max: {
-      type: [Number, String],
-      default: '40px'
-    },
-    /** loading */
-    loading: Boolean
-  },
-  /**
-   * Events
-   * @on-move-start
-   * @on-moving 返回值：事件对象，但是在事件对象中加入了两个参数：atMin(当前是否在最小值处), atMax(当前是否在最大值处)
-   * @on-move-end
-   */
-  data() {
-    return {
-      prefix: 'nm-split',
-      offset: 0,
-      oldOffset: 0,
-      isMoving: false
-    }
-  },
-  computed: {
-    ...mapState('app/loading', { loadingText: 'text', loadingBackground: 'background', loadingSpinner: 'spinner' }),
-    wrapperClasses() {
-      return [`${this.prefix}-wrapper`, this.isMoving ? 'no-select' : '']
-    },
-    paneClasses() {
-      return [
-        `${this.prefix}-pane`,
-        {
-          [`${this.prefix}-pane-moving`]: this.isMoving
-        }
-      ]
-    },
-    isHorizontal() {
-      return this.mode === 'horizontal'
-    },
-    anotherOffset() {
-      return 100 - this.offset
-    },
-    valueIsPx() {
-      return typeof this.value === 'string'
-    },
-    offsetSize() {
-      return this.isHorizontal ? 'offsetWidth' : 'offsetHeight'
-    },
-    computedMin() {
-      return this.getComputedThresholdValue('min')
-    },
-    computedMax() {
-      return this.getComputedThresholdValue('max')
-    }
-  },
-  methods: {
-    px2percent(numerator, denominator) {
-      return parseFloat(numerator) / parseFloat(denominator)
-    },
-    getComputedThresholdValue(type) {
-      let size = this.$refs.outerWrapper[this.offsetSize]
-      if (this.valueIsPx) return typeof this[type] === 'string' ? this[type] : size * this[type]
-      else return typeof this[type] === 'string' ? this.px2percent(this[type], size) : this[type]
-    },
-    getMin(value1, value2) {
-      if (this.valueIsPx) return `${Math.min(parseFloat(value1), parseFloat(value2))}px`
-      else return Math.min(value1, value2)
-    },
-    getMax(value1, value2) {
-      if (this.valueIsPx) return `${Math.max(parseFloat(value1), parseFloat(value2))}px`
-      else return Math.max(value1, value2)
-    },
-    getAnotherOffset(value) {
-      let res = 0
-      if (this.valueIsPx) res = `${this.$refs.outerWrapper[this.offsetSize] - parseFloat(value)}px`
-      else res = 1 - value
-      return res
-    },
-    handleMove(e) {
-      let pageOffset = this.isHorizontal ? e.pageX : e.pageY
-      let offset = pageOffset - this.initOffset
-      let outerWidth = this.$refs.outerWrapper[this.offsetSize]
-      let value = this.valueIsPx ? `${parseFloat(this.oldOffset) + offset}px` : this.px2percent(outerWidth * this.oldOffset + offset, outerWidth)
-      let anotherValue = this.getAnotherOffset(value)
-      if (parseFloat(value) <= parseFloat(this.computedMin)) value = this.getMax(value, this.computedMin)
-      if (parseFloat(anotherValue) <= parseFloat(this.computedMax)) value = this.getAnotherOffset(this.getMax(anotherValue, this.computedMax))
-      e.atMin = this.value === this.computedMin
-      e.atMax = this.valueIsPx ? this.getAnotherOffset(this.value) === this.computedMax : this.getAnotherOffset(this.value).toFixed(5) === this.computedMax.toFixed(5)
-      this.$emit('input', value)
-      this.$emit('on-moving', e)
-    },
-    handleUp() {
-      this.isMoving = false
-      document.removeEventListener('mousemove', this.handleMove, false)
-      document.removeEventListener('mouseup', this.handleUp, false)
-      this.$emit('on-move-end')
-    },
-    handleMousedown(e) {
-      this.initOffset = this.isHorizontal ? e.pageX : e.pageY
-      this.oldOffset = this.value
-      this.isMoving = true
-      document.addEventListener('mousemove', this.handleMove, false)
-      document.addEventListener('mouseup', this.handleUp, false)
-      this.$emit('on-move-start')
+      mode: {
+        validator(value) {
+          return value === 'horizontal' || value === 'vertical'
+        },
+        default: 'horizontal'
+      },
+      min: {
+        type: [Number, String],
+        default: '40px'
+      },
+      max: {
+        type: [Number, String],
+        default: '40px'
+      },
+      /** loading */
+      loading: Boolean
+    },
+    /**
+     * Events
+     * @on-move-start
+     * @on-moving 返回值：事件对象，但是在事件对象中加入了两个参数：atMin(当前是否在最小值处), atMax(当前是否在最大值处)
+     * @on-move-end
+     */
+    data() {
+      return {
+        prefix: 'nm-split',
+        offset: 0,
+        oldOffset: 0,
+        isMoving: false
+      }
+    },
+    computed: {
+      ...mapState('app/loading', { loadingText: 'text', loadingBackground: 'background', loadingSpinner: 'spinner' }),
+      wrapperClasses() {
+        return [`${this.prefix}-wrapper`, this.isMoving ? 'no-select' : '']
+      },
+      paneClasses() {
+        return [
+          `${this.prefix}-pane`,
+          {
+            [`${this.prefix}-pane-moving`]: this.isMoving
+          }
+        ]
+      },
+      isHorizontal() {
+        return this.mode === 'horizontal'
+      },
+      anotherOffset() {
+        return 100 - this.offset
+      },
+      valueIsPx() {
+        return typeof this.value === 'string'
+      },
+      offsetSize() {
+        return this.isHorizontal ? 'offsetWidth' : 'offsetHeight'
+      },
+      computedMin() {
+        return this.getComputedThresholdValue('min')
+      },
+      computedMax() {
+        return this.getComputedThresholdValue('max')
+      }
     },
-    computeOffset() {
-      this.offset = ((this.valueIsPx ? this.px2percent(this.value, this.$refs.outerWrapper[this.offsetSize]) : this.value) * 10000) / 100
-    }
-  },
-  watch: {
-    value() {
-      this.computeOffset()
-    }
-  },
-  mounted() {
-    this.$nextTick(() => {
-      this.computeOffset()
-    })
+    methods: {
+      px2percent(numerator, denominator) {
+        return parseFloat(numerator) / parseFloat(denominator)
+      },
+      getComputedThresholdValue(type) {
+        let size = this.$refs.outerWrapper[this.offsetSize]
+        if (this.valueIsPx) return typeof this[type] === 'string' ? this[type] : size * this[type]
+        else return typeof this[type] === 'string' ? this.px2percent(this[type], size) : this[type]
+      },
+      getMin(value1, value2) {
+        if (this.valueIsPx) return `${Math.min(parseFloat(value1), parseFloat(value2))}px`
+        else return Math.min(value1, value2)
+      },
+      getMax(value1, value2) {
+        if (this.valueIsPx) return `${Math.max(parseFloat(value1), parseFloat(value2))}px`
+        else return Math.max(value1, value2)
+      },
+      getAnotherOffset(value) {
+        let res = 0
+        if (this.valueIsPx) res = `${this.$refs.outerWrapper[this.offsetSize] - parseFloat(value)}px`
+        else res = 1 - value
+        return res
+      },
+      handleMove(e) {
+        let pageOffset = this.isHorizontal ? e.pageX : e.pageY
+        let offset = pageOffset - this.initOffset
+        let outerWidth = this.$refs.outerWrapper[this.offsetSize]
+        let value = this.valueIsPx ? `${parseFloat(this.oldOffset) + offset}px` : this.px2percent(outerWidth * this.oldOffset + offset, outerWidth)
+        let anotherValue = this.getAnotherOffset(value)
+        if (parseFloat(value) <= parseFloat(this.computedMin)) value = this.getMax(value, this.computedMin)
+        if (parseFloat(anotherValue) <= parseFloat(this.computedMax)) value = this.getAnotherOffset(this.getMax(anotherValue, this.computedMax))
+        e.atMin = this.value === this.computedMin
+        e.atMax = this.valueIsPx ? this.getAnotherOffset(this.value) === this.computedMax : this.getAnotherOffset(this.value).toFixed(5) === this.computedMax.toFixed(5)
+        this.$emit('input', value)
+        this.$emit('on-moving', e)
+      },
+      handleUp() {
+        this.isMoving = false
+        document.removeEventListener('mousemove', this.handleMove, false)
+        document.removeEventListener('mouseup', this.handleUp, false)
+        this.$emit('on-move-end')
+      },
+      handleMousedown(e) {
+        this.initOffset = this.isHorizontal ? e.pageX : e.pageY
+        this.oldOffset = this.value
+        this.isMoving = true
+        document.addEventListener('mousemove', this.handleMove, false)
+        document.addEventListener('mouseup', this.handleUp, false)
+        this.$emit('on-move-start')
+      },
+      computeOffset() {
+        this.offset = ((this.valueIsPx ? this.px2percent(this.value, this.$refs.outerWrapper[this.offsetSize]) : this.value) * 10000) / 100
+      }
+    },
+    watch: {
+      value() {
+        this.computeOffset()
+      }
+    },
+    mounted() {
+      this.$nextTick(() => {
+        this.computeOffset()
+      })
 
-    window.addEventListener('resize', () => {
-      this.computeOffset()
-    })
+      window.addEventListener('resize', () => {
+        this.computeOffset()
+      })
+    }
   }
-}
 </script>

package/packages/components/split/trigger.vue

@@ -7,22 +7,22 @@
 </template>
 
 <script>
-export default {
-  props: {
-    mode: String
-  },
-  data() {
-    return {
-      initOffset: 0
-    }
-  },
-  computed: {
-    isVertical() {
-      return this.mode === 'vertical'
+  export default {
+    props: {
+      mode: String
+    },
+    data() {
+      return {
+        initOffset: 0
+      }
     },
-    classes() {
-      return ['nm-split-trigger', this.isVertical ? `nm-split-trigger-vertical` : `nm-split-trigger-horizontal`]
+    computed: {
+      isVertical() {
+        return this.mode === 'vertical'
+      },
+      classes() {
+        return ['nm-split-trigger', this.isVertical ? `nm-split-trigger-vertical` : `nm-split-trigger-horizontal`]
+      }
     }
   }
-}
 </script>

package/packages/components/tabnav/index.vue

@@ -4,10 +4,16 @@
     <div class="nm-tabnav-tabs">
       <el-tabs :value="current.path" type="card" :closable="true" @tab-click="onTabClick" @tab-remove="onTabRemove" @contextmenu.prevent.native="showContextMenu">
         <el-tab-pane v-if="config.showHome" :name="defaultPage">
-          <span slot="label"> <nm-icon v-if="config.showIcon" name="home" /> 首页</span>
+          <span slot="label">
+            <nm-icon v-if="config.showIcon" name="home" />
+            首页
+          </span>
         </el-tab-pane>
-        <el-tab-pane v-for="(item, i) in opened" :key="item.path" :name="item.path"
-          ><span slot="label" :index="i"> <nm-icon v-if="config.showIcon && item.icon" :name="item.icon" />{{ item.tabName }}</span>
+        <el-tab-pane v-for="(item, i) in opened" :key="item.path" :name="item.path">
+          <span slot="label" :index="i">
+            <nm-icon v-if="config.showIcon && item.icon" :name="item.icon" />
+            {{ item.tabName }}
+          </span>
         </el-tab-pane>
       </el-tabs>
     </div>
@@ -17,108 +23,138 @@
           <nm-icon name="angle-double-down" />
         </span>
         <el-dropdown-menu slot="dropdown">
-          <el-dropdown-item command="Left"> <nm-icon name="arrow-left" class="nm-tabnav-control-icon" />关闭左侧 </el-dropdown-item>
-          <el-dropdown-item command="Right"> <nm-icon name="arrow-right" class="nm-tabnav-control-icon" />关闭右侧 </el-dropdown-item>
-          <el-dropdown-item command="Other"> <nm-icon name="other" class="nm-tabnav-control-icon" />关闭其他 </el-dropdown-item>
-          <el-dropdown-item command="All"> <nm-icon name="app" class="nm-tabnav-control-icon" />全部关闭 </el-dropdown-item>
+          <el-dropdown-item command="Left">
+            <nm-icon name="arrow-left" class="nm-tabnav-control-icon" />
+            关闭左侧
+          </el-dropdown-item>
+          <el-dropdown-item command="Right">
+            <nm-icon name="arrow-right" class="nm-tabnav-control-icon" />
+            关闭右侧
+          </el-dropdown-item>
+          <el-dropdown-item command="Other">
+            <nm-icon name="other" class="nm-tabnav-control-icon" />
+            关闭其他
+          </el-dropdown-item>
+          <el-dropdown-item command="All">
+            <nm-icon name="app" class="nm-tabnav-control-icon" />
+            全部关闭
+          </el-dropdown-item>
         </el-dropdown-menu>
       </el-dropdown>
     </div>
     <div ref="contextmenu" class="nm-tabnav-contextmenu" v-show="contextmenu.visible" :style="{ top: contextmenu.top, left: contextmenu.left }">
       <ul>
-        <li @click.stop="onRefresh"><nm-icon name="refresh" />重新载入</li>
-        <li @click.stop="onClose('')"><nm-icon name="close" />关闭</li>
-        <li @click.stop="onClose('Left')"><nm-icon name="arrow-left" />关闭左侧</li>
-        <li @click.stop="onClose('Right')"><nm-icon name="arrow-right" />关闭右侧</li>
-        <li @click.stop="onClose('Other')"><nm-icon name="other" />关闭其它</li>
-        <li @click.stop="onClose('All')"><nm-icon name="app" />关闭全部</li>
+        <li @click.stop="onRefresh">
+          <nm-icon name="refresh" />
+          重新载入
+        </li>
+        <li @click.stop="onClose('')">
+          <nm-icon name="close" />
+          关闭
+        </li>
+        <li @click.stop="onClose('Left')">
+          <nm-icon name="arrow-left" />
+          关闭左侧
+        </li>
+        <li @click.stop="onClose('Right')">
+          <nm-icon name="arrow-right" />
+          关闭右侧
+        </li>
+        <li @click.stop="onClose('Other')">
+          <nm-icon name="other" />
+          关闭其它
+        </li>
+        <li @click.stop="onClose('All')">
+          <nm-icon name="app" />
+          关闭全部
+        </li>
       </ul>
     </div>
   </section>
 </template>
 <script>
-import { mapState, mapActions } from 'vuex'
-import { on, off, hasClass } from '../../utils/dom'
-export default {
-  name: 'Tabnav',
-  data() {
-    return {
-      contextmenu: {
-        visible: false,
-        top: 0,
-        left: 0
-      },
-      closeParams: { index: 0, router: this.$router }
-    }
-  },
-  computed: {
-    ...mapState('app/page', { opened: 'opened', current: 'current', defaultPage: 'default' }),
-    ...mapState('app/config', { config: s => s.component.tabnav })
-  },
-  inject: ['reload'],
-  methods: {
-    ...mapActions('app/page', ['close', 'closeLeft', 'closeRight', 'closeOther', 'closeAll']),
-    showContextMenu(event) {
-      const { path } = event
-      for (let i = 0; i < path.length; i++) {
-        if (hasClass(path[i], 'el-tabs__item')) {
-          const index = path[i].querySelector('span').getAttribute('index')
-          if (index) {
-            this.contextmenu = {
-              visible: true,
-              top: event.y + 'px',
-              left: event.x + 'px'
-            }
-            this.closeParams.index = parseInt(index)
-          }
-          break
-        }
+  import { mapState, mapActions } from 'vuex'
+  import { on, off, hasClass } from '../../utils/dom'
+  export default {
+    name: 'Tabnav',
+    data() {
+      return {
+        contextmenu: {
+          visible: false,
+          top: 0,
+          left: 0
+        },
+        closeParams: { index: 0, router: this.$router }
       }
     },
-    hideContextMenu(e) {
-      const { target } = e || window.event
-      if (this.$refs.contextmenu !== target) this.contextmenu.visible = false
-    },
-    /**
-     * @description 处理关闭标签下拉菜单命令
-     * @param {String} cmd 命令
-     * @param {String} tagName 选择的标签名称
-     */
-    handleCommand(cmd) {
-      this.closeParams.index = this.opened.findIndex(m => m.path === this.current.path)
-      this.onClose(cmd)
+    computed: {
+      ...mapState('app/page', { opened: 'opened', current: 'current', defaultPage: 'default' }),
+      ...mapState('app/config', { config: s => s.component.tabnav })
     },
-    onTabClick(tab) {
-      if (tab.name === this.defaultPage && this.current.path !== this.defaultPage) {
-        this.$router.push(this.defaultPage)
-        return
-      }
-      if (this.current.path === tab.name) return
-      const page = this.opened.find(page => page.path === tab.name)
-      if (page) {
-        const { name, params, query } = page
-        this.$router.push({ name, params, query })
+    inject: ['reload'],
+    methods: {
+      ...mapActions('app/page', ['close', 'closeLeft', 'closeRight', 'closeOther', 'closeAll']),
+      showContextMenu(event) {
+        const { path } = event
+        for (let i = 0; i < path.length; i++) {
+          if (hasClass(path[i], 'el-tabs__item')) {
+            const index = path[i].querySelector('span').getAttribute('index')
+            if (index) {
+              this.contextmenu = {
+                visible: true,
+                top: event.y + 'px',
+                left: event.x + 'px'
+              }
+              this.closeParams.index = parseInt(index)
+            }
+            break
+          }
+        }
+      },
+      hideContextMenu(e) {
+        const { target } = e || window.event
+        if (this.$refs.contextmenu !== target) this.contextmenu.visible = false
+      },
+      /**
+       * @description 处理关闭标签下拉菜单命令
+       * @param {String} cmd 命令
+       * @param {String} tagName 选择的标签名称
+       */
+      handleCommand(cmd) {
+        this.closeParams.index = this.opened.findIndex(m => m.path === this.current.path)
+        this.onClose(cmd)
+      },
+      onTabClick(tab) {
+        if (tab.name === this.defaultPage && this.current.path !== this.defaultPage) {
+          this.$router.push(this.defaultPage)
+          return
+        }
+        if (this.current.path === tab.name) return
+        const page = this.opened.find(page => page.path === tab.name)
+        if (page) {
+          const { name, params, query } = page
+          this.$router.push({ name, params, query })
+        }
+      },
+      onTabRemove(path) {
+        this.closeParams.index = this.opened.findIndex(m => m.path === path)
+        this.onClose()
+      },
+      onClose(type) {
+        this[`close${type || ''}`](this.closeParams)
+      },
+      onRefresh() {
+        this.reload(this.current.name)
       }
     },
-    onTabRemove(path) {
-      this.closeParams.index = this.opened.findIndex(m => m.path === path)
-      this.onClose()
-    },
-    onClose(type) {
-      this[`close${type || ''}`](this.closeParams)
-    },
-    onRefresh() {
-      this.reload(this.current.name)
-    }
-  },
-  watch: {
-    'contextmenu.visible'(val) {
-      if (val) {
-        on(document, 'mouseup', this.hideContextMenu)
-      } else {
-        off(document, 'mouseup', this.hideContextMenu)
+    watch: {
+      'contextmenu.visible'(val) {
+        if (val) {
+          on(document, 'mouseup', this.hideContextMenu)
+        } else {
+          off(document, 'mouseup', this.hideContextMenu)
+        }
       }
     }
   }
-}
 </script>