You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
105 lines
2.0 KiB
Vue
105 lines
2.0 KiB
Vue
2 years ago
|
<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"
|
||
|
|
>
|
||
|
|
{{ displayCancelButtonText }}
|
||
|
|
</el-button>
|
||
|
|
<el-button
|
||
|
|
size="mini"
|
||
|
|
:type="confirmButtonType"
|
||
|
|
@click="confirm"
|
||
|
|
>
|
||
|
|
{{ displayConfirmButtonText }}
|
||
|
|
</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
|
||
|
|
},
|
||
|
|
cancelButtonText: {
|
||
|
|
type: String
|
||
|
|
},
|
||
|
|
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
|
||
|
|
};
|
||
|
|
},
|
||
|
|
computed: {
|
||
|
|
displayConfirmButtonText() {
|
||
|
|
return this.confirmButtonText || t('el.popconfirm.confirmButtonText');
|
||
|
|
},
|
||
|
|
displayCancelButtonText() {
|
||
|
|
return this.cancelButtonText || t('el.popconfirm.cancelButtonText');
|
||
|
|
}
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
confirm() {
|
||
|
|
this.visible = false;
|
||
|
|
this.$emit('confirm');
|
||
|
|
},
|
||
|
|
cancel() {
|
||
|
|
this.visible = false;
|
||
|
|
this.$emit('cancel');
|
||
|
|
}
|
||
|
|
}
|
||
|
|
};
|
||
|
|
</script>
|