uni-app 实现类似 element ui 下拉多选框功能的下拉多选组件

在 uni-app 中实现类似 Element UI 下拉多选框功能的多选组件，可以通过自定义组件的方式来实现。以下是一个简单的代码示例，展示了如何实现一个下拉多选组件。

1. 创建自定义组件 MultiSelectDropdown.vue

<template>
  <view class="dropdown">
    <view class="selector" @click="toggleDropdown">
      <text>{{ selectedLabels.join(', ') || placeholder }}</text>
    </view>
    <view v-if="isOpen" class="dropdown-menu">
      <scroll-view scroll-y="true" class="options">
        <checkbox-group @change="handleCheckboxChange">
          <label v-for="item in options" :key="item.value">
            <checkbox :value="item.value" :checked="isSelected(item.value)">
              <text>{{ item.label }}</text>
            </checkbox>
          </label>
        </checkbox-group>
      </scroll-view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    options: Array,
    value: Array,
    placeholder: String
  },
  data() {
    return {
      isOpen: false,
      selectedValues: []
    };
  },
  watch: {
    value(newVal) {
      this.selectedValues = newVal;
    }
  },
  methods: {
    toggleDropdown() {
      this.isOpen = !this.isOpen;
    },
    handleCheckboxChange(e) {
      this.$emit('input', e.detail.value);
      this.isOpen = false;
    },
    isSelected(value) {
      return this.selectedValues.includes(value);
    }
  },
  computed: {
    selectedLabels() {
      return this.selectedValues.map(value => {
        return this.options.find(option => option.value === value).label;
      });
    }
  }
};
</script>

<style scoped>
.dropdown {
  position: relative;
  width: 100%;
}
.selector {
  padding: 10px;
  border: 1px solid #ccc;
  cursor: pointer;
}
.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  border: 1px solid #ccc;
  background: white;
  z-index: 1000;
}
.options {
  max-height: 200px;
  overflow-y: auto;
}
</style>

2. 使用自定义组件

在父组件中使用 MultiSelectDropdown 组件：

<template>
  <view>
    <multi-select-dropdown
      :options="options"
      v-model="selectedOptions"
      placeholder="请选择"
    />
  </view>
</template>

<script>
import MultiSelectDropdown from '@/components/MultiSelectDropdown.vue';

export default {
  components: {
    MultiSelectDropdown
  },
  data() {
    return {
      options: [
        { label: '选项1', value: '1' },
        { label: '选项2', value: '2' },
        { label: '选项3', value: '3' }
      ],
      selectedOptions: []
    };
  }
};
</script>

以上代码示例展示了如何在 uni-app 中实现一个下拉多选组件。通过自定义组件和 v-model 双向绑定，可以轻松实现类似 Element UI 的下拉多选框功能。