Vue 2.0实现一个多选下拉框效果

作者: 祈澈菇凉 | 来源:发表于2023-10-03 21:55 被阅读0次

在这个代码中，有以下功能：

selectedOptions 数组用于存储选中的选项。
点击选中的选项后，可以通过点击删除按钮移除选项。
增加了一个搜索框，可以根据输入的文本过滤选项。
使用复选框实现多选功能。

<template>
  <div class="dropdown">
    <div class="selected-option" @click="toggleDropdown">
      <div class="selected-values">
        <span v-for="(option, index) in selectedOptions" :key="index" class="selected-value">
          {{ option }}
          <span class="delete" @click="removeOption(option)">
            &times;
          </span>
        </span>
      </div>
      <input type="text" v-model="searchText" placeholder="请选择选项" @input="filterOptions">
      <span class="arrow"></span>
    </div>
    <ul v-if="showDropdown" class="options-list">
      <li v-for="option in filteredOptions" :key="option" @click="toggleOption(option)">
        <input type="checkbox" :value="option" :checked="isSelected(option)">
        <label>{{ option }}</label>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      options: ['选项1', '选项2', '选项3', '选项4'], // 下拉框的选项数据
      selectedOptions: [], // 当前选中的选项
      showDropdown: false, // 控制悬浮框的显示状态
      searchText: '', // 过滤选项的搜索文本
    };
  },
  computed: {
    filteredOptions() {
      return this.options.filter(option =>
        option.toLowerCase().includes(this.searchText.toLowerCase())
      );
    },
  },
  methods: {
    toggleDropdown() {
      this.showDropdown = !this.showDropdown;
    },
    toggleOption(option) {
      if (this.isSelected(option)) {
        this.removeOption(option);
      } else {
        this.selectedOptions.push(option);
      }
    },
    removeOption(option) {
      const index = this.selectedOptions.indexOf(option);
      if (index !== -1) {
        this.selectedOptions.splice(index, 1);
      }
    },
    isSelected(option) {
      return this.selectedOptions.includes(option);
    },
    filterOptions() {
      this.showDropdown = true;
    },
  },
};
</script>

<style>
.dropdown {
  position: relative;
  display: inline-block;
}

.selected-option {
  display: flex;
  align-items: center;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
  cursor: pointer;
}

.selected-values {
  display: flex;
  flex-wrap: wrap;
}

.selected-value {
  display: flex;
  align-items: center;
  background-color: #f2f2f2;
  padding: 4px 8px;
  border-radius: 16px;
  margin-right: 4px;
  margin-bottom: 4px;
}

.selected-value .delete {
  margin-left: 4px;
  cursor: pointer;
}

.selected-option input {
  flex: 1;
  border: none;
  background-color: transparent;
  outline: none;
  cursor: pointer;
}

.arrow {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 5px 5px 0 5px;
  border-color: #999 transparent transparent transparent;
  margin-left: 4px;
}

.options-list {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 4px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.options-list li {
  display: flex;
  align-items: center;
  padding: 8px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.options-list li:hover {
  background-color: #f2f2f2;
}

.options-list li input[type="checkbox"] {
  margin-right: 8px;
  cursor: pointer;
}
</style>

在这个代码中添加一个确认按钮，用于提交用户选择的选项。

要在上述代码中添加一个确认按钮，用于提交用户选择的选项，你可以按照以下步骤进行修改：

1：在模板中添加一个确认按钮元素，例如：

<button class="confirm-button" @click="submitSelection">确认</button>

2：在data中添加一个布尔类型的showConfirmButton属性，并将其初始值设为false：

data() {
  return {
    // ...
    showConfirmButton: false,
  };
},

3：在toggleDropdown方法中，将showConfirmButton的值设为false，以确保下拉框展开时确认按钮隐藏：

toggleDropdown() {
  this.showDropdown = !this.showDropdown;
  this.showConfirmButton = false;
},

4：在toggleOption方法中，将showConfirmButton的值设为true，以确保选择选项时确认按钮显示：

toggleOption(option) {
  // ...
  this.showConfirmButton = true;
},

5：添加submitSelection方法用于处理确认按钮的点击事件，例如：

submitSelection() {
  // 在这里处理提交选项的逻辑
  console.log('已选择的选项:', this.selectedOptions);
  // 重置选项并隐藏确认按钮
  this.selectedOptions = [];
  this.showConfirmButton = false;
},

6：在样式中添加确认按钮的样式定义，例如：

.confirm-button {
  display: block;
  margin-top: 8px;
  padding: 8px 16px;
  background-color: #4CAF50;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

demo

<template>
  <div class="dropdown">
    <div class="selected-option" @click="toggleDropdown">
      <div class="selected-values">
        <span
          v-for="(option, index) in selectedOptions"
          :key="index"
          class="selected-value"
        >
          {{ option }}
          <span class="delete" @click="removeOption(option)"> &times; </span>
        </span>
      </div>
      <input
        type="text"
        v-model="searchText"
        placeholder="请选择选项"
        @input="filterOptions"
      />
      <span class="arrow"></span>
    </div>

    <button class="confirm-button" @click="submitSelection">确认</button>
    <ul v-if="showDropdown" class="options-list">
      <li
        v-for="option in filteredOptions"
        :key="option"
        @click="toggleOption(option)"
      >
        <input type="checkbox" :value="option" :checked="isSelected(option)" />
        <label>{{ option }}</label>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      options: ["选项1", "选项2", "选项3", "选项4"], // 下拉框的选项数据
      selectedOptions: [], // 当前选中的选项
      showDropdown: false, // 控制悬浮框的显示状态
      searchText: "", // 过滤选项的搜索文本
      // ...
      showConfirmButton: false,
    };
  },
  computed: {
    filteredOptions() {
      return this.options.filter((option) =>
        option.toLowerCase().includes(this.searchText.toLowerCase())
      );
    },
  },
  methods: {
    toggleDropdown() {
      this.showDropdown = !this.showDropdown;

      this.showConfirmButton = false;
    },
    toggleOption(option) {
      this.showConfirmButton = true;
      if (this.isSelected(option)) {
        this.removeOption(option);
      } else {
        this.selectedOptions.push(option);
      }
    },
    removeOption(option) {
      const index = this.selectedOptions.indexOf(option);
      if (index !== -1) {
        this.selectedOptions.splice(index, 1);
      }
    },
    submitSelection() {
      // 在这里处理提交选项的逻辑
      console.log("已选择的选项:", this.selectedOptions);
      // 重置选项并隐藏确认按钮
      this.selectedOptions = [];
      this.showConfirmButton = false;
    },
    isSelected(option) {
      return this.selectedOptions.includes(option);
    },
    filterOptions() {
      this.showDropdown = true;
    },
  },
};
</script>

<style>
.confirm-button {
  display: block;
  margin-top: 8px;
  padding: 8px 16px;
  background-color: #4caf50;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  position: absolute;
  right: -31%;
  top: -21%;
}
.dropdown {
  position: relative;
  display: inline-block;
}

.selected-option {
  display: flex;
  align-items: center;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
  cursor: pointer;
}

.selected-values {
  display: flex;
  flex-wrap: wrap;
}

.selected-value {
  display: flex;
  align-items: center;
  background-color: #f2f2f2;
  padding: 4px 8px;
  border-radius: 16px;
  margin-right: 4px;
  margin-bottom: 4px;
}

.selected-value .delete {
  margin-left: 4px;
  cursor: pointer;
}

.selected-option input {
  flex: 1;
  border: none;
  background-color: transparent;
  outline: none;
  cursor: pointer;
}

.arrow {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 5px 5px 0 5px;
  border-color: #999 transparent transparent transparent;
  margin-left: 4px;
}

.options-list {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 4px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.options-list li {
  display: flex;
  align-items: center;
  padding: 8px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.options-list li:hover {
  background-color: #f2f2f2;
}

.options-list li input[type="checkbox"] {
  margin-right: 8px;
  cursor: pointer;
}
</style>

网友评论

本文标题：Vue 2.0实现一个多选下拉框效果

本文链接：https://www.haomeiwen.com/subject/ijehbdtx.html

延伸阅读

深度阅读

您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

Vue 2.0实现一个多选下拉框效果

在这个代码中添加一个确认按钮，用于提交用户选择的选项。

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读