Vue的組件庫中有一個(gè)叫做“Confirm框”的組件，可以用于在前端頁面上彈出一個(gè)確認(rèn)框，用于提示用戶進(jìn)行二次確認(rèn)操作。下面來看一下如何使用這個(gè)組件。

<template>
<div>
<button @click="confirmDelete">刪除</button>
<Confirm v-if="showConfirm"
:title="'確認(rèn)刪除？'"
:content="'此操作不可撤銷！'"
:confirmText="'刪除'"
:cancelText="'取消'"
@confirm="deleteItem"
@cancel="closeConfirm">
</Confirm>
</div>
</template>
<script>
import Confirm from '路徑/到/Confirm組件'
export default {
components: {
Confirm
},
data() {
return {
showConfirm: false,
itemToDelete: null
}
},
methods: {
confirmDelete(item) {
this.itemToDelete = item
this.showConfirm = true
},
deleteItem() {
// 發(fā)送刪除請(qǐng)求
// 成功后從列表中移除對(duì)應(yīng)項(xiàng)目
this.closeConfirm()
},
closeConfirm() {
this.showConfirm = false
this.itemToDelete = null
}
}
}
</script>

上面是Confirm框的示例代碼，具體來說，我們先在模板中使用button元素生成了一個(gè)按鈕，點(diǎn)擊它就會(huì)顯示Confirm框；然后在組件內(nèi)部使用了Confirm組件，其中title屬性表示框的標(biāo)題，content屬性表示框的內(nèi)容，confirmText和cancelText屬性分別表示確認(rèn)按鈕和取消按鈕的文本內(nèi)容；最后，還監(jiān)聽了confirm和cancel兩個(gè)事件，分別在點(diǎn)擊按鈕后執(zhí)行刪除操作或關(guān)閉對(duì)話框。

除此之外，還需要在樣式文件中對(duì)Confirm組件進(jìn)行樣式定義，以達(dá)到預(yù)期的外觀效果。