html messagebox确定取消,Element MessageBox弹框的具体使用
組件—彈框
消息提示
點擊打開 Message Box
export default {
methods: {
open() {
this.$alert('這是一段內(nèi)容', '標題名稱', {
confirmButtonText: '確定',
callback: action => {
this.$message({
type: 'info',
message: `action: ${ action }`
});
}
});
}
}
}
確認消息
點擊打開 Message Box
export default {
methods: {
open() {
this.$alert('這是一段內(nèi)容', '標題名稱', {
confirmButtonText: '確定',
callback: action => {
this.$message({
type: 'info',
message: `action: ${ action }`
});
}
});
}
}
}
提交內(nèi)容
點擊打開 Message Box
export default {
methods: {
open() {
this.$prompt('請輸入郵箱', '提示', {
confirmButtonText: '確定',
cancelButtonText: '取消',
inputPattern: /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/,
inputErrorMessage: '郵箱格式不正確'
}).then(({ value }) => {
this.$message({
type: 'success',
message: '你的郵箱是: ' + value
});
}).catch(() => {
this.$message({
type: 'info',
message: '取消輸入'
});
});
}
}
}
自定義
點擊打開 Message Box
export default {
methods: {
open() {
const h = this.$createElement;
this.$msgbox({
title: '消息',
message: h('p', null, [
h('span', null, '內(nèi)容可以是 '),
h('i', { style: 'color: teal' }, 'VNode')
]),
showCancelButton: true,
confirmButtonText: '確定',
cancelButtonText: '取消',
beforeClose: (action, instance, done) => {
if (action === 'confirm') {
instance.confirmButtonLoading = true;
instance.confirmButtonText = '執(zhí)行中...';
setTimeout(() => {
done();
setTimeout(() => {
instance.confirmButtonLoading = false;
}, 300);
}, 3000);
} else {
done();
}
}
}).then(action => {
this.$message({
type: 'info',
message: 'action: ' + action
});
});
}
}
}
使用 HTML 片段
點擊打開 Message Box
export default {
methods: {
open() {
this.$alert('這是 HTML 片段', 'HTML 片段', {
dangerouslyUseHTMLString: true
});
}
}
}
區(qū)分取消與關(guān)閉
點擊打開 Message Box
export default {
methods: {
open() {
this.$alert('這是 HTML 片段', 'HTML 片段', {
dangerouslyUseHTMLString: true
});
}
}
}
居中布局
點擊打開 Message Box
export default {
methods: {
open() {
this.$confirm('此操作將永久刪除該文件, 是否繼續(xù)?', '提示', {
confirmButtonText: '確定',
cancelButtonText: '取消',
type: 'warning',
center: true
}).then(() => {
this.$message({
type: 'success',
message: '刪除成功!'
});
}).catch(() => {
this.$message({
type: 'info',
message: '已取消刪除'
});
});
}
}
}
全局方法
單獨引用
Options
總結(jié)
以上是生活随笔為你收集整理的html messagebox确定取消,Element MessageBox弹框的具体使用的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 旧手机到底该怎么处理旧手机如何处理?
- 下一篇： hexo不渲染html文件,解决hexo