vue-quill-editor 自定义下拉菜单

1、工具栏定义下拉菜单

      toolbar: {
            container: [
              [{congruent:["similar","congruent", "circle", "delta"]}]//工具栏设置下拉菜单
            ],
            handlers: {
              congruent:(el)=>{//下拉菜单的回调 这个方法名和上面数组前面的参数名的一样
                  switch(el){
				     case "similar":
				        this.insertSimilar();//点击每一个下拉项需要执行的vue方法
				        break;
				    case "congruent":
				        this.insertCongruent();
				        break;
				    case "circle":
				        this.insertCircle();
				        break;
				    case "delta":
				        this.insertDelta();
				        break;
				  }
              }
            },
          },

2、工具栏显示图标
第一活的图标样式

<style>
.math_label:before{content: attr(data-beforeData);}
</style>

渲染图标

<style>
   let sourceEditorButton = document.querySelector(".ql-congruent");
    sourceEditorButton.style.width="50px"
    sourceEditorButton.style.margin="5px 0 0 0 "
    sourceEditorButton.children[0].classList.add("math_label");//样式里面选中的活得的标识 后期依据选中不同修改他
sourceEditorButton.children[0].setAttribute('data-beforeData','数');//修改就是句 后期也是这句 后期就不重复了
console.log(sourceEditorButton.children[1].children)
for (const item of sourceEditorButton.children[1].children) {//下拉里面的样式
  item.classList.add("jjgj_iconfont");
  switch(item.getAttribute('data-value')){
     case "similar":
        item.classList.add("icon_xieti1");
        break;
    case "congruent":
         item.classList.add("icon_quandeng");
        break;
    case "circle":
         item.classList.add("icon_yuan");
        break;
    case "delta":
         item.classList.add("icon_delta");
        break;
  }
}
</style>