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气泡确认框的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。