Vue文本模糊匹配功能如何實現(xiàn)
模糊匹配功能在下拉菜單的組件中用的非常多，于是打算寫幾個demo看看細節(jié)上是如何實現(xiàn)的。
一、最簡單的模糊匹配：計算屬性
<!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.leifengta.com.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>
在上面的例子中，計算屬性matchedOptions會在文本框內(nèi)容message變化時篩選options里的數(shù)據(jù)，效果圖如下所示：
二、使用作用域插槽實現(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.leifengta.com.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來控制選項的顯示，運行效果和計算屬性方式相同。缺點就是無法單文件化（剛學vue沒多久，不知道怎么在單文件里使用作用域插槽，試過直接把template里的東西封裝成my-option好像并不管用）
三、混入廣播和派發(fā)方法在獨立組件中實現(xiàn)模糊匹配
首先需要一個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父子關系的vue組件。
最后，通過設置查詢條件來控制子組件的顯示與隱藏即可實現(xiàn)實時模糊搜索。
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持好吧啦網(wǎng)。
相關文章：
1. 編程語言PHP在Web開發(fā)領域的優(yōu)勢在哪？2. 詳解Android studio 動態(tài)fragment的用法3. Android如何加載Base64編碼格式圖片4. Spring Boot和Thymeleaf整合結合JPA實現(xiàn)分頁效果(實例代碼)5. 什么是python的自省6. 基于android studio的layout的xml文件的創(chuàng)建方式7. 圖文詳解vue中proto文件的函數(shù)調(diào)用8. .Net Core使用Coravel實現(xiàn)任務調(diào)度的完整步驟9. 在IDEA中實現(xiàn)同時運行2個相同的java程序10. 解決Android studio xml界面無法預覽問題
網(wǎng)公網(wǎng)安備