使用Vant完成Dialog弹框

刺骨的言语ヽ痛彻心扉 2024-04-19 07:26 4阅读 0赞

### 效果展示： ###

![20190915113547321.gif][]

### 完整代码： ###

<template>
      
      <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参考：[Dialog的相关API和Options详见][Dialog_API_Options] ###

[20190915113547321.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/ceeee45f69f04a0da71878612fdc3b4a.gif
[Dialog_API_Options]: https://youzan.github.io/vant/#/zh-CN/dialog%23dai-ma-yan-shi

发表评论取消回复

表情：

评论列表（有 0 条评论，4人围观）

还没有评论，来说两句吧...

相关阅读

相关使用Vant完成底部弹出框 ActionSheet 上拉菜单

效果图： ![20190915133428689.gif][] 代码展示：（ActionSheet 上拉菜单） <template> <!...

向右看齐/ 2024年04月19日 07:48/ 0 赞/ 6 阅读

相关使用Vant完成Dialog弹框

效果展示： ![20190915113547321.gif][] 完整代码： <template> <!-- 完成Dialog 弹框 --...

刺骨的言语ヽ痛彻心扉/ 2024年04月19日 07:26/ 0 赞/ 5 阅读

相关使用Vant完成各种Toast提示框

效果展示： ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub...

痛定思痛。/ 2024年04月19日 07:09/ 0 赞/ 7 阅读

相关 Angular material 之 dialog 弹框实战

[20190909151056434.png][]![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6...

朱雀/ 2024年04月18日 16:18/ 0 赞/ 8 阅读

相关 Vue+vant移动端处理弹框滑动问题

Vue+vant做移动端需要实现一个弹框向上下滑动的功能遇到了问题记录一下 <div class="popupShowHeight" id="popupShow

ゝ一世哀愁。/ 2022年12月31日 02:19/ 0 赞/ 741 阅读

相关由浅入深之Dialog的基本弹框

/ 退出 / private void TuiChu(){ final AlertDialog.Builder bui

我不是女神ヾ/ 2022年07月16日 12:14/ 0 赞/ 118 阅读

相关【JavaScript】8.弹出框（Dialog）

最近做项目，用到了弹出框提示信息，就做了个demo，记录总结了一下，对一般的网站来说，弹出框是比较常见的。或是给出用户操作提示，或是通过弹出框打开一个小窗口以提示信息，或是给出

叁歲伎倆/ 2022年06月01日 13:06/ 0 赞/ 228 阅读

相关 Android Dialog风格弹出框的Activity

1.styles.xml 中 <style name="dialog" parent="@android:style/Theme.Dialog">

忘是亡心i/ 2022年03月24日 19:00/ 0 赞/ 185 阅读

相关 jquery使用dialog调用弹出框

1、jquery可以调用弹出框,语法如下：　　$.dialog("open", \{ id:'dialog', name : 'create-guide',

曾经终败给现在/ 2021年12月16日 08:43/ 0 赞/ 512 阅读

相关 element-ui dialog（多弹框、嵌套弹框）被蒙版遮住

我的情况是，在一个弹框中，点击按钮再弹出了一个弹框，第二个弹框被蒙层遮住了。![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_te

逃离我推掉我的手/ 2021年08月13日 16:29/ 0 赞/ 449 阅读