使用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 相关文章推荐
在IE,Firefox,Safari,Chrome,Opera浏览器上调试javascript
Dec 02 Javascript
JS连接SQL数据库与ACCESS数据库的方法实例
Nov 21 Javascript
JS中的form.submit()不能提交表单的错误原因
Oct 08 Javascript
jQuery插件Skippr实现焦点图幻灯片特效
Apr 12 Javascript
利用Angularjs和bootstrap实现购物车功能
Aug 31 Javascript
fckeditor部署到weblogic出现xml无法读取及样式不能显示问题的解决方法
Mar 24 Javascript
vue+vuex+axios实现登录、注册页权限拦截
Mar 09 Javascript
浅谈jquery fullpage 插件增加头部和版权的方法
Mar 20 jQuery
Angular6 用户自定义标签开发的实现方法
Jan 08 Javascript
10个最受欢迎的 JavaScript框架(推荐)
Apr 24 Javascript
微信小程序跨页面传递data数据方法解析
Dec 13 Javascript
JavaScript大数相加相乘的实现方法实例
Oct 18 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
《魔兽世界》惊魂幻象将获得调整
2020/03/08 其他游戏
PHP OPP机制和模式简介(抽象类、接口和契约式编程)
2014/06/09 PHP
详解WordPress中调用评论模板和循环输出评论的PHP函数
2016/01/05 PHP
PHP中register_shutdown_function函数的基础介绍与用法详解
2017/11/28 PHP
laravel5环境隐藏index.php后缀(apache)的方法
2019/10/12 PHP
Nigma vs Liquid BO3 第二场2.14
2021/03/10 DOTA
Jquery 获取表单text,areatext,radio,checkbox,select值的代码
2009/11/12 Javascript
一个支付页面DEMO附截图
2014/07/22 Javascript
基于Jquery+div+css实现弹出登录窗口(代码超简单)
2015/10/27 Javascript
JS获取随机数和时间转换的简单实例
2016/07/10 Javascript
AngularJS基础 ng-show 指令简单示例
2016/08/03 Javascript
javascript 中的console.log和弹出窗口alert
2016/08/30 Javascript
详解nodejs微信公众号开发——6.自定义菜单
2017/04/13 NodeJs
详解vue-cli快速构建vue应用并实现webpack打包
2017/12/13 Javascript
微信小程序实现图片滚动效果示例
2018/12/05 Javascript
微信小程序拍照和摄像功能实现方法示例
2019/02/01 Javascript
让 babel webpack vue 配置文件支持智能提示的方法
2019/06/22 Javascript
vue+flask实现视频合成功能(拖拽上传)
2021/03/04 Vue.js
[59:30]VG vs LGD 2019国际邀请赛淘汰赛 胜者组 BO3 第二场 8.22
2019/09/05 DOTA
Python设计模式之门面模式简单示例
2018/01/09 Python
Python实现识别图片内容的方法分析
2018/07/11 Python
python3结合openpyxl库实现excel操作的实例代码
2018/09/11 Python
Python基于Opencv来快速实现人脸识别过程详解(完整版)
2019/07/11 Python
Django 响应数据response的返回源码详解
2019/08/06 Python
Linux下升级安装python3.8并配置pip及yum的教程
2020/01/02 Python
Pytorch学习之torch用法----比较操作(Comparison Ops)
2020/06/28 Python
Pycharm2020.1安装中文语言插件的详细教程(不需要汉化)
2020/08/07 Python
澳大利亚领先的睡衣品牌:Peter Alexander
2016/08/16 全球购物
巴西服装和鞋子购物网站:Marisa
2018/10/25 全球购物
写出程序把一个链表中的接点顺序倒排
2014/04/28 面试题
半年思想汇报
2013/12/30 职场文书
年度优秀员工获奖感言
2014/08/15 职场文书
学生上课看漫画的检讨书
2014/09/26 职场文书
党支部先进事迹材料
2014/12/24 职场文书
2015年法制宣传月活动总结
2015/03/26 职场文书
详解PHP设计模式之依赖注入模式
2021/05/25 PHP