电脑知识|欧美黑人一区二区三区|软件|欧美黑人一级爽快片淫片高清|系统|欧美黑人狂野猛交老妇|数据库|服务器|编程开发|网络运营|知识问答|技术教程文章 - 好吧啦网

您的位置:首頁技術(shù)文章
文章詳情頁

Vue文本模糊匹配功能如何實(shí)現(xiàn)

瀏覽:103日期:2022-12-21 18:09:51

模糊匹配功能在下拉菜單的組件中用的非常多,于是打算寫幾個(gè)demo看看細(xì)節(jié)上是如何實(shí)現(xiàn)的。

一、最簡單的模糊匹配:計(jì)算屬性

<!DOCTYPE html><html lang='zh-CN'><head> <meta charset='UTF-8'> <meta name='viewport' content='width=device-width, initial-scale=1.0'> <meta http-equiv='X-UA-Compatible' content='ie=edge'> <title>Document</title></head><body> <div id='app'> <input type='text' v-model='message'> <ul> <li v-for='(option, index) in matchedOptions' :key='index'>{{ option }}</li> </ul> </div> <script src='http://www.hdgsjgj.cn/bcjs/vue.js'></script> <script> new Vue({ el: ’#app’, data: {message: ’’,options: [’html’, ’css’, ’javascript’] }, computed: {matchedOptions() { if (this.message !== ’’) { return this.options.filter(option => option.includes(this.message)) } return this.options} } }) </script></body></html>

在上面的例子中,計(jì)算屬性matchedOptions會(huì)在文本框內(nèi)容message變化時(shí)篩選options里的數(shù)據(jù),效果圖如下所示:

Vue文本模糊匹配功能如何實(shí)現(xiàn)

二、使用作用域插槽實(shí)現(xiàn)

使用插槽主要是為了使該功能組件化:在select組件中插入option,然后option通過作用域插槽從select中獲取文本值:

<!DOCTYPE html><html lang='zh-CN'><head> <meta charset='UTF-8'> <meta name='viewport' content='width=device-width, initial-scale=1.0'> <meta http-equiv='X-UA-Compatible' content='ie=edge'> <title>Document</title></head><body> <div id='app'> <my-select> <template #default='{ message }'><ul> <li v-for='(option, index) in options' :key='index' v-show='option.includes(message)'>{{ option }}</li></ul> </template> </my-select> </div> <script src='http://www.hdgsjgj.cn/bcjs/vue.js'></script> <script> Vue.component(’my-select’, { template: `<div class='my-select'> <input type='text' v-model='message'> <slot :message='message'></slot></div> `, data() {return { message: ’’} } }) new Vue({ el: ’#app’, data: {options: [’html’, ’css’, ’javascript’] } }) </script></body></html>

全局注冊了my-select組件后,可以刪除app里的message數(shù)據(jù),使用v-show來控制選項(xiàng)的顯示,運(yùn)行效果和計(jì)算屬性方式相同。缺點(diǎn)就是無法單文件化(剛學(xué)vue沒多久,不知道怎么在單文件里使用作用域插槽,試過直接把template里的東西封裝成my-option好像并不管用)

三、混入廣播和派發(fā)方法在獨(dú)立組件中實(shí)現(xiàn)模糊匹配

首先需要一個(gè)emitter文件:

/** * 子組件廣播事件 * @param {string} componentName 子組件名 * @param {string} eventName 事件名 * @param {...any} params 事件參數(shù) */function _broadcast(componentName, eventName, ...params) { this.$children.forEach(child => { if (child.$options.name === componentName) { child.$emit(eventName, ...params) } _broadcast.call(child, componentName, eventName, ...params) })}/** * 父組件派發(fā)事件 * @param {string} componentName 父組件名 * @param {string} eventName 事件名 * @param {...any} params 事件參數(shù) */function _dispatch(componentName, eventName, ...params) { if (this.$parent) { if (this.$parent.$options.name === componentName) { this.$parent.$emit(eventName, ...params) } _dispatch.call(this.$parent, componentName, eventName, ...params) }}/** * mixin */export default { methods: { broadcast(componentName, eventName, ...params) { _broadcast.call(this, componentName, eventName, ...params) }, dispatch(componentName, eventName, ...params) { _dispatch.call(this, componentName, eventName, ...params) } }}

注意,這里的$children和$parent都是指具有dom父子關(guān)系的vue組件。

最后,通過設(shè)置查詢條件來控制子組件的顯示與隱藏即可實(shí)現(xiàn)實(shí)時(shí)模糊搜索。

以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持好吧啦網(wǎng)。

標(biāo)簽: Vue
相關(guān)文章:
主站蜘蛛池模板: 正压密封性测试仪-静态发色仪-导丝头柔软性测试仪-济南恒品机电技术有限公司 | 箱式破碎机_移动方箱式破碎机/价格/厂家_【华盛铭重工】 | 防爆暖风机_防爆电暖器_防爆电暖风机_防爆电热油汀_南阳市中通智能科技集团有限公司 | 防爆大气采样器-防爆粉尘采样器-金属粉尘及其化合物采样器-首页|盐城银河科技有限公司 | 真空泵维修保养,普发,阿尔卡特,荏原,卡西亚玛,莱宝,爱德华干式螺杆真空泵维修-东莞比其尔真空机电设备有限公司 | 轴流风机-鼓风机-离心风机-散热风扇-罩极电机,生产厂家-首肯电子 | 广州办公室设计,办公室装修,写字楼设计,办公室装修公司_德科 | ◆大型吹塑加工|吹塑加工|吹塑代加工|吹塑加工厂|吹塑设备|滚塑加工|滚塑代加工-莱力奇塑业有限公司 | 卸料器-卸灰阀-卸料阀-瑞安市天蓝环保设备有限公司 | 深圳美安可自动化设备有限公司,喷码机,定制喷码机,二维码喷码机,深圳喷码机,纸箱喷码机,东莞喷码机 UV喷码机,日期喷码机,鸡蛋喷码机,管芯喷码机,管内壁喷码机,喷码机厂家 | 泉州陶瓷pc砖_园林景观砖厂家_石英砖地铺石价格 _福建暴风石英砖 | 首页 - 张店继勇软件开发工作室| 环球电气之家-中国专业电气电子产品行业服务网站! | 深圳宣传片制作_产品视频制作_深圳3D动画制作公司_深圳短视频拍摄-深圳市西典映画传媒有限公司 | 期货软件-专业期货分析软件下载-云智赢 | 天津仓库出租网-天津电商仓库-天津云仓一件代发-【博程云仓】 | 荣事达手推洗地机_洗地机厂家_驾驶式扫地机_工业清洁设备 | 办公室装修_上海办公室设计装修_时尚办公新主张-后街印象 | 土壤水分自动监测站-SM150便携式土壤水分仪-铭奥仪器 | 科威信洗净科技,碳氢清洗机,超声波清洗机,真空碳氢清洗机 | 科昊仪器超纯水机系统-可成气相液氮罐-美菱超低温冰箱-西安昊兴生物科技有限公司 | 泥浆在线密度计厂家-防爆数字压力表-膜盒-远传压力表厂家-江苏大亚自控设备有限公司 | 琉璃瓦-琉璃瓦厂家-安徽盛阳新型建材科技有限公司 | 99文库_实习生实用的范文资料文库站 | 云杂志网-学术期刊-首页 | 集装袋吨袋生产厂家-噸袋廠傢-塑料编织袋-纸塑复合袋-二手吨袋-太空袋-曹县建烨包装 | 污水处理设备,一体化泵站,一体化净水设备-「梦之洁环保设备厂家」 | 小威小说网 - 新小威小说网 - 小威小说网小说搜索引擎 | 贝壳粉涂料-内墙腻子-外墙腻子-山东巨野七彩贝壳漆业中心 | 高尔夫球杆_高尔夫果岭_高尔夫用品-深圳市新高品体育用品有限公司 | 无负压供水设备,消防稳压供水设备-淄博创辉供水设备有限公司 | 并网柜,汇流箱,电控设备,中高低压开关柜,电气电力成套设备,PLC控制设备订制厂家,江苏昌伟业新能源科技有限公司 | HV全空气系统_杭州暖通公司—杭州斯培尔冷暖设备有限公司 | 亚克力制品定制,上海嘉定有机玻璃加工制作生产厂家—官网 | 在线钠离子分析仪-硅酸根离子浓度测定仪-油液水分测定仪价格-北京时代新维测控设备有限公司 | CE认证_FCC认证_CCC认证_MFI认证_UN38.3认证-微测检测 CNAS实验室 | 杭州网络公司_百度SEO优化-外贸网络推广_抖音小程序开发-杭州乐软科技有限公司 | 电渗析,废酸回收,双极膜-山东天维膜技术有限公司 | 地磅-地秤-江阴/无锡地磅-江阴天亿计量设备有限公司_ | 国际线缆连接网 - 连接器_线缆线束加工行业门户网站 | 动物解剖台-成蚊接触筒-标本工具箱-负压实验台-北京哲成科技有限公司 |