[Vue.js] 搜尋關鍵字與標注(mark, highlight)功能

分享:
標籤: Vue.js javascript

這是一個功能需求,就是要在搜尋關鍵字的時候直接在頁面上標註(mark, highlight) 搜尋的關鍵字出來,這邊用 Vue.js 示範給大家看一下。

首先我有用到這隻 plugin:mark.js

再把他讀入後,官網上寫的 mark 的方法如下:

var context = document.querySelector(".context");
var instance = new Mark(context);
instance.mark(keyword [, options]);

 

記得要在 css 加上樣式:

mark{
    background: orange;
    color: black;
}

 

 

我把它改成用 vue 的方法寫:

data() {
    return {
      html: '內容 ',
      search: '關鍵字',
      context: null
    }
  },
  watch:{
    search: function(val){
      var instance = new Mark(this.context);
      instance.mark(val);
    }
  },
  mounted(){
    this.context=document.querySelector(".context");
  }

 

因為他的 mark 不會自動取消,所以我們要加上 unmark():

instance.unmark();

 

完整的 code 如下:

 

只是這邊我沒有做初使的設定,有需要的再自己改一下吧。