1. 程式人生 > 實用技巧 >quill工具欄出現提示的功能

quill工具欄出現提示的功能

 <script scoped>
         // 標題
       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-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 .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:'兩端對齊'} ]; export default { data() { return{} } mounted() { autotip:{ document.getElementsByClassName('ql-editor')[0].dataset.placeholder='' for(let item of titleConfig){ let tip = document.querySelector('.quill-editor '+ item.Choice) if (!tip) continue tip.setAttribute('title',item.title) } } }, } </script>