基于vue开发的多条件联动筛选特效（类似京东/淘宝/中国移动）

基于vue实现的多条件联动筛选功能（类似中国移动商城），选中，反选，删除功能。
UI库用的ivew

先来张实现的效果图

展开时候的效果

收起时候的效果

代码如下：

1. html（用了iview的UI库）

 <div class="filter-more"><transition name="selectbox"><div class="box" v-show="boxshow"><Row v-for="(item,index) in filterBox" :key="index"><i-col span="2">{{item.name}}</i-col><i-col span="22"><a href="#"v-for="(v,i) in item.items":key="i"@click="clickrange(index,v,i)"class="text-filter"  ><span :class="{ isActive:v.active}">{{v.text}}</span></a></i-col></Row></div></transition><div><a href="#" v-for="(item,index) in selectBox" class="text-select" :key="index">{{item.text}}<i @click="removeCurrentSelect(index)">&times;</i></a></div><p class="text-toggle" @click="togglebox">{{btnTxt ?'收起选项':'更多选项'}}</p></div>

2.初始化数据

data() {return {boxshow: false,btnTxt: false,selectBox: [],filterBox: [{name: '搜索范围:',items: [{ value: '1', text: '全部', active: false },{ value: '2', text: '诊断信息', active: false },{ value: '3', text: '手术信息', active: false },{ value: '4', text: '医嘱处方', active: false },{ value: '5', text: '检验报告', active: false },{ value: '6', text: '检查报告', active: false },{ value: '7', text: '病历文书', active: false }]},{name: '患者年龄:',items: [{ value: 'allAge', text: '全部', active: false },{ value: 'treeY', text: '0~3岁', active: false },{ value: 'fourteenY', text: '4~14岁', active: false },{ value: 'fortyY', text: '15~40岁', active: false },{ value: 'sixtyY', text: '41~65岁', active: false },{ value: 'enghtyY', text: '65~85岁', active: false },{ value: 'ninetyY', text: '85岁以上', active: false }]},{name: '患者性别:',items: [{ value: 'allSex', text: '全部', active: false },{ value: 'man', text: '男', active: false },{ value: 'women', text: '女', active: false },{ value: 'unknow', text: '未知', active: false }]},{name: '就诊类别:',items: [{ value: '1', text: '全部', active: false },{ value: '2', text: '门诊', active: false },{ value: '3', text: '急诊', active: false },{ value: '4', text: '住院', active: false }]},{name: '就诊时间:',items: [{ value: '1', text: '全部', active: false },{ value: '2', text: '2009年', active: false },{ value: '3', text: '2018年', active: false },{ value: '4', text: '2017年', active: false },{ value: '5', text: '2016年', active: false },{ value: '6', text: '2015年', active: false },{ value: '7', text: '2014年', active: false },{ value: '8', text: '更多', active: false }]},{name: '手术病人:',items: [{ value: '1', text: '全部', active: false },{ value: '2', text: '手术病人', active: false },{ value: '3', text: '非手术病人', active: false }]}]};},

JS逻辑代码

methods: {togglebox: function() {this.boxshow = !this.boxshow;this.btnTxt = !this.btnTxt;},clickrange(parentIndex, el, childIndex) {var item = this.filterBox[parentIndex].items;item.filter((v, i) => {if (i === childIndex) {v.active = !v.active; // 选中和反选this.selectBox.unshift(v); // 选中的数组} else {v.active = false; // 取消选中this.selectBox.filter((childEl, childI) => {if (childEl.active === false) {this.selectBox.splice(childI, 1); // 反选删除数组中的当前个}});}});},removeCurrentSelect(index) {this.filterBox.filter((el, i) => {el.items.filter((data, childIndex) => {if (data.text == this.selectBox[index].text) {data.active = false;}});});this.selectBox.splice(index, 1);}，},

4.css代码

.filter-more {width: 90%;margin: 0 auto;border: 1px solid #e8f4fd;padding: 25px 15px;
}
.box {height: 150px;overflow: hidden;
}
.text-toggle {text-align: center;cursor: pointer;
}
.selectbox-leave-active,
.selectbox-enter-active {transition: all 1s ease;
}
.selectbox-leave-active,
.selectbox-enter {height: 0px !important;
}
.selectbox-leave,
.selectbox-enter-active {height: 150px;
}
.text-filter {display: inline-block;color: #404040;width: 80px;span {display: inline-block;text-align: center;width: 60px;&:hover {border-radius: 40px;color: #ffffff;animation: myfirst 1s;-moz-animation: myfirst 1s; /* Firefox */-webkit-animation: myfirst 1s; /* Safari and Chrome */-o-animation: myfirst 1s; /* Opera */animation-fill-mode: forwards;}}
}
.text-select {display: inline-block;padding: 0px 5px;border: 1px solid #268edb;border-radius: 40px;color: #268edb;font-size: 14px;margin-right: 20px;i {display: inline-block;height: 100%;font-size: 15px;padding: 0px 5px;}
}
.isActive {background-color: #2989dd;border-radius: 40px;color: #ffffff;
}
@keyframes myfirst {from {background: #ffffff;}to {background: #2989dd;}
}

基于vue开发的多条件联动筛选特效（类似京东/淘宝/中国移动）相关推荐

TP5简单实现类似京东淘宝多级商品筛选功能。
前几天做项目时,碰到个需求,商品多级分类筛选功能.之前从没做过,查了不少资料,总算实现了.虽然实现的不够优雅,但起码能有效果,心里还是很高兴的.菜鸟有一颗成为大神的心.在这里分享给各位童鞋,欢迎大佬指 ...
基于Vue实现的多条件筛选功能(类似京东和淘宝功能)
基于Vue实现的多条件筛选功能(类似京东和淘宝功能),可以支持多选.清空.全选功能,数据源是通过JSon格式的数据封装而成. 实现的效果图: 代码实现如下: html: <div id='app ...
value数字 vue_基于Vue开发数字输入框组件
随着 vue 越来越火热, 相关组件库也非常多啦, 只用轮子怎么够, 还是要造起来!!! 1.概述 vue组件开发的api:props.events和slots 2.组件代码效果: (1)index ...
基于Vue开发的电商APP项目——蘑菇街app
基于Vue开发的电商APP项目--蘑菇街项目源码:https://github.com/Limna777/Shopmall.git 1.项目描述 2.使用的插件或第三方库 3.页面主要实现的功能 1 ...
基于vue实现精妙绝伦的三级联动
基于vue实现精妙绝伦的三级联动 ps:笔者为初学者,自己想的不容易,别喷我 <template><view class="index"><!-- 三 ...
2021年基于VUE开发的一套移动端APP小说听书AI男女多种支持云端存储书籍记录
2021年基于VUE开发的一套移动端APP小说前端架构主要采用: "axios": "^0.21.1", "better-scroll": ...
vue 音乐盒app_VBox 一款基于vue开发的音乐盒序章
自己基于vue写了一个 Mplayer, 只有简单的搜索播放随心听功能,样式适配上也很差, 路由就两个,数据都走vuex,数据转发是用nodejs自己转发,而且只是PC能比较好的展现,之后不了了之,偶 ...
基于Vue开发一个日历组件
最近在做一个类似课程表的需求,需要自制一个日历来支持功能及展现,就顺便研究一下应该怎么开发日历组件. 更新 2.23修复了2026年2月份会渲染多一行的bug,谢谢@深蓝一人童鞋提出的bug,解决方案 ...
移动Web体验月报（6月）：MIP 核心代码升级，增加基于 Vue 开发能力
原创: BrilliantOpenWeb OpenWeb开发者 7月6日作者 | Brilliant Open Web 团队编辑 | Daisy 升级与重要进展历时2个月,MIP团队完成了核心代 ...

基于vue开发的多条件联动筛选特效（类似京东/淘宝/中国移动）

先来张实现的效果图

代码如下：

基于vue开发的多条件联动筛选特效（类似京东/淘宝/中国移动）相关推荐

最新文章

热门文章