欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Vue 實現(xiàn)對quill-editor組件中的工具欄添加title

 更新時間:2020年08月03日 09:57:46   作者:汪小穆  
這篇文章主要介紹了Vue 實現(xiàn)對quill-editor組件中的工具欄添加title,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧

前言:quill-editor組件中的工具欄都是英文,而且最難受的時沒有title提示,要怎樣給他添加title,并且是中文的title提示呢?

一、創(chuàng)建一個quill-title.js文件

①、在其中插入以下代碼

const titleConfig = {
 'ql-bold':'加粗',
 'ql-color':'顏色',
 'ql-font':'字體',
 'ql-code':'插入代碼',
 'ql-italic':'斜體',
 'ql-link':'添加鏈接',
 'ql-background':'背景顏色',
 'ql-size':'字體大小',
 'ql-strike':'刪除線',
 'ql-script':'上標(biāo)/下標(biāo)',
 'ql-underline':'下劃線',
 'ql-blockquote':'引用',
 'ql-header':'標(biāo)題',
 'ql-indent':'縮進',
 'ql-list':'列表',
 'ql-align':'文本對齊',
 'ql-direction':'文本方向',
 'ql-code-block':'代碼塊',
 'ql-formula':'公式',
 'ql-image':'圖片',
 'ql-video':'視頻',
 'ql-clean':'清除字體樣式'
};
 
export function addQuillTitle(){
 const oToolBar = document.querySelector('.ql-toolbar'),
    aButton = oToolBar.querySelectorAll('button'),
    aSelect = oToolBar.querySelectorAll('select');
 aButton.forEach(function(item){
  if(item.className === 'ql-script'){
   item.value === 'sub' ? item.title = '下標(biāo)': item.title = '上標(biāo)';
  }else if(item.className === 'ql-indent'){
   item.value === '+1' ? item.title ='向右縮進': item.title ='向左縮進';
  }else{
   item.title = titleConfig[item.classList[0]];
  }
 });
 aSelect.forEach(function(item){
  item.parentNode.title = titleConfig[item.classList[0]];
 });
}

②、在頁面中應(yīng)用

<template>
 <quill-editor v-model="content" >
 </quill-editor>
</template>
 
<script>
 
 import { quillEditor } from 'vue-quill-editor'
 import { addQuillTitle } from './quill-title.js'
 
 export default {
  components: {
   quillEditor
  },
  mounted(){
   addQuillTitle();
  },
  data() {
   return {
    content: '<h2>freddy</h2>',
   }
  }
 }
</script>

③、運行結(jié)果

像這樣鼠標(biāo)移入的時候就會顯示title了。

補充知識:自定義設(shè)置vue-quill-editor toolbar的title屬性

直接看代碼吧~

const titleConfig = {
 'ql-bold':'加粗',
 'ql-color':'字體顏色',
 'ql-font':'字體',
 'ql-code':'插入代碼',
 'ql-italic':'斜體',
 'ql-link':'添加鏈接',
 'ql-background':'背景顏色',
 'ql-size':'字體大小',
 'ql-strike':'刪除線',
 'ql-script':'上標(biāo)/下標(biāo)',
 'ql-underline':'下劃線',
 'ql-blockquote':'引用',
 'ql-header':'標(biāo)題',
 'ql-indent':'縮進',
 'ql-list':'列表',
 'ql-align':'文本對齊',
 'ql-direction':'文本方向',
 'ql-code-block':'代碼塊',
 'ql-formula':'公式',
 'ql-image':'圖片',
 'ql-video':'視頻',
 'ql-clean':'清除字體樣式'
};

export function addQuillTitle(){
 const oToolBar = document.querySelector('.ql-toolbar'),
    aButton = oToolBar.querySelectorAll('button'),
    aSelect = oToolBar.querySelectorAll('select'),
    aSpan= oToolBar.querySelectorAll('span');
 aButton.forEach((item)=>{
  if(item.className === 'ql-script'){
   item.value === 'sub' ? item.title = '下標(biāo)': item.title = '上標(biāo)';
  }else if(item.className === 'ql-indent'){
   item.value === '+1' ? item.title ='向右縮進': item.title ='向左縮進';
  }else if(item.className === 'ql-list'){
	 item.value==='ordered' ? item.title='有序列表' : item.title='無序列表'
	}else if(item.className === 'ql-header'){
	 item.value === '1' ? item.title = '標(biāo)題H1': item.title = '標(biāo)題H2';
	}else{
   item.title = titleConfig[item.classList[0]];
  }
 });
 aSelect.forEach((item)=>{
  if(item.className!='ql-color'&&item.className!='ql-background'){
   item.parentNode.title = titleConfig[item.classList[0]];
  }
 });
 aSpan.forEach((item)=>{
  if(item.classList[0]==='ql-color'){
   item.title = titleConfig[item.classList[0]];
  }else if(item.classList[0]==='ql-background'){
   item.title = titleConfig[item.classList[0]];
  }
 });
}

//how to use
//import { addQuillTitle } from './set-quill-title.js'
//addQuillTitle();   --use in mouted
//自定義 set title

以上這篇Vue 實現(xiàn)對quill-editor組件中的工具欄添加title就是小編分享給大家的全部內(nèi)容了,希望能給大家一個參考,也希望大家多多支持腳本之家。

相關(guān)文章

  • Vue 2.0學(xué)習(xí)筆記之使用$refs訪問Vue中的DOM

    Vue 2.0學(xué)習(xí)筆記之使用$refs訪問Vue中的DOM

    這篇文章主要介紹了Vue 2.0學(xué)習(xí)筆記之使用$refs訪問Vue中的DOM,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2017-12-12
  • vue中formdata傳值給后臺時參數(shù)為空的問題

    vue中formdata傳值給后臺時參數(shù)為空的問題

    這篇文章主要介紹了vue中formdata傳值給后臺時參數(shù)為空的問題,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-06-06
  • vue實現(xiàn)跨域的方法分析

    vue實現(xiàn)跨域的方法分析

    這篇文章主要介紹了vue實現(xiàn)跨域的方法,結(jié)合實例形式分析了vue.js跨域的原理與相關(guān)實現(xiàn)技巧,需要的朋友可以參考下
    2019-05-05
  • Vue中虛擬列表的原理與實現(xiàn)詳解

    Vue中虛擬列表的原理與實現(xiàn)詳解

    虛擬列表是一種技術(shù),它只渲染用戶當(dāng)前可見的列表項,而不是渲染整個列表,這篇文章主要來和大家聊聊虛擬列表的原理與實現(xiàn),希望對大家有所幫助
    2023-05-05
  • Vue3封裝localStorage基本使用示例詳解

    Vue3封裝localStorage基本使用示例詳解

    localStorage 和 sessionStorage 屬性允許在瀏覽器中存儲 key/value 對的數(shù)據(jù),localStorage 用于長久保存整個網(wǎng)站的數(shù)據(jù),保存的數(shù)據(jù)沒有過期時間,直到手動去刪除,本文給大家介紹Vue3封裝localStorage-基本使用,感興趣的朋友一起看看吧
    2023-12-12
  • Vue中的event對象介紹

    Vue中的event對象介紹

    這篇文章介紹了Vue中的event對象,文中通過示例代碼介紹的非常詳細。對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2022-03-03
  • VuePress 靜態(tài)網(wǎng)站生成方法步驟

    VuePress 靜態(tài)網(wǎng)站生成方法步驟

    這篇文章主要介紹了VuePress 靜態(tài)網(wǎng)站生成方法步驟,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2019-02-02
  • 詳解Vue 2.0封裝axios筆記

    詳解Vue 2.0封裝axios筆記

    本篇文章主要介紹了詳解Vue 2.0封裝axios筆記,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2017-06-06
  • vue實現(xiàn)路由切換改變title功能

    vue實現(xiàn)路由切換改變title功能

    這篇文章主要介紹了vue實現(xiàn)路由切換改變title功能,本文通過實例代碼給大家介紹的非常詳細,具有一定的參考借鑒價值 ,需要的朋友可以參考下
    2019-05-05
  • vue防止花括號{{}}閃爍v-text和v-html、v-cloak用法示例

    vue防止花括號{{}}閃爍v-text和v-html、v-cloak用法示例

    這篇文章主要介紹了vue防止花括號{{}}閃爍v-text和v-html、v-cloak用法,結(jié)合實例形式分析了vue.js使用v-text和v-html、v-cloak防止花括號{{}}閃爍的解決方法,需要的朋友可以參考下
    2019-03-03

最新評論