使用Vant完成Dialog弹框案例


Posted in Javascript onNovember 11, 2020

效果展示:

使用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 中提供的属性进行组合搭配后的效果。

使用Vant完成Dialog弹框案例

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弹框案例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
破解Session cookie的方法
Jul 28 Javascript
网页源代码保护(禁止右键、复制、另存为、查看源文件)
May 23 Javascript
jquery实现一个简单的表单验证实例
Mar 30 Javascript
noty ? jQuery通知插件全面解析
May 18 Javascript
想用好React的你必须要知道的一些事情
Jul 24 Javascript
十分钟带你快速了解React16新特性
Nov 10 Javascript
深入浅析vue组件间事件传递
Dec 29 Javascript
JavaScript引用类型Object常见用法实例分析
Aug 08 Javascript
Koa 使用小技巧(小结)
Oct 22 Javascript
Vue实现table上下移动功能示例
Feb 21 Javascript
详解从0开始搭建微信小程序(前后端)的全过程
Apr 15 Javascript
WebWorker 封装 JavaScript 沙箱详情
Nov 02 Javascript
vue实现lodop打印功能的示例
Nov 11 #Javascript
解决vant的Toast组件时提示not defined的问题
Nov 11 #Javascript
vue mvvm数据响应实现
Nov 11 #Javascript
Js数组扁平化实现方法代码总汇
Nov 11 #Javascript
使用Vant完成通知栏Notify的提示操作
Nov 11 #Javascript
Vue3 响应式侦听与计算的实现
Nov 11 #Javascript
详解Vue.js3.0 组件是如何渲染为DOM的
Nov 10 #Javascript
You might like
php 正则匹配函数体
2009/08/25 PHP
php面向对象与面向过程两种方法给图片添加文字水印
2015/08/26 PHP
javascript onkeydown,onkeyup,onkeypress,onclick,ondblclick
2009/02/04 Javascript
基于jquery的时间段实现代码
2012/08/02 Javascript
jquery多选项卡效果实例代码(附效果图)
2013/03/23 Javascript
JavaScript数组函数unshift、shift、pop、push使用实例
2014/08/27 Javascript
js 数组去重的四种实用方法
2014/09/09 Javascript
jQuery的css()方法用法实例
2014/12/24 Javascript
JavaScript闭包详解
2015/02/02 Javascript
Nodejs Express4.x开发框架随手笔记
2015/11/23 NodeJs
BootStrap selectpicker
2016/06/20 Javascript
js cookie实现记住密码功能
2017/01/17 Javascript
第一个Vue插件从封装到发布
2017/11/22 Javascript
js中对象与对象创建方法的各种方法
2019/02/27 Javascript
微信小程序上传图片并等比列压缩到指定大小的实例代码
2019/10/24 Javascript
JavaScript仿京东秒杀倒计时
2020/03/17 Javascript
[02:51]DOTA2 2015国际邀请赛中国区预选赛第一日战报
2015/05/27 DOTA
简单的Python2.7编程初学经验总结
2015/04/01 Python
Python中的测试模块unittest和doctest的使用教程
2015/04/14 Python
Python中文分词工具之结巴分词用法实例总结【经典案例】
2017/04/15 Python
Python中%是什么意思?python中百分号如何使用?
2018/03/20 Python
pandas值替换方法
2018/07/10 Python
flask 实现token机制的示例代码
2019/11/07 Python
Pytorch 使用不同版本的cuda的方法步骤
2020/04/02 Python
如何利用Python识别图片中的文字
2020/05/31 Python
django 获取字段最大值,最新的记录操作
2020/08/09 Python
html5 application cache遇到的严重问题
2012/12/26 HTML / CSS
CSS3 画基本图形,圆形、椭圆形、三角形等
2016/09/20 HTML / CSS
amazeui页面校验功能的实现代码
2020/08/24 HTML / CSS
CAT鞋美国官网:CAT Footwear
2017/11/27 全球购物
美国体育用品商店:Rally House(NCAA、NFL、MLB、NBA、NHL和MLS)
2018/01/03 全球购物
校班主任推荐信范文
2013/12/03 职场文书
文员求职信
2014/07/15 职场文书
2019最新校园运动会广播稿!
2019/06/28 职场文书
PyCharm 安装与使用配置教程(windows,mac通用)
2021/05/12 Python
Python数据结构之队列详解
2022/03/21 Python