vue + element 中對同一個頁面多個富文本插件vue-quill-editor的使用

今天是2020年2月1日，受疫情的影響，今天是延遲上班的次日，趁這個空閒學習一下vue + element。
安裝用的這位同窗寫的，我以爲寫的挺好的。

這個是我整個頁面的代碼，

<template>
  <div class="content">
    <commonHeader></commonHeader>

    <el-tabs v-model="activeName" @tab-click="handleClick" class="common-tab">
      <el-tab-pane label="嚮導頁面設置" name="one">
        <h4>嚮導頁面設置</h4>
        <div class="edit_container">
          <quill-editor
            v-model="content0"
            ref="myQuillEditor"
            :options="editorOption"
            @blur="onEditorBlur($event)"
            @focus="onEditorFocus($event)"
            @change="onEditorChange($event)"
          ></quill-editor>
          <el-col :span="20" class="btns">
            <el-button type="primary" @click="saveHtml(0)">保存</el-button>
            <el-button type="success">取消</el-button>
          </el-col>
        </div>


        <div class="edit_container">
          <quill-editor
            v-model="content1"
            ref="myQuillEditor"
            :options="editorOption"
            @blur="onEditorBlur($event)"
            @focus="onEditorFocus($event)"
            @change="onEditorChange($event)"
          ></quill-editor>
          <!-- <button v-on:click="saveHtml">保存</button> -->
          <el-col :span="20" class="btns">
            <el-button type="primary" @click="saveHtml(1)">保存</el-button>
            <el-button type="success">取消</el-button>
          </el-col>
        </div>


      </el-tab-pane>
      <el-tab-pane label="防僞查詢頁面設置" name="two">防僞查詢頁面設置</el-tab-pane>
      <el-tab-pane label="防僞查詢頁面結果頁面設置" name="three">防僞查詢頁面結果頁面設置</el-tab-pane>
      <el-tab-pane label="兩步出結果頁面設置" name="four">兩步出結果頁面設置</el-tab-pane>

    </el-tabs>
  </div>
</template>
  
  
  <script>
import commonHeader from "../../components/header";
export default {
  name: "mobileAntiFake",
  components: {
    commonHeader
  },
  data() {
    return {
      // tab標題默認高亮
      activeName: "one",
      content0: `<p>請編輯內容00</p>`,
      content1: `<p>請編輯內容11</p>`,
      editorOption: {
        theme: "snow"
      }
    };
  },

  computed: {
    editor() {
      return this.$refs.myQuillEditor.quill;
    }
  },

  created() {},

  methods: {
    handleClick(tab, event) {
      console.log(tab, "tab");
      console.log(event, "event");
    },

    onEditorReady(editor) {
      // 準備編輯器
    },
    onEditorBlur() {}, // 失去焦點事件
    onEditorFocus() {}, // 得到焦點事件
    onEditorChange() {}, // 內容改變事件
    saveHtml: function(id) {
      alert(this["content" + id]);
    }
  }
};
</script>
  
  
<style scoped lang="scss">
.layui-form1 {
  border: 2px solid #ccc;
  padding-left: 44px;
  padding-right: 44px;
  padding-top: 20px;
  padding-bottom: 30px;
  margin-bottom: 40px;
}
/deep/ {
  .ql-editor {
    height: 100px;
  }
}

h4 {
  font-size: 16px;
  color: #333333;
  margin-bottom: 20px;
  font-weight: normal;
}

.btns {
  margin-top: 20px;
  float: none;
}


</style>

頁面長這樣

主要原理給quill-editor的v-model設置不一樣，而且能經過this["content" + id]獲取到對應富文本的內容。

上面就是我總結的一個頁面內使用多個vue-quill-editor的內容，我也是剛學習vue + element，多多少少會有一些紕漏，歡迎朋友指出問題，謝謝。
再困難的日子咬緊牙關會過去的，武漢加油，中國加油！