123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104 |
- <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>
|