项目心得四

时间过滤器dayjs的使用：官网地址

import dayjs from 'dayjs'
// 导入语言包
import 'dayjs/locale/zh-cn'
// 导入相对时间
import relativeTime from 'dayjs/plugin/relativeTime'
// 使用中文语言包
dayjs.locale('zh-cn')
// 注册相对时间插件
dayjs.extend(relativeTime)
// 定义全局的时间过滤器
Vue.filter('relativeTime', time => {
  return dayjs().to(dayjs(time))
})

v-if、v-else-if、v-else的组合使用：

<!-- 搜索结果 -->
<search-result v-if="isResultShow" />
<!-- /搜索结果 -->

<!-- 联想建议 -->
<search-suggestion v-else-if="searchText" />
<!-- /联想建议 -->

<!-- 搜索历史记录 -->
<search-history v-else />
<!-- /搜索历史记录 -->

防抖优化lodash的使用：官网地址

// lodash 支持按需加载，有利于打包结果优化
import { debounce } from 'lodash'
----------------------------------------
  watch: {
    searchText: {
      handler: debounce(function (val) {
        console.log(val)
        this.getSuggestions(val)
      }, 200),
      immediate: true // 页面初始化就执行
    }
  },

搜索关键字高亮：

1、在 methods 中添加一个方法处理高亮

highlight (text) {
    const highlightStr = `<span style="color:red;">${this.searchText}</span>`

    // 正则表达式 // 中间的内容都会当作匹配字符来使用，而不是数据变量
    // 如果需要根据数据变量动态的创建正则表达式，则手动 new RegExp
    // RegExp 正则表达式构造函数
    //    参数1：匹配模式字符串，它会根据这个字符串创建正则对象
    //    参数2：匹配模式，要写到字符串中
    const reg = new RegExp(this.searchText, 'gi')
    return text.replace(reg, highlightStr)
}

2、调用 v-html="highlight(item)"：

<div slot="title" v-html="highLight(text)"></div>