042_Popconfirm气泡确认框

1. Popconfirm气泡确认框

1.1. 点击元素, 弹出气泡确认框。Popconfirm的属性与Popover很类似, 因此对于重复属性, 请参考Popover的文档。

1.2. Attributes

参数	说明	类型	可选值	默认值
title	标题	String	无	无
confirm-button-text	确认按钮文字	String	无	无
cancel-button-text	取消按钮文字	String	无	无
confirm-button-type	确认按钮类型	String	无	Primary
cancel-button-type	取消按钮类型	String	无	Text
icon	Icon	String	无	el-icon-question
icon-color	Icon颜色	String	无	#f90
hide-icon	是否隐藏Icon	Boolean	无	false

1.3. Slot

Name	说明
reference	触发Popconfirm显示的HTML元素

1.4. Events

事件名称	说明	回调参数
confirm	点击确认按钮时触发	无
cancel	点击取消按钮时触发	无

2. Popconfirm气泡确认框例子

2.1. 使用脚手架新建一个名为element-ui-popconfirm的前端项目, 同时安装Element插件。

2.2. 编辑index.js 

import Vue from 'vue'
import VueRouter from 'vue-router'
import Popconfirm from '../components/Popconfirm.vue'
import MyselfPopconfirm from '../components/MyselfPopconfirm.vue'

Vue.use(VueRouter)

const routes = [
  { path: '/', redirect: '/Popconfirm' },
  { path: '/Popconfirm', component: Popconfirm },
  { path: '/MyselfPopconfirm', component: MyselfPopconfirm }
]

const router = new VueRouter({
  routes
})

export default router

2.3. 在components下创建Popconfirm.vue

<template>
  <div>
    <h1>基础用法</h1>
    <h4>在Popconfirm中, 只有title属性可用, content属性不会被展示。</h4>
    <el-popconfirm title="这是一段内容确定删除吗?">
      <el-button slot="reference">删除</el-button>
    </el-popconfirm>
  </div>
</template>

2.4. 在components下创建MyselfPopconfirm.vue

<template>
  <div>
    <h1>自定义</h1>
    <h4>confirm-button-text确认按钮文字。cancel-button-text取消按钮文字。icon-color属性设置Icon的颜色。</h4>
    <el-popconfirm confirm-button-text='好的' cancel-button-text='不用了' icon="el-icon-info" icon-color="red" title="这是一段内容确定删除吗?">
      <el-button slot="reference">删除</el-button>
    </el-popconfirm>
  </div>
</template>

2.5. 运行项目, 访问http://localhost:8080/#/Popconfirm

2.6. 运行项目, 访问http://localhost:8080/#/MyselfPopconfirm