quill⿏标悬浮出现提⽰_vue实战022：Vue-Quill-Editor⼯具栏
新增提⽰
今天来优化下Vue-Quill-Editor富⽂本编辑器，在编辑的⼯具栏中我们可以看到各式各样的图标，很多时候我们容易忘记图标对应的功能是
什么，所以这⾥我们为其添加⽂字提⽰，当我将⿏标放到图标上时显⽰对应的功能提⽰，这样体验会好很多，下⾯是演⽰图。
因为Vue-Quill-Editor是⼈家封装的组件，所以这⾥我们直接⽤JavaScript来处理，⾸先我们需要先获取到对应图标的类名，这⾥我们可以
通过浏览器中的开发者⼯具来查，打开开发者⼯具，选择对应的图标在Elements项中会⾃动跳转到对应的元素位置，到对应的类名，
这⾥我们可以看到“加粗”的类名为ql-bold。
通过此⽅法将所有的图标对应的类到，如果存在相同的⽐如列表，有编号列表和项⽬列表，但是类名ql-list相同，我们可以在添加其他属
性以⽰区别，如value值。然后我们将这些元素全放⼀个列表中，并给其指定对应的提⽰语，这样我们就得到如下的数据，把它放⼊data中
优秀的富文本编辑器等待调⽤。
toolbarTips: [ {Choice:'.ql-bold',title:'加粗'}, {Choice:'.ql-italic',title:'倾斜'}, {Choice:'.ql-underline',title:'下划线'}, {Choice:'.ql-header',title:'段落格式'}, {Choice:'.ql-strike
接下来我们要做的就是给对应的图标添加提⽰属性，刚才已经把所有的类提取出来了，接下来我们来定位到该类，这⾥我们⽤
document.querySelector()⽅法来到对应的元素，即然上⾯是列表，那么我们就可以通过循环来实现就可以了。Choice是指定的选择元素，title是对应的提⽰信息，为了避免定位偏差(其他地⽅也⽤到相同的类名)，加上⽗级类名quill-editor，这样就不会定位错了。
for(let item lbarTips){ let tip = document.querySelector('.quill-editor '+ item.Choice) if (!tip) continue tip.setAttribute('title',item.title)}
为了让其载⼊时就执⾏，所以我们定义个⽅法在mounted中，当元素载⼊完成后执⾏即可，这⾥我加了⼀个操作，把内容框中的提⽰信息给去掉了，ElementsByClassName('ql-editor')[0].dataset.placeholder=''。
注意事项：
这⾥for循环中⽤的是of不是in，他们的区别在于 in循环的是key，f循环的是value，我们需要的是 Choice后⾯的值所以这⾥我们⽤of来实现。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。