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',title:'删除线'},
    {Choice:'.ql-blockquote',title:'块引用'},
    {Choice:'.ql-code-block',title:'插入代码段'},
    {Choice:'.ql-size',title:'字体大小'},
    {Choice:'.ql-list[value="ordered"]',title:'编号列表'},
    {Choice:'.ql-list[value="bullet"]',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-formula',title:'插入公式'},
    {Choice:'.ql-clean',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 .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:'两端对齐'}
],

接下来我们要做的就是给对应的图标添加提示属性，刚才已经把所有的类提取出来了，接下来我们来定位到该类，这里我们用document.querySelector()方法来找到对应的元素，即然上面是列表，那么我们就可以通过循环来实现就可以了。Choice是指定的选择元素，title是对应的提示信息，为了避免定位偏差（其他地方也用到相同的类名），加上父级类名quill-editor，这样就不会定位错了。

for(let item of this.toolbarTips){
    let tip = document.querySelector('.quill-editor '+ item.Choice)
    if (!tip) continue
    tip.setAttribute('title',item.title)
}

为了让其载入时就执行，所以我们定义个方法在mounted中，当元素载入完成后执行即可，这里我加了一个操作，把内容框中的提示信息给去掉了，document.getElementsByClassName('ql-editor')[0].dataset.placeholder=''。

注意事项：

这里for循环中用的是of不是in，他们的区别在于 for...in循环的是key，for...of循环的是value，我们需要的是 Choice后面的值所以这里我们用of来实现。

欢迎关注本人的公众号：编程手札，文章也会在公众号更新