uni-app 可输入select插件需求 支持添加删除选择项

发布于 1周前 作者 bupafengyu 来自 uni-app

uni-app 可输入select插件需求 支持添加删除选择项

描述

一个文本框,可输入,可选择,选择项可以用户自己维护,添加或删除

1 回复

在uni-app中,要实现一个可输入且支持添加和删除选择项的select插件,你可以通过自定义组件的方式来实现。以下是一个简化的代码示例,展示了如何实现这一功能。

首先,创建一个名为custom-select.vue的组件:

<template>
  <view class="custom-select">
    <view class="select-input">
      <input 
        v-model="inputValue" 
        @focus="showOptions = true" 
        @blur="handleBlur" 
        placeholder="请输入或选择"
      />
    </view>
    <view v-if="showOptions" class="options-list">
      <view 
        v-for="(item, index) in options" 
        :key="index" 
        class="option-item" 
        @click="selectItem(item)"
      >
        {{ item }}
      </view>
      <view class="add-option" @click="addOption">
        + 添加选项
      </view>
    </view>
    <view class="selected-items">
      <view 
        v-for="(selected, index) in selectedItems" 
        :key="index" 
        class="selected-item"
      >
        {{ selected }}
        <button @click="removeItem(index)">删除</button>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      inputValue: '',
      showOptions: false,
      options: ['选项1', '选项2'],
      selectedItems: []
    };
  },
  methods: {
    selectItem(item) {
      if (!this.selectedItems.includes(item)) {
        this.selectedItems.push(item);
        this.inputValue = '';
        this.showOptions = false;
      }
    },
    addOption() {
      if (this.inputValue.trim()) {
        this.options.push(this.inputValue.trim());
        this.selectItem(this.inputValue.trim());
        this.inputValue = '';
      }
      this.showOptions = false;
    },
    removeItem(index) {
      this.selectedItems.splice(index, 1);
    },
    handleBlur() {
      setTimeout(() => {
        this.showOptions = false;
      }, 200);
    }
  }
};
</script>

<style scoped>
/* 添加你的样式 */
</style>

在这个组件中,我们有一个输入框用于输入或选择选项,一个下拉列表显示所有可选选项,并允许添加新选项。已选择的选项会显示在下方,并附带删除按钮。

你可以在你的页面中使用这个组件,并绑定相关事件或数据,以满足你的具体需求。例如:

<template>
  <view>
    <custom-select />
  </view>
</template>

<script>
import CustomSelect from '@/components/custom-select.vue';

export default {
  components: {
    CustomSelect
  }
};
</script>

这样,你就拥有了一个功能齐全的自定义可输入select插件。你可以根据需要进一步扩展和优化这个组件,比如添加样式、验证逻辑等。

回到顶部