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.lshqa.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.lshqa.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來控制選項的顯示，運行效果和計算屬性方式相同。缺點就是無法單文件化（剛學(xué)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)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持好吧啦網(wǎng)。
相關(guān)文章：
1. jsp網(wǎng)頁實現(xiàn)貪吃蛇小游戲2. jsp+servlet簡單實現(xiàn)上傳文件功能（保存目錄改進）3. JavaScript實現(xiàn)組件化和模塊化方法詳解4. ASP.NET MVC遍歷驗證ModelState的錯誤信息5. HTML5 Canvas繪制圖形從入門到精通6. .Net Core和RabbitMQ限制循環(huán)消費的方法7. 淺談SpringMVC jsp前臺獲取參數(shù)的方式 EL表達式8. SpringMVC+Jquery實現(xiàn)Ajax功能9. ASP中if語句、select 、while循環(huán)的使用方法10. asp(vbs)Rs.Open和Conn.Execute的詳解和區(qū)別及&H0001的說明
網(wǎng)公網(wǎng)安備