使用Vant完成Dialog弹框案例
编程学习 2021-07-04 14:07www.dzhlxh.cn编程入门
这篇文章主要介绍了使用Vant完成Dialog弹框案例，具有很好的参考价值，希望对大家有所帮助。一起跟随长沙网络推广过来看看吧
效果展示：
完整代码：
<template>
<!-- 完成Dialog 弹框 -->
<div id="dialog">
<van-button class="btn" type="primary" @click="TipDialog">提示弹出框</van-button>
<van-button class="btn" type="primary" @click="Dialog">（确认、取消）的弹出框</van-button>
</div>
</template>
<script>
export default{
data(){
return{
msg:''
}
},
methods:{
// 提示弹出框
TipDialog(){
this.$dialog.alert({
// title:'标题呀',
message:'弹框内容'
}).then(()=>{
console.log('点击了确认')
})
},
//（确认、取消）的弹出框
Dialog(){
this.$dialog.confirm({
title:'标题奥',
message:'哈哈哈哈，嗯嗯，Just do it',
confirmButtonColor:'red'
}).then(()=>{
console.log('点击了确认')
}).catch(()=>{
console.log('点击了取消')
})
}
},
mounted() {
}
}
</script>
<style>
.btn{
margin:20px;
}
</style>
Dialog的相关API和Options参考：
补充知识：van-dialog 弹出框之组件调用小结 - Vue
van-dialog 弹出框之组件调用方法小结，结合一些 api 中提供的属性进行组合搭配后的效果。
html
<button type="button" style="width: 100px; height: 30px;" @click="remarksPaperClick">备注</button>
<van-dialog v-model="dialogShow" :show-cancel-button="true" :before-close="beforeClose">
<div style="width: 100%; height: 200px; display: flex; flex-direction: column; align-items: center;">
<span style="width: 100%; height: 30px; font-size: 20px; color: #ffffff; font-weight: bold; text-align: center; background-color: #37AAEA;">备注</span>
<van-field
v-model="remarkValue"
placeholder="请输入备注内容"
clearable
autosize
type="textarea"
rows="1"
maxlength="230"
show-word-limit
/>
</div>
</van-dialog>
js
remarksExamClick :function (item) { // 点击事件 - 是否加载备注框组件 - 题目备注
console.log(item);
},
beforeClose : function (action, done) { // 点击事件 - 备注按钮提示框
if (action === 'confirm') { // 确认
console.log('[点击事件 - 备注] - 确认');
done(); // 关闭提示框
} else if (action === 'cancel') { // 取消
console.log('[点击事件 - 备注] - 取消');
done(); // 关闭提示框
}
},
css 样式根据实际业务场景需求自由配置即可。
以上这篇使用Vant完成Dialog弹框案例就是长沙网络推广分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持狼蚁SEO。