『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』 专栏，持续更新中
『未完待续』

---