Vue文本模糊匹配功能如何实现


Posted in Javascript onJuly 30, 2020

模糊匹配功能在下拉菜单的组件中用的非常多,于是打算写几个demo看看细节上是如何实现的。

一、最简单的模糊匹配:计算属性

<!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="./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会在文本框内容message变化时筛选options里的数据,效果图如下所示:

Vue文本模糊匹配功能如何实现

二、使用作用域插槽实现

使用插槽主要是为了使该功能组件化:在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="./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数据,使用v-show来控制选项的显示,运行效果和计算属性方式相同。缺点就是无法单文件化(刚学vue没多久,不知道怎么在单文件里使用作用域插槽,试过直接把template里的东西封装成my-option好像并不管用)

三、混入广播和派发方法在独立组件中实现模糊匹配

首先需要一个emitter文件:

/**
 * 子组件广播事件
 * @param {string} componentName 子组件名
 * @param {string} eventName 事件名
 * @param {...any} params 事件参数
 */
function _broadcast(componentName, eventName, ...params) {
  this.$children.forEach(child => {
    if (child.$options.name === componentName) {
      child.$emit(eventName, ...params)
    }
    _broadcast.call(child, componentName, eventName, ...params)
  })
}

/**
 * 父组件派发事件
 * @param {string} componentName 父组件名
 * @param {string} eventName 事件名
 * @param {...any} params 事件参数
 */
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组件。

最后,通过设置查询条件来控制子组件的显示与隐藏即可实现实时模糊搜索。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript 数组的 uniq 方法
Jan 23 Javascript
JavaScript 验证浏览器是否支持javascript的方法小结
May 17 Javascript
Prototype 学习 Prototype对象
Jul 12 Javascript
jquery load事件(callback/data)使用方法及注意事项
Feb 06 Javascript
js+css实现超简洁的二级下拉菜单效果代码
Sep 07 Javascript
基于jquery fly插件实现加入购物车抛物线动画效果
Apr 05 Javascript
jQuery中设置form表单中action值的实现方法
May 25 Javascript
新手学习前端之js模仿淘宝主页网站
Oct 31 Javascript
jquery 实现复选框的全选操作实例代码
Jan 24 Javascript
AngularJS $http post 传递参数数据的方法
Oct 09 Javascript
小程序实现左滑删除效果
Jul 25 Javascript
vue 实现click同时传入事件对象和自定义参数
Jan 29 Vue.js
VUE 单页面使用 echart 窗口变化时的用法
Jul 30 #Javascript
解决vue单页面多个组件嵌套监听浏览器窗口变化问题
Jul 30 #Javascript
Vue Render函数原理及代码实例解析
Jul 30 #Javascript
vue - props 声明数组和对象操作
Jul 30 #Javascript
vue项目,代码提交至码云,iconfont的用法说明
Jul 30 #Javascript
vue如何使用外部特殊字体的操作
Jul 30 #Javascript
在vue-cli3中使用axios获取本地json操作
Jul 30 #Javascript
You might like
php中序列化与反序列化详解
2017/02/13 PHP
一个用javascript写的select支持上下键、首字母筛选以及回车取值的功能
2009/09/09 Javascript
jQuery AJAX 调用WebService实现代码
2010/03/24 Javascript
修复ie8&amp;chrome下window的resize事件多次执行
2011/10/20 Javascript
js控制表单奇偶行样式的简单方法
2013/07/31 Javascript
js实现遮罩层弹出框的方法
2015/01/15 Javascript
jQuery延迟加载图片插件Lazy Load使用指南
2015/03/25 Javascript
网页瀑布流布局jQuery实现代码
2016/10/21 Javascript
JavaScript中this的用法实例分析
2016/12/19 Javascript
vue.js 使用v-if v-else发现没有执行解决办法
2017/05/15 Javascript
jquery对table做排序操作的实例演示
2017/08/10 jQuery
JavaScript实现简单图片轮播效果
2017/08/21 Javascript
日期时间范围选择插件:daterangepicker使用总结(必看篇)
2017/09/14 Javascript
javaScript之split与join的区别(详解)
2017/11/08 Javascript
vue-cli启动本地服务局域网不能访问的原因分析
2018/01/22 Javascript
js与jQuery实现获取table中的数据并拼成json字符串操作示例
2018/07/12 jQuery
JS数据类型(基本数据类型、引用数据类型)及堆和栈的区别分析
2020/03/04 Javascript
vue proxy 的优势与使用场景实现
2020/06/15 Javascript
在vue中axios设置timeout超时的操作
2020/09/04 Javascript
Python和perl实现批量对目录下电子书文件重命名的代码分享
2014/11/21 Python
python中requests爬去网页内容出现乱码问题解决方法介绍
2017/10/25 Python
Python实现对文件进行单词划分并去重排序操作示例
2018/07/10 Python
对PyQt5基本窗口控件 QMainWindow的使用详解
2019/06/19 Python
python opencv圆、椭圆与任意多边形的绘制实例详解
2020/02/06 Python
Python数据可视化处理库PyEcharts柱状图,饼图,线性图,词云图常用实例详解
2020/02/10 Python
python读取多层嵌套文件夹中的文件实例
2020/02/27 Python
使用Python提取文本中含有特定字符串的方法示例
2020/12/09 Python
浅谈css3中calc在less编译时被计算的解决办法
2017/12/04 HTML / CSS
Data URI scheme详解和使用实例及图片base64编码实现方法
2014/05/08 HTML / CSS
英国排名第一的停车场运营商:NCP
2019/08/26 全球购物
美国和加拿大计算机和电子产品购物网站:TigerDirect.com
2019/09/13 全球购物
档案检查欢迎词
2014/01/13 职场文书
关于赌博的检讨书
2014/01/24 职场文书
三月法制宣传月活动总结
2014/07/03 职场文书
环卫处个人工作总结
2015/03/04 职场文书
浅谈vue2的$refs在vue3组合式API中的替代方法
2021/04/18 Vue.js