javascript/element-plus
1
0
Fork 0
mirror of https://github.com/element-plus/element-plus.git synced 2026-03-13 07:51:17 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(docs): MessageBox code for composition (#2249)

Browse Source 
Co-authored-by: 无星 <32910694@qq.com>
This commit is contained in:
Xing.Wu
2021-06-19 02:26:24 +08:00
committed by GitHub
parent 115292f93e
commit d7c7e86955
5 changed files with 1275 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

252
website/docs/en-US/message-box.md
View File

@@ -33,6 +33,35 @@ Alert interrupts user operation until the user confirms.
}
}
</script>
<!--
<setup>
import { defineComponent } from 'vue';
import { ElMessageBox } from 'element-plus';
export default defineComponent({
setup() {
const open = () => {
ElMessageBox.alert('This is a message', 'Title', {
confirmButtonText: 'OK',
callback: (action) => {
this.$message({
type: 'info',
message: `action: ${action}`,
});
},
});
};
return {
open,
};
},
});
</setup>
-->
```
:::
@@ -70,6 +99,43 @@ Confirm is used to ask users' confirmation.
}
}
</script>
<!--
<setup>
import { defineComponent } from 'vue';
import { ElMessageBox } from 'element-plus';
import { ElMessage } from 'element-plus';
export default defineComponent({
setup() {
const open = () => {
ElMessageBox.confirm('proxy will permanently delete the file. Continue?', 'Warning', {
confirmButtonText: 'OK',
cancelButtonText: 'Cancel',
type: 'warning',
}).then(() => {
ElMessage({
type: 'success',
message: 'Delete completed',
});
}).catch(() => {
ElMessage({
type: 'info',
message: 'Delete canceled',
});
});
};
return {
open,
};
},
});
</setup>
-->
```
:::
@@ -109,6 +175,44 @@ Prompt is used when user input is required.
}
}
</script>
<!--
<setup>
import { defineComponent } from 'vue';
import { ElMessageBox } from 'element-plus';
import { ElMessage } from 'element-plus';
export default defineComponent({
setup() {
const open = () => {
ElMessageBox.prompt('Please input your e-mail', 'Tip', {
confirmButtonText: 'OK',
cancelButtonText: 'Cancel',
inputPattern: /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/,
inputErrorMessage: 'Invalid Email',
})
.then(({ value }) => {
ElMessage({
type: 'success',
message: `Your email is:${value}`,
});
})
.catch(() => {
ElMessage({
type: 'info',
message: 'Input canceled',
});
});
};
return {
open,
};
},
});
</setup>
-->
```
:::
@@ -162,6 +266,55 @@ Can be customized to show various content.
}
}
</script>
<!--
<setup>
import { defineComponent, h } from 'vue';
import { ElMessage } from 'element-plus';
export default defineComponent({
setup() {
const open = () => {
ElMessageBox({
title: 'Message',
message: h('p', null, [
h('span', null, 'Message can be '),
h('i', { style: 'color: teal' }, 'VNode'),
]),
showCancelButton: true,
confirmButtonText: 'OK',
cancelButtonText: 'Cancel',
beforeClose: (action, instance, done) => {
if (action === 'confirm') {
instance.confirmButtonLoading = true;
instance.confirmButtonText = 'Loading...';
setTimeout(() => {
done();
setTimeout(() => {
instance.confirmButtonLoading = false;
}, 300);
}, 3000);
} else {
done();
}
},
}).then((action) => {
ElMessage({
type: 'info',
message: `action: ${action}`,
});
});
};
return {
open,
};
},
});
</setup>
-->
```
:::
@@ -191,6 +344,29 @@ The content of MessageBox can be `VNode`, allowing us to pass custom components.
}
}
</script>
<!--
<setup>
import { defineComponent } from 'vue';
import { ElMessageBox } from 'element-plus';
export default defineComponent({
setup() {
const open = () => {
ElMessageBox.alert('<strong>proxy is <i>HTML</i> string</strong>', 'HTML String', {
dangerouslyUseHTMLString: true,
});
};
return {
open,
};
},
});
</setup>
-->
```
:::
@@ -236,6 +412,45 @@ In some cases, clicking the cancel button and close button may have different me
}
}
</script>
<!--
<setup>
import { defineComponent } from 'vue';
import { ElMessageBox } from 'element-plus';
import { ElMessage } from 'element-plus';
export default defineComponent({
setup() {
const open = () => {
ElMessageBox.confirm('You have unsaved changes, save and proceed?', 'Confirm', {
distinguishCancelAndClose: true,
confirmButtonText: 'Save',
cancelButtonText: 'Discard Changes',
})
.then(() => {
ElMessage({
type: 'info',
message: 'Changes saved. Proceeding to a new route.',
});
})
.catch((action) => {
ElMessage({
type: 'info',
message: action === 'cancel'
? 'Changes discarded. Proceeding to a new route.'
: 'Stay in the current route',
});
});
};
return {
open,
};
},
});
</setup>
-->
```
:::
@@ -273,6 +488,43 @@ Content of MessageBox can be centered.
}
}
</script>
<!--
<setup>
import { defineComponent } from 'vue';
import { ElMessageBox } from 'element-plus';
import { ElMessage } from 'element-plus';
export default defineComponent({
setup() {
const open = () => {
ElMessageBox.confirm('proxy will permanently delete the file. Continue?', 'Warning', {
confirmButtonText: 'OK',
cancelButtonText: 'Cancel',
type: 'warning',
center: true,
}).then(() => {
ElMessage({
type: 'success',
message: 'Delete completed',
});
}).catch(() => {
ElMessage({
type: 'info',
message: 'Delete canceled',
});
});
};
return {
open,
};
},
});
</setup>
-->
```
:::

255
website/docs/es/message-box.md
View File

@@ -33,6 +33,35 @@ Alert interrumpe las operaciones realizadas hasta que el usuario confirme la ale
}
}
</script>
<!--
<setup>
import { defineComponent } from 'vue';
import { ElMessageBox } from 'element-plus';
export default defineComponent({
setup() {
const open = () => {
ElMessageBox.alert('This is a message', 'Title', {
confirmButtonText: 'OK',
callback: (action) => {
this.$message({
type: 'info',
message: `action: ${action}`,
});
},
});
};
return {
open,
};
},
});
</setup>
-->
```
:::
@@ -71,6 +100,43 @@ Confirm es utilizado para preguntar al usuario y recibir una confirmación.
}
}
</script>
<!--
<setup>
import { defineComponent } from 'vue';
import { ElMessageBox } from 'element-plus';
import { ElMessage } from 'element-plus';
export default defineComponent({
setup() {
const open = () => {
ElMessageBox.confirm('proxy will permanently delete the file. Continue?', 'Warning', {
confirmButtonText: 'OK',
cancelButtonText: 'Cancel',
type: 'warning',
}).then(() => {
ElMessage({
type: 'success',
message: 'Delete completed',
});
}).catch(() => {
ElMessage({
type: 'info',
message: 'Delete canceled',
});
});
};
return {
open,
};
},
});
</setup>
-->
```
:::
@@ -110,6 +176,45 @@ Prompt es utilizado cuando se requiere entrada de información del usuario.
}
}
</script>
<!--
<setup>
import { defineComponent } from 'vue';
import { ElMessageBox } from 'element-plus';
import { ElMessage } from 'element-plus';
export default defineComponent({
setup() {
const open = () => {
ElMessageBox.prompt('Please input your e-mail', 'Tip', {
confirmButtonText: 'OK',
cancelButtonText: 'Cancel',
inputPattern: /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/,
inputErrorMessage: 'Invalid Email',
})
.then(({ value }) => {
ElMessage({
type: 'success',
message: `Your email is:${value}`,
});
})
.catch(() => {
ElMessage({
type: 'info',
message: 'Input canceled',
});
});
};
return {
open,
};
},
});
</setup>
-->
```
:::
@@ -163,6 +268,56 @@ Puede ser personalizado para mostrar diversos contenidos.
}
}
</script>
<!--
<setup>
import { defineComponent, h } from 'vue';
import { ElMessage } from 'element-plus';
export default defineComponent({
setup() {
const open = () => {
ElMessageBox({
title: 'Message',
message: h('p', null, [
h('span', null, 'Message can be '),
h('i', { style: 'color: teal' }, 'VNode'),
]),
showCancelButton: true,
confirmButtonText: 'OK',
cancelButtonText: 'Cancel',
beforeClose: (action, instance, done) => {
if (action === 'confirm') {
instance.confirmButtonLoading = true;
instance.confirmButtonText = 'Loading...';
setTimeout(() => {
done();
setTimeout(() => {
instance.confirmButtonLoading = false;
}, 300);
}, 3000);
} else {
done();
}
},
}).then((action) => {
ElMessage({
type: 'info',
message: `action: ${action}`,
});
});
};
return {
open,
};
},
});
</setup>
-->
```
:::
@@ -194,6 +349,29 @@ El contenido de MessageBox puede ser `VNode`, permitiéndonos pasar componentes
}
}
</script>
<!--
<setup>
import { defineComponent } from 'vue';
import { ElMessageBox } from 'element-plus';
export default defineComponent({
setup() {
const open = () => {
ElMessageBox.alert('<strong>proxy is <i>HTML</i> string</strong>', 'HTML String', {
dangerouslyUseHTMLString: true,
});
};
return {
open,
};
},
});
</setup>
-->
```
:::
@@ -240,6 +418,46 @@ En algunos casos, hacer clic en el botón Cancelar y en el botón Cerrar puede t
}
}
</script>
<!--
<setup>
import { defineComponent } from 'vue';
import { ElMessageBox } from 'element-plus';
import { ElMessage } from 'element-plus';
export default defineComponent({
setup() {
const open = () => {
ElMessageBox.confirm('You have unsaved changes, save and proceed?', 'Confirm', {
distinguishCancelAndClose: true,
confirmButtonText: 'Save',
cancelButtonText: 'Discard Changes',
})
.then(() => {
ElMessage({
type: 'info',
message: 'Changes saved. Proceeding to a new route.',
});
})
.catch((action) => {
ElMessage({
type: 'info',
message: action === 'cancel'
? 'Changes discarded. Proceeding to a new route.'
: 'Stay in the current route',
});
});
};
return {
open,
};
},
});
</setup>
-->
```
:::
@@ -277,6 +495,43 @@ El contenido del componente MessageBox puede ser centrado.
}
}
</script>
<!--
<setup>
import { defineComponent } from 'vue';
import { ElMessageBox } from 'element-plus';
import { ElMessage } from 'element-plus';
export default defineComponent({
setup() {
const open = () => {
ElMessageBox.confirm('proxy will permanently delete the file. Continue?', 'Warning', {
confirmButtonText: 'OK',
cancelButtonText: 'Cancel',
type: 'warning',
center: true,
}).then(() => {
ElMessage({
type: 'success',
message: 'Delete completed',
});
}).catch(() => {
ElMessage({
type: 'info',
message: 'Delete canceled',
});
});
};
return {
open,
};
},
});
</setup>
-->
```
:::

253
website/docs/fr-FR/message-box.md
View File

@@ -34,6 +34,35 @@ Alert interrompt l'action de l'utilisateur jusqu'à ce qu'il confirme.
}
}
</script>
<!--
<setup>
import { defineComponent } from 'vue';
import { ElMessageBox } from 'element-plus';
export default defineComponent({
setup() {
const open = () => {
ElMessageBox.alert('Ceci est un message', 'Titre', {
confirmButtonText: 'OK',
callback: (action) => {
this.$message({
type: 'info',
message: `action: ${action}`,
});
},
});
};
return {
open,
};
},
});
</setup>
-->
```
:::
@@ -71,6 +100,44 @@ Confirm est utilisé pour demander une confirmation à l'utilisateur.
}
}
</script>
<!--
<setup>
import { defineComponent } from 'vue';
import { ElMessageBox } from 'element-plus';
import { ElMessage } from 'element-plus';
export default defineComponent({
setup() {
const open = () => {
ElMessageBox.confirm('Ceci effacera le fichier. Continuer?', 'Warning', {
confirmButtonText: 'OK',
cancelButtonText: 'Annuler',
type: 'warning',
})
.then(() => {
ElMessage({
type: 'success',
message: 'Fichier supprimé',
});
})
.catch(() => {
ElMessage({
type: 'info',
message: 'Suppression annulée',
});
});
};
return {
open,
};
},
});
</setup>
-->
```
:::
@@ -110,6 +177,43 @@ Prompt est utilisé lorsqu'un utilisateur.
}
}
</script>
<!--
<setup>
import { defineComponent } from 'vue';
import { ElMessageBox } from 'element-plus';
import { ElMessage } from 'element-plus';
export default defineComponent({
setup() {
const open = () => {
ElMessageBox.prompt('Entrez votre e-mail', 'Astuce', {
confirmButtonText: 'OK',
cancelButtonText: 'Annuler',
inputPattern: /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/,
inputErrorMessage: 'E-mail invalide',
}).then(({ value }) => {
ElMessage({
type: 'success',
message: `Votre e-mail est: ${value}`,
});
}).catch(() => {
ElMessage({
type: 'info',
message: 'Annulé',
});
});
};
return {
open,
};
},
});
</setup>
-->
```
:::
@@ -163,6 +267,55 @@ Il est possible d'afficher du contenu un peu plus varié et personnalisé.
}
}
</script>
<!--
<setup>
import { defineComponent, h } from 'vue';
import { ElMessage } from 'element-plus';
export default defineComponent({
setup() {
const open = () => {
ElMessageBox({
title: 'Message',
message: h('p', null, [
h('span', null, 'Le message peut être '),
h('i', { style: 'color: teal' }, 'VNode'),
]),
showCancelButton: true,
confirmButtonText: 'OK',
cancelButtonText: 'Annuler',
beforeClose: (action, instance, done) => {
if (action === 'confirm') {
instance.confirmButtonLoading = true;
instance.confirmButtonText = 'Chargement...';
setTimeout(() => {
done();
setTimeout(() => {
instance.confirmButtonLoading = false;
}, 300);
}, 3000);
} else {
done();
}
},
}).then((action) => {
ElMessage({
type: 'info',
message: `Action: ${action}`,
});
});
};
return {
open,
};
},
});
</setup>
-->
```
:::
@@ -192,6 +345,29 @@ Le contenu de MessageBox peut être `VNode`, Vous permettant de passer des compo
}
}
</script>
<!--
<setup>
import { defineComponent } from 'vue';
import { ElMessageBox } from 'element-plus';
export default defineComponent({
setup() {
const open = () => {
ElMessageBox.alert('<strong>Ceci est du <i>HTML</i></strong>', 'HTML', {
dangerouslyUseHTMLString: true,
});
};
return {
open,
};
},
});
</setup>
-->
```
:::
@@ -237,6 +413,46 @@ Dans certains cas, les boutons fermer et annuler peuvent avoir des sens différe
}
}
</script>
<!--
<setup>
import { defineComponent } from 'vue';
import { ElMessageBox } from 'element-plus';
import { ElMessage } from 'element-plus';
export default defineComponent({
setup() {
const open = () => {
ElMessageBox.confirm('Vous avez du travail non enregistré, enregistrer et quitter?', 'Confirm', {
distinguishCancelAndClose: true,
confirmButtonText: 'Enregistrer',
cancelButtonText: 'Ne pas enregistrer',
})
.then(() => {
ElMessage({
type: 'info',
message: 'Enregistré. Passage a une nouvelle route.',
});
})
.catch((action) => {
ElMessage({
type: 'info',
message: action === 'cancel'
? 'Changements annulés. Passage sur une nouvelle route.'
: 'Reste sur la même route',
});
});
};
return {
open,
};
},
});
</setup>
-->
```
:::
@@ -275,6 +491,43 @@ le contenu de MessageBox peut être centré.
}
}
</script>
<!--
<setup>
import { defineComponent } from 'vue';
import { ElMessageBox } from 'element-plus';
import { ElMessage } from 'element-plus';
export default defineComponent({
setup() {
const open = () => {
ElMessageBox.confirm('Ceci effacera le fichier, continuer?', 'Warning', {
confirmButtonText: 'OK',
cancelButtonText: 'Annuler',
type: 'warning',
center: true,
}).then(() => {
ElMessage({
type: 'success',
message: 'Fichier supprimé',
});
}).catch(() => {
ElMessage({
type: 'info',
message: 'Annulé',
});
});
};
return {
open,
};
},
});
</setup>
-->
```
:::

255
website/docs/jp/message-box.md
View File

@@ -32,6 +32,35 @@
}
}
</script>
<!--
<setup>
import { defineComponent } from 'vue';
import { ElMessageBox } from 'element-plus';
export default defineComponent({
setup() {
const open = () => {
ElMessageBox.alert('This is a message', 'Title', {
confirmButtonText: 'OK',
callback: (action) => {
this.$message({
type: 'info',
message: `action: ${action}`,
});
},
});
};
return {
open,
};
},
});
</setup>
-->
```
:::
@@ -69,6 +98,43 @@
}
}
</script>
<!--
<setup>
import { defineComponent } from 'vue';
import { ElMessageBox } from 'element-plus';
import { ElMessage } from 'element-plus';
export default defineComponent({
setup() {
const open = () => {
ElMessageBox.confirm('proxy will permanently delete the file. Continue?', 'Warning', {
confirmButtonText: 'OK',
cancelButtonText: 'Cancel',
type: 'warning',
}).then(() => {
ElMessage({
type: 'success',
message: 'Delete completed',
});
}).catch(() => {
ElMessage({
type: 'info',
message: 'Delete canceled',
});
});
};
return {
open,
};
},
});
</setup>
-->
```
:::
@@ -108,6 +174,45 @@
}
}
</script>
<!--
<setup>
import { defineComponent } from 'vue';
import { ElMessageBox } from 'element-plus';
import { ElMessage } from 'element-plus';
export default defineComponent({
setup() {
const open = () => {
ElMessageBox.prompt('Please input your e-mail', 'Tip', {
confirmButtonText: 'OK',
cancelButtonText: 'Cancel',
inputPattern: /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/,
inputErrorMessage: 'Invalid Email',
})
.then(({ value }) => {
ElMessage({
type: 'success',
message: `Your email is:${value}`,
});
})
.catch(() => {
ElMessage({
type: 'info',
message: 'Input canceled',
});
});
};
return {
open,
};
},
});
</setup>
-->
```
:::
@@ -161,6 +266,56 @@
}
}
</script>
<!--
<setup>
import { defineComponent, h } from 'vue';
import { ElMessage } from 'element-plus';
export default defineComponent({
setup() {
const open = () => {
ElMessageBox({
title: 'Message',
message: h('p', null, [
h('span', null, 'Message can be '),
h('i', { style: 'color: teal' }, 'VNode'),
]),
showCancelButton: true,
confirmButtonText: 'OK',
cancelButtonText: 'Cancel',
beforeClose: (action, instance, done) => {
if (action === 'confirm') {
instance.confirmButtonLoading = true;
instance.confirmButtonText = 'Loading...';
setTimeout(() => {
done();
setTimeout(() => {
instance.confirmButtonLoading = false;
}, 300);
}, 3000);
} else {
done();
}
},
}).then((action) => {
ElMessage({
type: 'info',
message: `action: ${action}`,
});
});
};
return {
open,
};
},
});
</setup>
-->
```
:::
@@ -190,6 +345,29 @@ MessageBoxの内容は `VNode` にすることができ、カスタムコンポ
}
}
</script>
<!--
<setup>
import { defineComponent } from 'vue';
import { ElMessageBox } from 'element-plus';
export default defineComponent({
setup() {
const open = () => {
ElMessageBox.alert('<strong>proxy is <i>HTML</i> string</strong>', 'HTML String', {
dangerouslyUseHTMLString: true,
});
};
return {
open,
};
},
});
</setup>
-->
```
:::
@@ -235,6 +413,46 @@ MessageBoxの内容は `VNode` にすることができ、カスタムコンポ
}
}
</script>
<!--
<setup>
import { defineComponent } from 'vue';
import { ElMessageBox } from 'element-plus';
import { ElMessage } from 'element-plus';
export default defineComponent({
setup() {
const open = () => {
ElMessageBox.confirm('You have unsaved changes, save and proceed?', 'Confirm', {
distinguishCancelAndClose: true,
confirmButtonText: 'Save',
cancelButtonText: 'Discard Changes',
})
.then(() => {
ElMessage({
type: 'info',
message: 'Changes saved. Proceeding to a new route.',
});
})
.catch((action) => {
ElMessage({
type: 'info',
message: action === 'cancel'
? 'Changes discarded. Proceeding to a new route.'
: 'Stay in the current route',
});
});
};
return {
open,
};
},
});
</setup>
-->
```
:::
@@ -272,6 +490,43 @@ MessageBoxの内容は `VNode` にすることができ、カスタムコンポ
}
}
</script>
<!--
<setup>
import { defineComponent } from 'vue';
import { ElMessageBox } from 'element-plus';
import { ElMessage } from 'element-plus';
export default defineComponent({
setup() {
const open = () => {
ElMessageBox.confirm('proxy will permanently delete the file. Continue?', 'Warning', {
confirmButtonText: 'OK',
cancelButtonText: 'Cancel',
type: 'warning',
center: true,
}).then(() => {
ElMessage({
type: 'success',
message: 'Delete completed',
});
}).catch(() => {
ElMessage({
type: 'info',
message: 'Delete canceled',
});
});
};
return {
open,
};
},
});
</setup>
-->
```
:::

260
website/docs/zh-CN/message-box.md
View File

@@ -32,6 +32,36 @@
}
}
</script>
<!--
<setup>
import { defineComponent } from 'vue';
import { ElMessageBox } from 'element-plus';
import { ElMessage } from 'element-plus';
export default defineComponent({
setup() {
const open = () => {
ElMessageBox.alert('这是一段内容', '标题名称', {
confirmButtonText: '确定',
callback: (action) => {
ElMessage({
type: 'info',
message: `action: ${action}`,
});
},
});
};
return {
open,
};
},
});
</setup>
-->
```
:::
@@ -69,6 +99,44 @@
}
}
</script>
<!--
<setup>
import { defineComponent } from 'vue';
import { ElMessageBox } from 'element-plus';
import { ElMessage } from 'element-plus';
export default defineComponent({
setup() {
const open = () => {
ElMessageBox.confirm('此操作将永久删除该文件, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
})
.then(() => {
ElMessage({
type: 'success',
message: '删除成功!',
});
})
.catch(() => {
ElMessage({
type: 'info',
message: '已取消删除',
});
});
};
return {
open,
};
},
});
</setup>
-->
```
:::
@@ -107,6 +175,46 @@
}
}
</script>
<!--
<setup>
import { defineComponent } from 'vue';
import { ElMessageBox } from 'element-plus';
import { ElMessage } from 'element-plus';
export default defineComponent({
setup() {
const open = () => {
ElMessageBox.prompt('请输入邮箱', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
inputPattern: /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/,
inputErrorMessage: '邮箱格式不正确',
})
.then(({ value }) => {
ElMessage({
type: 'success',
message: `你的邮箱是: ${value}`,
});
})
.catch(() => {
ElMessage({
type: 'info',
message: '取消输入',
});
});
};
return {
open,
};
},
});
</setup>
-->
```
:::
@@ -160,6 +268,58 @@
}
}
</script>
<!--
<setup>
import { defineComponent, h } from 'vue';
import { ElMessage } from 'element-plus';
export default defineComponent({
setup() {
const open = () => {
ElMessageBox({
title: '消息',
message: h('p', null, [
h('span', null, '内容可以是 '),
h('i', { style: 'color: teal' }, 'VNode'),
]),
showCancelButton: true,
confirmButtonText: '确定',
cancelButtonText: '取消',
beforeClose: (action, instance, done) => {
if (action === 'confirm') {
instance.confirmButtonLoading = true;
instance.confirmButtonText = '执行中...';
setTimeout(() => {
done();
setTimeout(() => {
instance.confirmButtonLoading = false;
}, 300);
}, 3000);
} else {
done();
}
},
}).then((action) => {
ElMessage({
type: 'info',
message: `action: ${action}`,
});
}).catch((e) => {
console.log(e);
});
};
return {
open,
};
},
});
</setup>
-->
```
:::
@@ -189,6 +349,29 @@
}
}
</script>
<!--
<setup>
import { defineComponent } from 'vue';
import { ElMessageBox } from 'element-plus';
export default defineComponent({
setup() {
const open = () => {
ElMessageBox.alert('<strong>这是 <i>HTML</i> 片段</strong>', 'HTML 片段', {
dangerouslyUseHTMLString: true,
});
};
return {
open,
};
},
});
</setup>
-->
```
:::
@@ -234,6 +417,46 @@
}
}
</script>
<!--
<setup>
import { defineComponent } from 'vue';
import { ElMessageBox } from 'element-plus';
import { ElMessage } from 'element-plus';
export default defineComponent({
setup() {
const open = () => {
ElMessageBox.confirm('检测到未保存的内容，是否在离开页面前保存修改？', '确认信息', {
distinguishCancelAndClose: true,
confirmButtonText: '保存',
cancelButtonText: '放弃修改',
})
.then(() => {
ElMessage({
type: 'info',
message: '保存修改',
});
})
.catch((action) => {
ElMessage({
type: 'info',
message: action === 'cancel'
? '放弃保存并离开页面'
: '停留在当前页面',
});
});
};
return {
open,
};
},
});
</setup>
-->
```
:::
@@ -271,6 +494,43 @@
}
}
</script>
<!--
<setup>
import { defineComponent } from 'vue';
import { ElMessageBox } from 'element-plus';
import { ElMessage } from 'element-plus';
export default defineComponent({
setup() {
const open = () => {
ElMessageBox.confirm('此操作将永久删除该文件, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
center: true,
}).then(() => {
ElMessage({
type: 'success',
message: '删除成功!',
});
}).catch(() => {
ElMessage({
type: 'info',
message: '已取消删除',
});
});
};
return {
open,
};
},
});
</setup>
-->
```
:::