调整自动引入

components/AiCheckbox/AiCheckbox.vue

@@ -0,0 +1,97 @@
+<template>
+  <div class="AiCheckbox">
+    <div
+      class="AiCheckbox-item"
+      v-for="(item, index) in options"
+      @click="onChange(item.value)"
+      :class="[choosed.indexOf(item.value) > -1 ? 'active' : '']"
+      :key="index">
+      {{ item.label }}
+    </div>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'AiCheckbox',
+
+    model: {
+      event: 'input',
+      prop: 'value'
+    },
+
+    props: {
+      value: Array,
+      placeholder: {
+        default: '请选择'
+      },
+      list: {
+        default: () => []
+      },
+      dict: String,
+      disabled: Boolean
+    },
+
+    data () {
+      return {
+        dictKey: '',
+        choosed: []
+      }
+    },
+
+    computed: {
+      options () {
+        return this.dictKey ? this.$dict.getDict(this.dict).map(e => ({
+          value: e.dictValue,
+          label: e.dictName
+        })) : this.list
+      }
+    },
+
+    mounted () {
+      this.$dict.load(this.dict).then(() => {
+        this.dictKey = this.dict
+      })
+    },
+
+    methods: {
+      onChange (value) {
+        if (this.choosed.indexOf(value) > -1) {
+          this.choosed.splice(this.choosed.indexOf(value), 1)
+        } else {
+          this.choosed.push(value)
+        }
+
+        this.$emit('input', this.choosed)
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .AiCheckbox {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+
+    .AiCheckbox-item {
+      width: 100%;
+      line-height: 1.3;
+      padding: 20px 32px;
+      margin-bottom: 16px;
+      text-align: center;
+      background: #FFFFFF;
+      box-sizing: border-box;
+      border-radius: 16px;
+      color: #333333;
+      font-size: 28px;
+      border: 1px solid #CCCCCC;
+
+      &.active {
+        background: #4181FF;
+        color: #fff;
+        border-color: #4181FF;
+      }
+    }
+  }
+</style>