解决element-plus + vue3 之el-popconfirm有一定几率不触发问题

别的不说，先上代码：

<el-tree
          class="filter-tree"
          :data="state.data"
          :props="state.treeProps"
          :filter-node-method="filterNode"
          ref="treeRef"
          node-key="sucNormCode"
          highlight-current
          @node-contextmenu="rightClick"
          @node-click="handleTreeNodeClick"
        >
        </el-tree>
        <div
          id="perTreeMenu"
          v-if="state.tmDisplay"
          class="tree_menu"
          :style="{ ...state.rightMenu }"
        >
          <ul>
            <li @click="addRule" v-if="state.showAddBtn">
              <i class="el-icon-plus"></i> 新增
            </li>
            <li @click="editRule" v-if="state.showEditBtn">
              <i class="el-icon-edit"></i> 编辑
            </li>
            <li v-if="state.showDelBtn">
              <el-popconfirm
                title="您确定删除吗？"
                confirm-button-text="确定"
                cancel-button-text="取消"
                icon="el-icon-info"
                icon-color="red"
                @confirm="deleteRule"
                @cancel="cancelPopconfirm"
              >
                <template #reference>

                  <el-button class="el-icon-delete"><span>删除</span></el-button>
                </template>
              </el-popconfirm>
            </li>
          </ul>
        </div>

如上代码所示，博主要实现一个功能，即tree组件的节点右键点击弹出一个操作菜单，包含新增、编辑、删除三个点击事件，并且只有删除才被包裹el-popconfirm组件里。

神奇的现象来了，当我使用i标签作为按钮时，有一定几率点击删除不弹出确认框，当我改成普通button，就变100%触发确认弹框，然后我又将button的type改成type="text"，又有小概率出现点击不出现弹框。

解决办法只能是改成实体button(非文本类button)，然后再改样式了。