vue实现下拉列表多选全选以及模糊查询的vue组件 - 好文

<>前端，有时有这样的需求，需要一个下拉列表，还要有多选全选功能，以及模糊查询功能的vue组件，我做了一个简陋的组件，供大家参考，有问题请留言

这是我的文件目录结构

**
效果图：

o(∩_∩)o o(∩_∩)o o(∩_∩)o o(∩_∩)o o(∩_∩)o o(∩_∩)o o(∩_∩)o o(∩_∩)o
模糊查询：

下面贴出代码
这是组件代码mohuSearch.vue
<template> <div> <input type="text" placeholder="输入以模糊查询" v-model="search">
<div class="searchBox"> <input type="text" class="select"
v-model="checkedNames"> <div class="down" @click="show"></div> <div
v-show="listShow"> <ul class="list" v-for="(item,index) in searchData"> <li>
<input type="checkbox" :id="item" class="checkItem" :value="item"
v-model="checkedNames"> <label :for="item">{{item}}</label> </li> </ul> <input
id="quan" type="checkbox" @click="checkAll($event)"> <label
for="quan">全选</label> </div> </div> </div> </template> <script> export default
{ name: "mohu-search", props:{//接收父组件传递过来的数据 data1: { type: Array, default: []
}, }, data(){ return{ listShow:false, search:'', checkedNames:[],
items:['jack','mike','rose','jan']//下拉列表的选项数据，此数据可以从父组件传过来，通过props接收，接收到props数据后赋值给该数据即可
} }, created(){ console.log(this.data1) }, watch: { // 监视双向绑定的数据数组
checkedNames: { handler(){ // 数据数组有变化将触发此函数 var checkObj1 =
document.querySelectorAll('.checkItem'); // 获取所有checkbox项
if(this.checkedNames.length == checkObj1.length){
document.querySelector('#quan').checked = true; }else {
document.querySelector('#quan').checked = false; } }, deep: true // 深度监视 },
search:{ handler(){//搜索框输入变化触发 this.listShow=true; }, deep: true // 深度监视 } },
methods: { checkAll(e){ // 点击全选事件函数 var checkObj =
document.querySelectorAll('.checkItem'); // 获取所有checkbox项 if(e.target.checked){
// 判定全选checkbox的勾选状态 for(var i=0;i<checkObj.length;i++){
if(!checkObj[i].checked){ // 将未勾选的checkbox选项push到绑定数组中
this.checkedNames.push(checkObj[i].value); } } }else { //
如果是去掉全选则清空checkbox选项绑定数组 this.checkedNames = []; } }, show(){
this.listShow=!this.listShow; if(this.listShow==true){ this.checkedNames = [];
} } }, computed: { searchData: function() { var search1 = this.search; if
(search1) { return this.items.filter(function(product) { return
Object.keys(product).some(function(key) { return
String(product[key]).toLowerCase().indexOf(search1) > -1 }) }) } return
this.items; } } } </script> <style scoped> @import "mohuSearch.css"; </style>
这是简陋的样式文件 mohuSearch.css
.searchBox{ width: 200px; height: 26px; position: relative; } .select{ width:
98%; height: 100%; } .down{ position: absolute; width: 0; border:9px solid
transparent; border-top: 11px solid black; top: 10px; right: 7px; cursor:
pointer; } .list{ width: 100%; } .list>li{ height: 20px; background: white;
border: 1px solid lightgray; border-top: none; }
想引用此组件，你可以这样，v-bind向子组件传值，子组件通过props接收传过去的值，代码中有注释，应该可以看懂
<template> <div> <input type="text" v-model="search"/> <ul v-for="item in
searchData "> <li>{{item.name}},价格:￥{{item.price}}</li> </ul> <mohusearch
:data1="options"></mohusearch> </div> </template> <script> import mohusearch
from './mohuSearch/mohuSearch' export default { name: "mohu", components:{
mohusearch }, data() { return{ options:['苹果','香蕉','菠萝','西瓜'], } }, } </script>
<style scoped> </style>
<>好了，基本就是这样了，如有疑问，请在下方留言，欢迎大神提出改进意见。

**

热门工具换一换