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

怼烎@ 2022-09-16 14:14 232阅读 0赞

别的不说，先上代码：

<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)`，然后再改样式了。