高亮（支持特殊符号） 处理大数 自定义指令（获取焦点） 鼠标移入动画

高亮 支持特殊符号高亮

/**
 * 搜素关键字高亮
 * @param str 页面内容
 * @param target 匹配的关键词
 */
export const keywordlight = (str, target) => {
  // console.log(str, '高亮显示', target);
  if (str && target) {
    let string = target.replace(/[.[*?+^$|()/]|\]|\\/g, '\\$&')
    const reg = new RegExp(string,'ig')
    return str.replace(reg,`<span style='color:#1563E8;'>$&</span>`)

  } else {
    return str;
  }
};

高级高亮参考：juejin.cn/post/684490…

处理大数

const ajax = axios.create({
  baseURL: 'http://toutiao.itheima.net/', // 请求的基础路径
  transformResponse: [function (data) { // 对内容进行处理
    // data:就是本次请求获取的数据
    // 在这里可以对它进行进一步的处理 -- JSONbig
    // 后端返回数据可能不是 JSON 字符串，而JSONbig.parse()只能处理JSON字符串
    // 所以，为了保证代码可以正常执行，这里引入try-catch来捕获异常
    try {
      // 尝试着进行大数的处理
      return jsonBig.parse(data)
    } catch {
      // 大数处理失败时的后备方案
      return JSON.parse(data)
    }
  }]
})

封装自定义指令--获取焦点(input/textarea)

import Vue from 'vue'
// 插件对象(必须有install方法, 才可以注入到Vue.use中)
export default {
  install () {
    Vue.directive('fofo', {
      inserted (el) {
        if (el.nodeName === 'INPUT' || el.nodeName === 'TEXTAREA') {
          // 如果直接是input标签/textarea标签
          el.focus()
        } else {
          // 指令在van-search组件身上, 获取的是组件根标签div, 而input在标签内
          const inp = el.querySelector('input')
          const textArea = el.querySelector('textarea')
          // 如果找到了
          if (inp || textArea) {
            inp && inp.focus()
            textArea && textArea.focus()
          } else {
            // 本身也不是, 子标签里也没有
            console.error('请把v-fofo用在输入框标签上')
          }
        }
      }
    })
  }
}

鼠标移入动画

可作为公共组件封装 记得在vue.config.js中导入

// 鼠标经过上移阴影动画
.hoverShadow () {
  transition: all .5s;
  &:hover {
    transform: translate3d(0,-3px,0);
    box-shadow: 0 3px 8px rgba(0,0,0,0.2);
  }
}