feat: TagSelect

src/components/TagSelect/TagSelectOption.jsx

@@ -0,0 +1,46 @@
+import { Tag } from 'ant-design-vue'
+const { CheckableTag } = Tag
+
+export default {
+  name: 'TagSelectOption',
+  props: {
+    prefixCls: {
+      type: String,
+      default: 'ant-pro-tag-select-option'
+    },
+    defaultValue: {
+      type: [String, Number, Object],
+      required: true
+    },
+    value: {
+      type: [String, Number, Object],
+      required: true
+    },
+    checked: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data () {
+    return {
+      val: this.value || this.defaultValue || null,
+      localChecked: this.checked || false
+    }
+  },
+  methods () {
+
+  },
+  render () {
+    const { $slots, $props, val } = this
+    const props = {
+      ...$props
+    }
+    const onChange = (checked) => {
+      this.localChecked = checked
+      this.$emit('change', { val, checked })
+    }
+    return (<CheckableTag {...{ props }} onChange={onChange}>
+      {$slots.default}
+    </CheckableTag>)
+  }
+}

src/components/TagSelect/index.jsx

@@ -1,12 +1,22 @@
 import PropTypes from 'ant-design-vue/es/_util/vue-types'
-// TODO
+import TagSelectOption from './TagSelectOption.jsx'
+import { filterEmpty } from '@/components/_util/util'
+
 export default {
   name: 'TagSelect',
   props: {
-    defaultValue: {
-      type: [PropTypes.arrayOf(String), PropTypes.arrayOf(Number)],
-      default: () => {}
+    prefixCls: {
+      type: String,
+      default: 'ant-pro-tag-select'
     },
+    defaultValue: {
+      type: PropTypes.object,
+      default: () => []
+    ,
+    value: {
+      type: PropTypes.object,
+      default: () => []
+    ,
     expandable: {
       type: Boolean,
       default: false
@@ -15,5 +25,45 @@ export default {
       type: Boolean,
       default: false
     }
+  },
+  data () {
+    return {
+      expand: false,
+      val: this.value || this.defaultValue || []
+    }
+  },
+  methods: {
+    onChange () {
+
+    },
+
+    // render option
+    renderTag ({ value, checked }) {
+      const props = {
+        checked: checked,
+        value: value
+      }
+      return (
+        <TagSelectOption {...{ props }} />
+      )
+    },
+    renderTags (items) {
+      return items.map(item => this.renderTag(item))
+    }
+  }
+  },
+  render () {
+    const { $props: { prefixCls }, renderTags } = this
+    const classString = {
+      [`${prefixCls}`]: true
+    }
+    const tagItems = filterEmpty(this.$slots.default)
+    const tagItemDom = (tagItems && tagItems.length > 0) && renderTags(tagItems) || null
+
+    return (
+      <div class={classString}>
+        {tagItemDom}
+      </div>
+    )
   }
 }