tag组件

<!--多选按钮组-->
<template>
  <div>
    <div v-for="option in options" :key="option.value" class='check_style'>
      <van-button
        :size="size"
        :disabled="disabledType ? disabled : option.disabled"
        :type="selectedOptions.includes(option.value) ? 'info' : 'default'"
        @click.prevent="selectOption(option.value)"
      >
        {
  { option.text }}
      </van-button>
    </div>
  </div>
</template>

<script>
export default {
  /**
   *** 作者: Lenovo-【Lindon】
   *** 文件名称: CheckBtn
   *** 文件创建日期: 2023/5/3 9:49
   ***
   */

  name: 'CheckBtn',
  props: {
    options: {
      type: Array,
      default: () => []
    },
    defaultValue: {
      type: Array,
      default: () => []
    },
    disabled: {
      type: Boolean,
      default: false
    },
    value: {
      type: Array,
      default: () => []
    },
    disabledType: {
      type: Boolean,
      default: true,
    },
    size: {
        type: String,
        default: 'small',
    }

  },
  model: {
    prop: 'value', // props接受的变量名称
    event: 'change', //定义一个方法
  },
  data() {
    return {
      selectedOptions: []
    }
  },
  mounted() {
      debugger
    // 设置初始选中的选项
    if (this.defaultValue.length > 0) {
      debugger
      this.selectedOptions = this.defaultValue
    }
  },
  methods: {
    selectOption(value) {
    debugger
      // 切换选中状态
      const index = this.selectedOptions.indexOf(value)
      if (index === -1) {
        this.selectedOptions.push(value)
      } else {
        this.selectedOptions.splice(index, 1)
      }
      // 触发选中事件
      // this.$emit('select', this.selectedOptions)
        this.$emit('change', this.selectedOptions)
    }
  }
}
</script>
<style scoped>
.check_style {
  display: inline-block;
  margin:5px;
}
</style>

穿梭组件

<template>
  &l