vue引用vant的弹出框Dialog
(1)消息提示:如下图,分两种弹框显示:点按钮“(确认)提示弹出框”:修改确认为圆角按钮风格点按钮“(确认、取消)提示弹出框”:<template><div class="page"><div><p><van-button class="btn" type="primary" @click="TipDialog">(确认)..
·
(1)消息提示:
如下图,分两种弹框显示:
点按钮“(确认)提示弹出框”:
修改确认为圆角按钮风格
点按钮“(确认、取消)提示弹出框”:
<template>
<div class="page">
<div>
<p>
<van-button class="btn" type="primary" @click="TipDialog">(确认)提示弹出框</van-button>
</p>
<p style="display:block;margin-top:5px;">
<van-button class="btn" type="primary" @click="Dialog">(确认、取消)提示弹出框</van-button>
</p>
</div>
</div>
</template>
<script>
import {
Button,
Dialog,
} from 'vant';
export default{
components: {
[Dialog.Component.name]: Dialog.Component,
[Button.name]: Button,
},
data(){
return{
msg:''
}
},
methods:{
// 提示弹出框
TipDialog(){
this.$dialog.alert({
title:'标题1',
message:'弹框内容1',
//theme: 'round-button', //圆角按钮
}).then(()=>{
console.log('点击了确认')
})
},
//(确认、取消)的弹出框
Dialog(){
this.$dialog.confirm({
title:'标题2',
message:'弹框内容2',
confirmButtonColor:'red'
}).then(()=>{
console.log('点击了确认')
}).catch(()=>{
console.log('点击了取消')
})
}
},
}
</script>
(2)弹框提示:带取消和确认的,内容可自定义div
注意:
之前引用组件时,简写如下不生效:
[Dialog.name]: Dialog,
要改成下面这样引用才生效:
[Dialog.Component.name]: Dialog.Component,
<div class="page">
<van-button type="primary" @click="onClick">登录</van-button>
<van-dialog
v-model="isShow"
show-cancel-button
:beforeClose="beforeClose"
>
<div style="padding:30px;">
<p>第一行内容</p>
<p>第二行内容</p>
<p>第三行内容</p>
</div>
</van-dialog>
</div>
<script>
import {
Button,
Dialog,
} from 'vant';
export default {
components: {
[Dialog.Component.name]: Dialog.Component, //Dialog.Component写成这样才生效
[Button.name]: Button,
},
data() {
return {
isShow: false,
};
},
methods: {
onClick() {
this.isShow = !this.isShow
},
beforeClose(action, done) {
if(action === 'confirm') {
setTimeout(done, 1000)
console.log()
} else if(action === 'cancel') {
done() //关闭
}
}
},
};
</script>
更多推荐
已为社区贡献2条内容
所有评论(0)