完善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 @@ const ATabPane = ATabs.TabPane
 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 @@ import AIcon from 'vue-antd-ui/es/icon/icon'
 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 @@ import ACheckableTag from 'vue-antd-ui/es/tag/CheckableTag'
 export default {
   name: 'TagSelectOption',
   components: {ACheckableTag},
-  options: {
+  props: {
     size: {
       type: String,
       required: false,
@@ -18,7 +18,8 @@ export default {
   },
   data () {
     return {
-      checked: false
+      checked: false,
+      isTagSelectOption: true
     }
   }
 }