『VUE』vue-quill-editor富文本编辑器添加按钮houver提示（详细图文注释）

---

欢迎关注 『VUE』 专栏，持续更新中
欢迎关注 『VUE』 专栏，持续更新中

预览效果

---

新建一个config.js存放标题

export const titleConfig = [
  { 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: '字体大小' },
  { Choice: '.ql-list[value="ordered"]', title: '编号列表' },
  { Choice: '.ql-list[value="bullet"]', title: '项目列表' },
  { Choice: '.ql-direction', title: '文本方向' },
  { Choice: '.ql-header[value="1"]', title: 'h1标题' },
  { Choice: '.ql-header[value="2"]', title: 'h2标题' },
  { Choice: '.ql-align', title: '对齐方式' },
  { Choice: '.ql-color', title: '字体颜色' },
  { Choice: '.ql-background', title: '背景颜色' },
  { Choice: '.ql-image', title: '图像' },
  { Choice: '.ql-video', title: '视频' },
  { Choice: '.ql-link', title: '添加链接' },
  { Choice: '.ql-table', title: '添加表格' },
  { Choice: '.ql-formula', title: '插入公式' },
  { Choice: '.ql-clean', title: '清除字体格式' },
  { Choice: '.ql-script[value="sub"]', title: '下标' },
  { Choice: '.ql-script[value="super"]', title: '上标' },
  { Choice: '.ql-indent[value="-1"]', title: '向左缩进' },
  { Choice: '.ql-indent[value="+1"]', title: '向右缩进' },
  { Choice: '.ql-header .ql-picker-label', title: '标题大小' },
  { Choice: '.ql-header .ql-picker-item[data-value="1"]', title: '标题一' },
  { Choice: '.ql-header .ql-picker-item[data-value="2"]', title: '标题二' },
  { Choice: '.ql-header .ql-picker-item[data-value="3"]', title: '标题三' },
  { Choice: '.ql-header .ql-picker-item[data-value="4"]', title: '标题四' },
  { Choice: '.ql-header .ql-picker-item[data-value="5"]', title: '标题五' },
  { Choice: '.ql-header .ql-picker-item[data-value="6"]', title: '标题六' },
  { Choice: '.ql-header .ql-picker-item:last-child', title: '标准' },
  { Choice: '.ql-size .ql-picker-item[data-value="small"]', title: '小号' },
  { Choice: '.ql-size .ql-picker-item[data-value="large"]', title: '大号' },
  { Choice: '.ql-size .ql-picker-item[data-value="huge"]', title: '超大号' },
  { Choice: '.ql-size .ql-picker-item:nth-child(2)', title: '标准' },
  { Choice: '.ql-align', title: '文本对齐' },
  { Choice: '.ql-align .ql-picker-item:first-child', title: '居左对齐' },
  { Choice: '.ql-align .ql-picker-item[data-value="center"]', title: '居中对齐' },
  { Choice: '.ql-align .ql-picker-item[data-value="right"]', title: '居右对齐' },
  { Choice: '.ql-align .ql-picker-item[data-value="justify"]', title: '两端对齐' }
]

---

编写添加提示的方法

<script>
import {titleConfig} from "@/const/setting/config";

methods: {
    addQuillTitle() {
      // 如果你只有单个vue-quill-editor 可以用这段注释的代码
      // for (let item of titleConfig) {
      //   let tip = document.querySelector(item.Choice)
      //   // if (!tip) continue
      //   console.warn(tip)
      //   console.warn(item.Choice)
      //   tip.setAttribute('title', item.title)
      // }
      
	  // 如果你有多个vue-quill-editor,querySelectorAll遍历给每一个都加上标题
      for (let item of titleConfig) {
        let tips = document.querySelectorAll(item.Choice); // 获取所有匹配的元素
        tips.forEach((tip) => {  // 遍历每个元素
          console.warn(tip);
          console.warn(item.Choice);
          tip.setAttribute('title', item.title);  // 设置 title 属性
        });
      }
    },

调用添加标题方法的生命周期

前面的步骤和网上的大同小异,就是加了一个多个组件的遍历,这一步才是关键

网上都是mounted()中直接调用this.addQuillTitle(),但是我发现不起作用,可能是因为我是组件封装了vue-quill-editor,加载慢了,所以要演示等待才能等dom渲染出来?反正加上了延时就能在mouted中添加上了.

我后来发现用update也行,这个时候dom肯定渲染好了

mounted() {
   // setTimeout(()=>{
   //   this.addQuillTitle()
   // },1000)
 },
updated() {
   this.addQuillTitle()
},

---

总结

大家喜欢的话，给个👍，点个关注！给大家分享更多计算机专业学生的求学之路！

版权声明：

发现你走远了@mzh原创作品，转载必须标注原文链接

Copyright 2024 mzh

Crated：2024-3-1

欢迎关注 『VUE』 专栏，持续更新中
欢迎关注 『VUE』 专栏，持续更新中
『未完待续』

---