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

总结

以上是生活随笔为你收集整理的042_Popconfirm气泡确认框的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。