完善TagSelect组件

iczer

2018-08-05 0b80b9268e52f0001abee267dee05fe6c5e6cd4b

完善TagSelect组件

 README.md

@@ -2,4 +2,4 @@
**Ant Design Pro 的 Vue 实现（非官方）**
一个开箱即用的中后台前端/设计解决方案

[预览地址](https://iczer.gitee.io/vue-antd-pro/#/login)（开发中...）
[预览地址](https://iczer.gitee.io/vue-antd-pro)（开发中...）

 src/components/list/Search/SearchForm.vue

@@ -3,21 +3,22 @@
    <a-form>
      <a-form-item
        label="所属类目"
        :labelCol="{span: 1}"
        :wrapperCol="{span: 23}"
      >
        <tag-select>
          <tag-select-option>科目一</tag-select-option>
          <tag-select-option>科目一</tag-select-option>
          <tag-select-option>科目一</tag-select-option>
          <tag-select-option>科目一</tag-select-option>
          <tag-select-option>科目一</tag-select-option>
          <tag-select-option>科目一</tag-select-option>
          <tag-select-option>科目一</tag-select-option>
          <tag-select-option>科目一</tag-select-option>
          <tag-select-option>科目一</tag-select-option>
          <tag-select-option>科目一</tag-select-option>
          <tag-select-option>科目一</tag-select-option>
          <tag-select-option>类目一</tag-select-option>
          <tag-select-option>类目二</tag-select-option>
          <tag-select-option>类目三</tag-select-option>
          <tag-select-option>类目四</tag-select-option>
          <tag-select-option>类目五</tag-select-option>
          <tag-select-option>类目六</tag-select-option>
          <tag-select-option>类目七</tag-select-option>
          <tag-select-option>类目八</tag-select-option>
          <tag-select-option>类目九</tag-select-option>
          <tag-select-option>类目十</tag-select-option>
          <tag-select-option>类目十一</tag-select-option>
          <tag-select-option>类目十二</tag-select-option>
          <tag-select-option>类目十三</tag-select-option>
          <tag-select-option>类目十四</tag-select-option>
        </tag-select>
      </a-form-item>
    </a-form>

 src/components/list/Search/SearchLayout.vue

@@ -30,25 +30,17 @@
export default {
  name: 'SearchLayout',
  components: {ATabPane, ATabs, AInputSearch, AButton, AInputGroup, AInput},
  data () {
    return {
      activeKey: '1'
    }
  },
  watch: {
    '$route': function (val) {
      switch (val.path) {
  computed: {
    activeKey () {
      switch (this.$route.path) {
        case '/list/search/article':
          this.activeKey = '1'
          break
          return '1'
        case '/list/search/application':
          this.activeKey = '2'
          break
          return '2'
        case '/list/search/project':
          this.activeKey = '3'
          break
          return '3'
        default:
          this.activeKey = '2'
          return '1'
      }
    }
  },

 src/components/tool/TagSelect.vue

@@ -1,8 +1,8 @@
<template>
  <div class="tag-select">
    <tag-select-option>全部</tag-select-option>
    <tag-select-option @click="toggleCheck">全部</tag-select-option>
    <slot></slot>
    <a class="trigger">展开<a-icon type="down"/></a>
    <a @click="toggle" v-show="showTrigger" ref="trigger" class="trigger">展开<a-icon style="margin-left: 5px" :type="collapsed ? 'down' : 'up'"/></a>
  </div>
</template>

@@ -14,19 +14,69 @@
export default {
  name: 'TagSelect',
  Option: TagSelectOption,
  components: {AIcon, TagSelectOption, ACheckableTag, ASelect}
  components: {AIcon, TagSelectOption, ACheckableTag, ASelect},
  data () {
    return {
      showTrigger: false,
      collapsed: true,
      screenWidth: document.body.clientWidth,
      checkAll: false
    }
  },
  watch: {
    screenWidth: function () {
      this.showTrigger = this.needTrigger()
    },
    collapsed: function (val) {
      this.$el.style.maxHeight = val ? '39px' : '78px'
    }
  },
  mounted () {
    let _this = this
    // 此处延迟执行，是为解决mouted未完全完成情况下引发的trigger显示bug
    setTimeout(() => {
      _this.showTrigger = _this.needTrigger()
      _this.$refs.trigger.style.display = _this.showTrigger ? 'inline' : 'none'
    }, 1)
    window.onresize = () => {
      return (() => {
        window.screenWidth = document.body.clientWidth
        _this.screenWidth = window.screenWidth
      })()
    }
  },
  methods: {
    needTrigger () {
      return this.$el.clientHeight < this.$el.scrollHeight || this.$el.scrollHeight > 39
    },
    toggle () {
      this.collapsed = !this.collapsed
    },
    getAllTags () {
      const tagList = this.$children.filter((item) => {
        return item.isTagSelectOption
      })
      return tagList
    },
    toggleCheck () {
      this.checkAll = !this.checkAll
      const tagList = this.getAllTags()
      tagList.forEach((item) => {
        item.checked = this.checkAll
      })
    }
  }
}
</script>

<style lang="less" scoped>
  .tag-select{
    user-select: none;
    margin-left: -8px;
    position: relative;
    overflow: hidden;
    max-height: 32px;
    line-height: 32px;
    max-height: 39px;
    padding-right: 50px;
    display: inline-block;
  }
  .trigger{
    position: absolute;

 src/components/tool/TagSelectOption.vue

@@ -1,5 +1,5 @@
<template>
  <a-checkable-tag class="tag-default" v-model="checked">
  <a-checkable-tag @change="$emit('click')" class="tag-default" v-model="checked">
    <slot></slot>
  </a-checkable-tag>
</template>
@@ -9,7 +9,7 @@
export default {
  name: 'TagSelectOption',
  components: {ACheckableTag},
  options: {
  props: {
    size: {
      type: String,
      required: false,
@@ -18,7 +18,8 @@
  },
  data () {
    return {
      checked: false
      checked: false,
      isTagSelectOption: true
    }
  }
}