使用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参考：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弹框案例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。