feat: TagSelect (not work)

src/components/TagSelect/TagSelectOption.jsx

@@ -8,13 +8,9 @@ export default {
       type: String,
       default: 'ant-pro-tag-select-option'
     },
-    defaultValue: {
-      type: [String, Number, Object],
-      required: true
-    },
     value: {
       type: [String, Number, Object],
-      required: true
+      default: ''
     },
     checked: {
       type: Boolean,
@@ -23,23 +19,20 @@ export default {
   },
   data () {
     return {
-      val: this.value || this.defaultValue || null,
       localChecked: this.checked || false
     }
   },
-  methods () {
-
+  watch: {
+    '$parent.checkAll' (val) {
+      this.localChecked = val
+    }
   },
   render () {
-    const { $slots, $props, val } = this
-    const props = {
-      ...$props
-    }
+    const { $slots, value } = this
     const onChange = (checked) => {
-      this.localChecked = checked
-      this.$emit('change', { val, checked })
+      this.$emit('change', { value, checked })
     }
-    return (<CheckableTag {...{ props }} onChange={onChange}>
+    return (<CheckableTag key={value} vModel={this.localChecked} onChange={onChange}>
       {$slots.default}
     </CheckableTag>)
   }

src/components/TagSelect/index.jsx

 import PropTypes from 'ant-design-vue/es/_util/vue-types'
-import TagSelectOption from './TagSelectOption.jsx'
+import Option from './TagSelectOption.jsx'
 import { filterEmpty } from '@/components/_util/util'
 
 export default {
+  Option,
   name: 'TagSelect',
+  model: {
+    prop: 'checked',
+    event: 'change'
+  },
   props: {
     prefixCls: {
       type: String,
       default: 'ant-pro-tag-select'
     },
     defaultValue: {
-      type: PropTypes.object,
-      default: () => []
-    ,
+      type: PropTypes.array,
+      default: null
+    },
     value: {
-      type: PropTypes.object,
-      default: () => []
-    ,
+      type: PropTypes.array,
+      default: null
+    },
     expandable: {
       type: Boolean,
       default: false
@@ -29,40 +34,77 @@ export default {
   data () {
     return {
       expand: false,
+      checkAll: false,
+      localCheckAll: false,
+      items: [],
       val: this.value || this.defaultValue || []
     }
   },
   methods: {
-    onChange () {
-
+    onChange (checked) {
+      const key = Object.keys(this.items).filter(key => key === checked.value)
+      this.items[key] = checked.checked
+      // console.log(this.items)
+      const bool = Object.values(this.items).lastIndexOf(false)
+      console.log('bool', bool, 'this.checkAll', this.checkAll)
+      if (bool === -1) {
+        !this.checkAll && (this.checkAll = true)
+      } else {
+        this.checkAll && (this.checkAll = false)
+        this.localCheckAll = false
+      }
+    },
+    onCheckAll (checked) {
+      this.checkAll = checked.checked
+      // Object.keys(this.items)
+      // this.items[k] = checked.checked
+      Object.values(this.items).forEach(v => {
+        v = checked.checked
+      })
+    },
+    getItemsKey (items) {
+      const totalItem = {}
+      items.forEach(item => {
+        totalItem[item.componentOptions.propsData && item.componentOptions.propsData.value] = false
+      })
+      return totalItem
+    },
+    // CheckAll Button
+    renderCheckAll () {
+      return !this.hideCheckAll && (<Option key={'total'} checked={this.localCheckAll} onChange={this.onCheckAll}>All</Option>) || null
     },
+    // expandable
+    renderExpandable () {
 
-    // render option
-    renderTag ({ value, checked }) {
-      const props = {
-        checked: checked,
-        value: value
-      }
-      return (
-        <TagSelectOption {...{ props }} />
-      )
     },
+    // render option
     renderTags (items) {
-      return items.map(item => this.renderTag(item))
+      const listeners = {
+        change: (checked) => {
+          this.onChange(checked)
+          this.$emit('change', checked)
+        }
+      }
+
+      return items.map(vnode => {
+        const options = vnode.componentOptions
+        options.listeners = listeners
+        return vnode
+      })
     }
-  }
   },
   render () {
-    const { $props: { prefixCls }, renderTags } = this
+    const { $props: { prefixCls } } = this
     const classString = {
       [`${prefixCls}`]: true
     }
     const tagItems = filterEmpty(this.$slots.default)
-    const tagItemDom = (tagItems && tagItems.length > 0) && renderTags(tagItems) || null
-
+    this.items = this.getItemsKey(tagItems)
+    console.log(this.items)
     return (
       <div class={classString}>
-        {tagItemDom}
+        {this.renderCheckAll()}
+        {this.renderTags(tagItems)}
       </div>
     )
   }

src/views/Home.vue

@@ -99,13 +99,28 @@
     <h2># NumberInfo 组件 </h2>
 
     <a-divider> NumberInfo </a-divider>
-    <a-card>
+    <a-card style="margin-bottom: 3rem">
       <number-info
         :sub-title="() => { return 'Visits this week' }"
         :total="12321"
         status="up"
         :sub-total="17.1"></number-info>
     </a-card>
+
+    <h2># TagSelect 组件 </h2>
+
+    <a-divider> TagSelect </a-divider>
+    <a-card style="margin-bottom: 3rem">
+      <tag-select>
+        <tag-select-option value="cat1">类目1</tag-select-option>
+        <tag-select-option value="cat2">类目2</tag-select-option>
+        <tag-select-option value="cat3">类目3</tag-select-option>
+        <tag-select-option value="cat4">类目4</tag-select-option>
+        <tag-select-option value="cat5">类目5</tag-select-option>
+        <tag-select-option value="cat6">类目6</tag-select-option>
+        <tag-select-option value="cat7">类目7</tag-select-option>
+      </tag-select>
+    </a-card>
   </div>
 </template>
 
@@ -117,8 +132,10 @@ import AvatarList from '@/components/AvatarList'
 import CountDown from '@/components/CountDown/CountDown'
 import Ellipsis from '@/components/Ellipsis'
 import NumberInfo from '@/components/NumberInfo'
+import TagSelect from '@/components/TagSelect'
 
 const AvatarListItem = AvatarList.AvatarItem
+const TagSelectOption = TagSelect.Option
 
 export default {
   name: 'Home',
@@ -128,7 +145,9 @@ export default {
     CountDown,
     Trend,
     AvatarList,
-    AvatarListItem
+    AvatarListItem,
+    TagSelect,
+    TagSelectOption
   },
   data () {
     return {