- Element的最新版本(20年5月更新版本)中,添加了新控件:Popconfirm 气泡确认框,感觉使用与操作交互很方便和人性化,就毅然决然地选择使用了,然后问题就不出意外地来了…先看官方展示图:
2.13版本我提交到了github源码 ,element社区合并到主分支了
- 实现弹窗交互的事件,如图中的"确定"和"取消",否则这个控件就毫无用处
组件源码
<template>
<el-popover
v-bind="$attrs"
v-model="visible"
trigger="click"
>
<div class="el-popconfirm">
<p class="el-popconfirm__main">
<i
v-if="!hideIcon"
:class="icon"
class="el-popconfirm__icon"
:style="{color: iconColor}"
></i>
{{title}}
</p>
<div class="el-popconfirm__action">
<el-button
size="mini"
:type="cancelButtonType"
@click="cancel"
>
{{cancelButtonText}}
</el-button>
<el-button
size="mini"
:type="confirmButtonType"
@click="confirm"
>
{{confirmButtonText}}
</el-button>
</div>
</div>
<slot name="reference" slot="reference"></slot>
</el-popover>
</template>
<script>
import ElPopover from 'element-ui/packages/popover';
import ElButton from 'element-ui/packages/button';
import {t} from 'element-ui/src/locale';
export default {
name: 'ElPopconfirm',
props: {
title: {
type: String
},
confirmButtonText: {
type: String,
default: t('el.popconfirm.confirmButtonText')
},
cancelButtonText: {
type: String,
default: t('el.popconfirm.cancelButtonText')
},
confirmButtonType: {
type: String,
default: 'primary'
},
cancelButtonType: {
type: String,
default: 'text'
},
icon: {
type: String,
default: 'el-icon-question'
},
iconColor: {
type: String,
default: '#f90'
},
hideIcon: {
type: Boolean,
default: false
}
},
components: {
ElPopover,
ElButton
},
data() {
return {
visible: false
};
},
methods: {
confirm() {
this.visible = false;
this.$emit('onConfirm');
},
cancel() {
this.visible = false;
this.$emit('onCancel');
}
}
};
</script>
可以发现,源码和文档不一样,
所以需要改成下面这个样子的事件名称才能去执行事件
<el-popconfirm
title="确定删除吗?"
cancel-button-text="取消"
confirm-button-text="确定"
@onConfirm="rePushProduct(row.id)"
>
<el-button slot="reference" type="danger" size="mini" plain>删除</el-button>
</el-popconfirm>