会议bug优化

zhongshujie

2025-02-28 c02d9937770b185e87a27fd831c13593b0dc8d3e

 src/components/dropdown/index.vue

@@ -1,33 +1,18 @@
<template>
  <div class="dropdown">
    <div class="selected-option" >
    <div class="selected-option">
      <div class="selected-values">
        <span
          v-for="(option, index) in selectedOptions"
          :key="index"
          class="selected-value"
        >
        <span v-for="(option, index) in selectedOptions" :key="index" class="selected-value">
          <span class="selected-value-txt">{{ option }}</span>
          <span class="delete" @click="removeOption(option)"> &times; </span>
        </span>
      </div>
      <input
        type="text"
        v-model="searchText"
        placeholder="请选择选项"
        @input="filterOptions"
        v-if="isShowSearch"
      />
      <input type="text" v-model="searchText" placeholder="请选择选项" @input="filterOptions" v-if="isShowSearch" />
      <span class="arrow" @click="toggleDropdown"></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)"
      >
      <li v-for="option in filteredOptions" :key="option" @click="toggleOption(option)">
        <input type="checkbox" :value="option" :checked="isSelected(option)" />
        <label>{{ option }}</label>
      </li>
@@ -37,13 +22,16 @@

<script>
export default {
  props:{
    options:{
      type:Array
  props: {
    options: {
      type: Array
    },
    isShowSearch:{
      type:Boolean,
      default:false
    value: {
      type: Array
    },
    isShowSearch: {
      type: Boolean,
      default: false
    }
  },
  data() {
@@ -54,6 +42,7 @@
      searchText: "", // 过滤选项的搜索文本
      // ...
      showConfirmButton: false,
      selected: this.value
    };
  },
  computed: {
@@ -62,14 +51,22 @@
        option.toLowerCase().includes(this.searchText.toLowerCase())
      );
    },

  },
  watch:{
    selectedOptions:{
  watch: {
    value: {
      deep: true, // 深度监视(针对复杂类型)
      immediate: true, // 是否立刻执行一次handler
      handler(newValue) {
        console.log('选中项变化',newValue);
        this.$emit('changeDropdownData',newValue)
        this.selectedOptions = newValue
      
      }
    },deep:true
    },
    selectedOptions: {
      handler(newValue) {
        this.$emit('changeDropdownData', newValue)
      }
    }, deep: true
  },
  methods: {
    toggleDropdown() {
@@ -91,8 +88,6 @@
      }
    },
    submitSelection() {
      // 在这里处理提交选项的逻辑
      console.log("已选择的选项:", this.selectedOptions);
      // 重置选项并隐藏确认按钮
      this.selectedOptions = [];
      this.showConfirmButton = false;
@@ -102,6 +97,15 @@
    },
    filterOptions() {
      this.showDropdown = true;
    },
    //暴露
    changeSelectData(value) {
      this.selectedOptions = value
    },
    handleChange(event) {
      // 当选中项变化时触发  
      // 通知父组件新的选中值  
      this.$emit('changeDropdownData', event.target.value);
    },
  },
};
@@ -121,6 +125,7 @@
  right: -31%;
  top: -21%;
}

.dropdown {
  min-width: 200px;
  position: relative;
@@ -157,14 +162,16 @@
  margin-right: 4px;
  margin-bottom: 4px;
}

.selected-value .selected-value-txt {
  height: 24px;
    display: inline-block;
  display: inline-block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 80px;
}

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