[vue.js]不使用框架實現簡單的富文本功能，選中文字修改顏色

效果圖：

關於富文本的功能，目前只簡單實現了修改顏色，後續會持續更新，包括加粗、字體大小、下劃線等等功能。

<el-color-picker v-model="textcolor" @change="setparttextcolor"></el-color-picker>
<div style="-webkit-user-select: text" 
     @mouseup="handleselecttext"
     v-html="title"
>{{currentblockitem.title}}</div>

首先使用v-html把標籤的內容，轉化爲html的形式展現。

其次
-webkit-user-select: text
該屬性規定了文本可選中

最後，咱們監聽文本部分的鼠標擡起動做

handleselecttext() {
      this.replacetext = window.getSelection().toString();//獲取鼠標選中文本的內容
    },

setparttextcolor() {
      let title = this.title;
      let replaceReg = new RegExp(this.replacetext, "g");//定義匹配規則
      let replaceString =
        '<span style="color: ' + this.textcolor + ';">' + this.replacetext + "</span>";
      title = title.replace(replaceReg, replaceString);
      console.log(title);
    },

咱們使用正則表達式，匹配須要替換的文本內容，替換成拼接起來的html字符串，使用內聯的方式給文本添加樣式。
若是樣式多的話，可使用添加類的方式。

RegExp 對象

RegExp 對象用於規定在文本中檢索的內容。
(1)第一個參數是「正則表達式」

(2)第二個參數「修飾符」是一個可選的字符串，其值有 "g"、"i" 和 "m"，分別用於指定全局匹配、區分大小寫匹配和多行匹配。