el-Popconfirm 气泡确认框添加属性width无效。使用popper-class自定义样式

₍•ʚ•₎呀呀

已于 2023-03-30 15:07:33 修改

阅读量488

点赞数 1

分类专栏： element-plus 文章标签：前端 javascript vue.js

于 2023-03-20 17:31:15 首次发布

本文链接：https://blog.csdn.net/weixin_60886885/article/details/129672162

版权

element-plus 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

该文章展示了如何使用HTML和SCSS来定制一个`el-popconfirm`组件，用于实现确认删除功能。组件包含了确认和取消按钮，点击触发`handleDeleteRuleItem`函数，取消则调用`cancelEvent`。关键在于通过添加唯一的类名`delete-popconfirm`来限制样式的影响范围，并调整了弹出框的尺寸、字体大小以及按钮的间距。

摘要由CSDN通过智能技术生成

html结构

<el-popconfirm title="确认删除？" popper-class="delete-popconfirm" confirm-button-text="确认" cancel-button-text="取消" @confirm="handleDeleteRuleItem(scope.row.ItemId)" @cancel="cancelEvent">
                    <template #reference>
                      <app-svg-icon icon-name="report-delete" class="w-18 h-18 cursor-pointer" />
                    </template>
</el-popconfirm>

样式需要在非scope区域才会生效注意添加唯一父节点，以免影响其他页面

<style lang="scss">
.delete-popconfirm{
  width: 180px !important;
  height: 70px !important;
.el-popper{
  font-size: 13px;
  height: 60px;
}
.el-popconfirm__main{
  height: 25px!important;
  margin-bottom:3px
}
.el-popconfirm__action{
  margin-bottom:3px;
  margin:-4px
}
}

</style>