全局搜索功能

87 阅读1分钟

全局导航栏,需要有一个全局搜索功能

在main.js里vue原型中定义一个顶部搜索栏中的搜索时间与各页面联动的对象,search+路由名称为key,加载数据方法为value

导入各页面的methods中的load方法

Vue.prototype.$search = {

  search部门列表: departmentListMoudle.methods.load,
  
  search查询结果: searchResult.methods.load,
  
  search个人办事: personalService.methods.load,
  
};

顶部搜索栏中:

顶部搜索栏中的搜索时间与各页面联动的事件

search() {

  sessionStorage.setItem('searchText', this.inputValue);
  
  this.$emit('changeSearch', this.inputValue);
  
  let search = this.$search;
  
  //meta携带title
  
  let key = 'search' + this.$route.meta.title;
  
  if (Object.prototype.hasOwnProperty.call(search, key)) {
   
    search[key](this.inputValue);//从全局的$search中匹配到对应方法,进行查询
  }

},