VUE—类似选房软件的多选条件组件

1、点击列表选中项目回显样式 已选条件列表更新
2、已选条件为单选 超出两个显示清除全部
3、点击清除全部按钮列表已选条件清空，选中项全都回归选中全部
4、超出一行显示更多按钮 点击更多显示剩余全部

1、MultipleSelect文件夹新建MultipleSelect.vue和MultipleSelectItem.vue

MultipleSelect.vue

<template>
  <div class="multiple-select-wrap"> // 用来放MultipleSelectItem
    <slot></slot> 
  </div>
</template>

MultipleSelectItem.vue

<template>
  <div class="multiple-select-item-wrap clearfix">
    <p class="item-label fl">{
   {
    label }}</p>
    <!-- 已选条件 -->
    <template v-if="checked">
      <p class="item-option item-option-checked fl clearfix">
        <span
          v-for="item in list"
          :key="item.id"
          class="fl"
          @click="onDelete(item)"
        >
          {
   {
    item.name }}
        </span>
        <span
          v-if="list.length >= 2"
          class="item-option-clear fl"
          @click="onClear"
        >
          清除全部
        </span>
      </p>
    </template>
    <!-- 选择 -->
    <template v-else>
      <p
        ref="option"
        class="item-option fl clearfix"
        :class="{ ellipsis: !foldState }"
      >
        <span
          class="fl"
          :class="{ 'item-option-selected': selectedId === 0 }"
          @click="onChange(allItem)"
        >
          全部
        </span>
        <span
          v-for="item in list"
          :key&#