Vue文本模糊匹配功能如何實(shí)現(xiàn)
模糊匹配功能在下拉菜單的組件中用的非常多，于是打算寫幾個(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ù)，效果圖如下所示：
二、使用作用域插槽實(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)。
相關(guān)文章：
1. 存儲于xml中需要的HTML轉(zhuǎn)義代碼2. python 浮點(diǎn)數(shù)四舍五入需要注意的地方3. Java GZip 基于內(nèi)存實(shí)現(xiàn)壓縮和解壓的方法4. python開發(fā)一款翻譯工具5. 利用CSS制作3D動(dòng)畫6. jsp+servlet簡單實(shí)現(xiàn)上傳文件功能（保存目錄改進(jìn)）7. Springboot 全局日期格式化處理的實(shí)現(xiàn)8. 完美解決vue 中多個(gè)echarts圖表自適應(yīng)的問題9. SpringBoot+TestNG單元測試的實(shí)現(xiàn)10. PHP實(shí)現(xiàn)簡單線性回歸之?dāng)?shù)學(xué)庫的重要性
網(wǎng)公網(wǎng)安備