Vue的cancelButtonText屬性用于設置模態(tài)框中取消按鈕的文本內容。默認情況下，取消按鈕的文本是“取消”，但是用戶可以使用cancelButtonText屬性來自定義取消按鈕的文本。

<template>
<div>
<el-button type="primary" @click="openModal">打開模態(tài)框</el-button>
<el-dialog
:title="title"
:visible.sync="dialogVisible"
:cancelButtonText="cancelText"
:confirmButtonText="confirmText"
@confirm="handleConfirm"
@close="handleClose">
<p><i>{{ message }}</i></p>
</el-dialog>
</div>
</template>
<script>
export default {
data() {
return {
title: '提示',
message: '您確定要刪除這條數據嗎？',
confirmText: '確定',
cancelText: '取消',
dialogVisible: false
};
},
methods: {
openModal() {
this.dialogVisible = true;
},
handleClose() {
this.dialogVisible = false;
},
handleConfirm() {
// 處理確認按鈕的業(yè)務邏輯
this.dialogVisible = false;
}
}
};
</script>

如上代碼所示，我們使用了ElmUI中的彈窗組件el-dialog來展示模態(tài)框，并且使用了cancelButtonText屬性來設置取消按鈕的文本內容。在data中我們定義了cancelText變量，并且將其綁定到了cancelButtonText屬性上。這樣當我們打開模態(tài)框時，取消按鈕的文本就會變成我們自定義的文本。

總結一下，Vue的cancelButtonText屬性可以方便地幫助我們自定義模態(tài)框中取消按鈕的文本內容，通過合理使用該屬性，我們可以增強用戶體驗，讓頁面更加友好。