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://m.b3g6.com/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://m.b3g6.com/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. Python 合并拼接字符串的方法2. python使用jenkins發(fā)送企業(yè)微信通知的實現(xiàn)3. Python3 json模塊之編碼解碼方法講解4. 通過實例解析Python文件操作實現(xiàn)步驟5. ASP基礎知識VBScript基本元素講解6. Python 制作查詢商品歷史價格的小工具7. ASP.NET MVC使用jQuery ui的progressbar實現(xiàn)進度條8. PHP使用Swagger生成好看的API文檔9. Python 利用Entrez庫篩選下載PubMed文獻摘要的示例10. Python 如何調(diào)試程序崩潰錯誤
網(wǎng)公網(wǎng)安備