(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>

 

Logo

前往低代码交流专区

更多推荐