VUE:quill富文字，滑鼠懸停時沒有提示

le.li發表於2024-11-23
VueUI
quill版本1.3.7

xxx.vue

VUE:quill富文字，滑鼠懸停時沒有提示 
<script>
export default {
  data() {
    return {
      tooltips: [
        { choice: '.ql-bold', title: '加粗' },
        { choice: '.ql-italic', title: '斜體' },
        { choice: '.ql-underline', title: '下劃線' },
        { choice: '.ql-header', title: '段落格式' },
        { choice: '.ql-strike', title: '刪除線' },
        { choice: '.ql-blockquote', title: '塊引用' },
        { choice: '.ql-code', title: '插入程式碼' },
        { choice: '.ql-code-block', title: '插入程式碼段' },
        { choice: '.ql-font', title: '字型' },
        { choice: '.ql-size', title: '字型大小' },
      ],
    }
  },
  mounted() {
    // 清空富文字預設值
    docuemnt.getElementsByClassName('.ql-toolbar')[0].placeholder = ''
    // 遍歷新增提示
    for (let item of this.tooltips) {
      let tip = document.querySelector('.ql-toolbar ' + item.choice)
      if (!tip) {
        continue
      }
      tip.setAttribute('title', item.title)
    }
  },
}
</script>
View Code

修改後效果

成功則跳過之後內容

如果不生效，需要檢查標籤之間的關係是否正確

瀏覽器F12，滑鼠左鍵點選最左側第一個帶滑鼠箭頭的圖示

在頁面中點選富文字外層元素

看到元素名稱 <div class="ql-toolbar ql-snow"...

執行

document.querySelector(".ql-toolbar")

獲取元素正常

再次點選帶滑鼠箭頭的圖示，點選頁面內工具欄B按鈕，可以看到class為.ql-bold

保證元素獲取都是正確的，檢查完程式碼再次嘗試吧。

js拼接時，注意querySelector時，外層class與內層class之間的空格

相關文章