vue下拉多选组件开发(可多选,可搜索,可显示多个,放不下时数字显示剩余数量)

 

<template>
  <div :class="multSelectRef" class="con-alert-wrap">
    <div :class="{ active: alertFlag }" class="sel-itm sel-itm2x" @click="handleAlert">
      <div class="sel-inner-wrap">
        <div v-for="(item, inx) in multSelectDataCur && multSelectDataCur.slice(0, curInx)" :key="inx" class="selInner">
          {{ multSelectDataShowCopy.find((i) => i[dictValue] == item)[dictName] }}
          <i class="el-icon-close" @click.stop="delSelLis(inx);"></i>
        </div>
      </div>
      <div v-if="showNum > 0" class="mutil-tip">{{ "+" + showNum }}</div>
      <div @click="inputFocus">
        <el-input class="sel-input" placeholder="" v-model="filterText"></el-input>
      </div>

      <!-- <span v-if="!multSelectDataCur || !multSelectDataCur.length" class="placeholder">请选择</span> -->
      <div class="opera-icon">
        <svg-icon :class="{ active: alertFlag }" icon-class="Shape" style="width: 9px; height: 8px" />
      </div>
    </div>
    <commonAlert :alertFlag="alertFlag" :use-close="true" @closeAlert="alertFlag = false">
      <ul class="multPopper">
        <li v-for="(item, index) in multSelectDataShow" :key="index" :class="{active: multSelectDataCur.indexOf(item[dictValue]) != -1}" class="multItem" @click="handleSelect(item)">
          {{ item[dictName] }}
        </li>
      </ul>
    </commonAlert>
  </div>
</template>

<script type="text/javascript">
import $ from "jquery";
import clickoutside from "element-ui/src/utils/clickoutside";
import { deepCopy } from '@/utils/index';

export default {
  directives: { clickoutside },
  name: "signalingSelAlert",
  props: {
    inxKey: { type: Number },
    value: { type: Array, default: () => [] },
    multSelectData: { type: Array },
    dictName: { type: String, default: "dictName" },
    dictValue: { type: String, default: "dictValue" },
  },
  components: {},
  data() {
    return {
      showNum: 0,
      curInx: 100,
      filterText: "",
      alertFlag: false,
      multSelectRef: "",
      multSelectDataCur: [],
      multSelectDataShow: [],
      multSelectDataShowCopy: []
    };
  },
  watch: {
    value() {
      this.multSelectDataCur = [...this.value];
      this.realSelInput();
    },
    filterText(val) {
      this.multSelectDataShow = this.multSelectDataShowCopy.filter(item => {
        return item.dictName.toLowerCase().includes(val.toLowerCase());
      });
      console.log('object :>> ', this.multSelectDataShow);
    },
  },
  created() { },
  mounted() {
    this.multSelectDataShow = deepCopy(this.multSelectData);
    this.multSelectDataShowCopy = deepCopy(this.multSelectData);
    this.multSelectDataCur = [...this.value];
    this.multSelectRef = "multSelectRef" + this.inxKey;
    this.realSelInput();
  },
  methods: {
    handleAlert() {
      this.alertFlag = !this.alertFlag;
    },
    inputFocus() {
      setTimeout(() => {
        this.alertFlag = true;
      }, 10);
    },
    handleSelect(item) {
      let inx = this.multSelectDataCur.indexOf(item[this.dictValue]);
      if (inx != -1) {
        this.delSelLis(inx);
        return;
      }
      this.multSelectDataCur.push(item[this.dictValue]);
      this.$emit("input", this.multSelectDataCur);
      this.$emit("change", this.multSelectDataCur);
    },

    delSelLis(inx) {
      // 删除选中的项
      this.multSelectDataCur.splice(inx, 1);
      this.realSelInput();
      this.$emit("input", this.multSelectDataCur);
      this.$emit("change", this.multSelectDataCur);
    },
    realSelInput() {
      this.curInx = 100;
      this.showNum = 0;
      this.$nextTick(() => {
        let selinnerLis = $(`.${this.multSelectRef} .selInner`);
        let selinnerP = $(`.${this.multSelectRef} .sel-itm2x`).width() - 20;
        let innw = 0;
        for (let i = 0; i < selinnerLis.length; i++) {
          innw = innw + selinnerLis[i].offsetWidth + 5;
          if (innw > selinnerP) {
            this.curInx = i;
            this.showNum = this.multSelectDataCur.length - i;
            break;
          }
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.con-alert-wrap {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  cursor: pointer;

  .sel-itm2x {
    display: flex;
    width: 100%;
    background: #fff;
    color: #37383a;
    border: 1px solid #dcdfe6;
    border-radius: 2px;
    align-items: center;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    position: relative;
    margin: 0;
    font-size: 12px;
    transition: 0.2s;
    line-height: 32px;
    height: 32px;
    padding-right: 30px;

    &:hover {
      border-color: #c0c4cc;
    }

    &.active {
      border: 1px solid #1c6aff !important;
    }

    .sel-inner-wrap {
      display: flex;
    }
    .sel-input ::v-deep {
      .el-input__inner {
        border: none;
      }
    }
    .selInner {
      height: 22px;
      line-height: 22px;
      box-sizing: border-box;
      border: 1px solid rgba(216, 220, 229, 1);
      border-radius: 2px;
      padding: 0 8px !important;
      margin: 0 0 0 5px;
      background-color: rgba(242, 244, 247, 1);
      color: #707781;

      .el-icon-close {
        cursor: pointer;
        font-size: 10px;
        border-radius: 5px;

        &:hover {
          background: #909399;
          color: #eee;
          transform: scale(1.1);
        }
      }
    }

    .mutil-tip {
      background-color: rgba(242, 244, 247, 1);
      border: 1px solid rgba(216, 220, 229, 1);
      padding: 0 8px;
      border-radius: 10px;
      margin: 0 0 0 5px;
      height: 22px;
      padding: 0 8px !important;
      line-height: 22px;
      box-sizing: border-box;
      color: #707781;
    }

    .placeholder {
      text-indent: 15px;
      font-size: 14px;
      color: #c0c4cc;
      user-select: none;
    }

    .opera-icon {
      position: absolute;
      top: 50%;
      right: 13px;
      transform: translateY(-50%);
      pointer-events: none;
      user-select: none;

      .svg-icon {
        &.active {
          transform: rotateZ(180deg);
        }
      }
    }
  }
}
</style>