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

最新推荐文章于 2024-09-10 16:28:36 发布

Poppy_LYT

最新推荐文章于 2024-09-10 16:28:36 发布

阅读量542

点赞数

分类专栏： VUE 文章标签： vue.js 选房软件多选条件组件

本文链接：https://blog.csdn.net/poppy_lyt/article/details/119995692

版权

本文介绍如何在Vue.js中创建一个类似选房软件的多选条件组件。内容包括：在MultipleSelect文件夹下创建MultipleSelect.vue和MultipleSelectItem.vue组件，实现点击选中项目的回显，限制已选条件数量并提供清除全部功能，以及当条件过多时显示‘更多’按钮以展开剩余选项。

摘要由CSDN通过智能技术生成

在这里插入图片描述
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&#