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.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>
在上面的例子中，計算屬性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.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來控制選項的顯示，運行效果和計算屬性方式相同。缺點就是無法單文件化（剛學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父子關(guān)系的vue組件。
最后，通過設(shè)置查詢條件來控制子組件的顯示與隱藏即可實現(xiàn)實時模糊搜索。
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持好吧啦網(wǎng)。
相關(guān)文章：
1. 解決Python數(shù)據(jù)可視化中文部分顯示方塊問題2. python開發(fā)一個解析protobuf文件的簡單編譯器3. ASP編碼必備的8條原則4. python 根據(jù)列表批量下載網(wǎng)易云音樂的免費音樂5. python中round函數(shù)保留兩位小數(shù)的方法6. python 基于AioHttp 異步抓取火星圖片7. 利用python+ffmpeg合并B站視頻及格式轉(zhuǎn)換的實例代碼8. Android實現(xiàn)儀表盤控件開發(fā)9. Python基于traceback模塊獲取異常信息10. 深入理解JavaScript字節(jié)二進制知識以及相關(guān)API
網(wǎng)公網(wǎng)安備