今天我们来封装一个很简单，但是又非常好用的组件

利用element-ui的Popover 弹出框组件，来进行封装，做出一个删除确认提示组件

效果图

在我的上传组件中就有用到这个组件

源码

<template>
    <div style="display: inline-block;">
        <el-popover
                ref="popover"
                :placement="placement"
                :width="width"
                v-model="visible">
            <p style="padding: 8px 8px 16px 8px"><slot name="message">确定要删除吗？</slot></p>
            <div style="text-align: center; margin: 0">
                <el-button size="mini" plain    @click="handlerCancel">取消</el-button>
                <el-button size="mini" type="primary"  @click="handlerOk">确定</el-button>
            </div>
        </el-popover>
        <span  v-popover:popover>
        <slot>
            <el-button :size="size" :type="type"><slot name="text">删除</slot></el-button>
        </slot>
        </span>
    </div>
</template>
    
<script>
    export default {
        props:{
            size: {
                type: String,
            },
            type:{
                type: String,
            },
            placement:{
                type: String,
                default: 'top'
            },
            width:{
                type: String,
                default: '160'
            }
        },
        data() {
            return {
                visible: false,
            };
        },
        methods:{
            handlerCancel(){
                this.visible = false;
                this.$emit('cancel');
            },
            handlerOk(){
                this.visible = false;

                this.$emit('confirm');
            },
        },
    }
</script>
复制代码

从源码中可以看到，总共有4个popos可配置属性定义

size: 按钮大小，参照element本身的按钮size值
type：按钮类型，参照element本身的按钮type值
placement：popover弹出框的位置，参考参照element
popover本身的placement属性值
width：popover弹出层的宽度，默认160（px）

事件

组件提供了两个事件，使用vue的$emit()方法发出事件，由组件外部监听 cancel：当点击取消时触发 confirm：当点击确认是触发

使用样例

<h3  class="p10 c-blue">简单例子</h3>
    <popover-delete @cancel="handlerCancel"
        @confirm="handerConfirm"></popover-delete>
</div>
<h3  class="p10 c-blue">删除按钮样式大小</h3>
    <popover-delete @cancel="handlerCancel"
        @confirm="handerConfirm"
        size="mini"
        type="primary"></popover-delete>
        
    <popover-delete @cancel="handlerCancel"
        @confirm="handerConfirm"
        size="small"
        type="danger"></popover-delete>
        
    <popover-delete @cancel="handlerCancel"
        @confirm="handerConfirm"
        size="medium"
        type="warning"></popover-delete>
        
 <h3  class="p10 c-blue">利用slot自定义删除按钮</h3>
    <popover-delete @cancel="handlerCancel"
        @confirm="handerConfirm">
         <a>删除</a>
    </popover-delete> 
    
复制代码