zoukankan      html  css  js  c++  java
  • 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>

     注意:let tip = document.querySelector('.quill-editor '+ item.Choice)这一行中的‘.quill-editor ’引号里后面有一个空格,如果把空格删掉,这段代码就不生效了。

  • 相关阅读:
    Shell特殊变量:Shell $0, $#, $*, $@, $?, $$和命令行参数
    linux命令学习7-jstat命令
    linux命令学习6-dpkg命令
    PSSH 批量管理服务器
    堆排序 (Heap Sort)
    极客时间-左耳听风-程序员攻略-程序员修养
    应急响应-GHO提取注册表快照
    nc替代技术方案
    从无文件技术到使用隐写术:检查Powload的演变
    CVE-2019-0797漏洞:Windows操作系统中的新零日在攻击中被利用
  • 原文地址:https://www.cnblogs.com/meiyanstar/p/13346355.html
Copyright © 2011-2022 走看看