独家新闻日记

巴宝利,学习软件,人均gdp-热爱考试,我们的热爱与众不同,让开始变简单

今日来优化下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来完成。

相关文章