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气泡确认框相关推荐

Element-ui Popconfirm气泡确认框的确认及取消事件不生效
Element-ui 官方文档对 Popconfirm气泡确认框的一些属性及事件的描述不够详细,导致第一次使用时会遇到各种各样的问题对确定事件及取消事件描述如下: 但是如果给组件绑定@confirm ...
饿了么UI/element Popconfirm气泡确认框 confirm事件
本文:饿了么UI/element Popconfirm气泡确认框 confirm/cancel事件饿了么官网说: 属性Attributes 参数说明类型可选值默认值 title 标题 Str ...
【表格操作栏删除确认弹出框 Popconfirm 气泡确认框变形，导致确认和取消不在同一行】
vben admin 中表格操作栏删除确认弹出框 Popconfirm 气泡确认框变形,导致确认和取消按钮不在同一行如图: 原因:因弹出框默认顶部弹出,又在页面边上受到挤压导致,更改弹出方向可解决 ...
修改elementUI的el-popconfirm 气泡确认框样式不起效果
问题描述在控制台上能够修改宽高度,把该元素拿来放在源文件中不能起效果: 修改前: 修改后: 解决思路 1.元素没有取对(其实一般改这种官方组件,不是写一长串的类名,以及深度处理器:相反它反而很简单, ...
element ui的气泡确认框点击确定没反应的问题
官网解释但是我们加上此点击事件后, 点击确定并没有执行相对应的方式正确方式 @onConfirm定义事件,而不是@confirm
如何使用Bootstrap4和ES6创建自定义确认框
by Prashant Yadav 通过Prashant Yadav 如何使用Bootstrap4和ES6创建自定义确认框 (How to create a custom confirm box wi ...
Arc Engine 中添加气泡提示框
一.在ArcMap中的定位操作已知若干点的经纬度坐标,要求在地图中进行定位: 1.通过Tool >Add X Y data 定位点,注意选择地理坐标系下的wgs 1984坐标系: 2.定位后的 ...
JavaScript 中创建三种消息框：警告框、确认框、提示框
警告框警告框经常用于确保用户可以得到某些信息. 当警告框出现后,用户需要点击确定按钮才能继续进行操作. alert("文本") 确认框确认框用于使用户可以验证或者接受某些信息. ...
php删除记录前的判断弹窗,thinkPHP删除前弹出确认框的简单实现方法
这篇文章主要介绍了thinkPHP删除前弹出确认框的简单实现方法,结合实例形式分析了thinkPHP前台HTML部分结合js控制弹出框效果,以及后台控制器的删除数据处理功能,需要的朋友可以参考下本文 ...

042_Popconfirm气泡确认框

042_Popconfirm气泡确认框相关推荐

最新文章

热门文章