使用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 相关文章推荐
jQuery UI AutoComplete 自动完成使用小记
Aug 21 Javascript
无阻塞加载脚本分析[全]
Jan 20 Javascript
基于jQuery实现模拟页面加载进度条
Apr 01 Javascript
让jQuery Mobile不显示讨厌loading界面的方法
Feb 19 Javascript
node.js中的require使用详解
Dec 15 Javascript
ECMAScript6快速入手攻略
Jul 18 Javascript
Vue 短信验证码组件开发详解
Feb 14 Javascript
JavaScript编写的网页小游戏,很给力
Aug 18 Javascript
使用原生js+canvas实现模拟心电图的实例
Sep 20 Javascript
详解Webpack+Babel+React开发环境的搭建的方法步骤
Jan 09 Javascript
react native 文字轮播的实现示例
Jul 27 Javascript
react国际化化插件react-i18n-auto使用详解
Mar 31 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
JAVA/JSP学习系列之六
2006/10/09 PHP
php 模拟get_headers函数的代码示例
2013/04/27 PHP
PHP抓屏函数实现屏幕快照代码分享
2014/01/02 PHP
PHP通过微信跳转的Code参数获取用户的openid(关键代码)
2016/07/06 PHP
微信支付PHP SDK ―― 公众号支付代码详解
2016/09/13 PHP
LAMP环境使用Composer安装Laravel的方法
2017/03/25 PHP
浅谈ThinkPHP5.0版本和ThinkPHP3.2版本的区别
2017/06/17 PHP
Codeigniter里的无刷新上传的实现代码
2019/04/14 PHP
yii2 在控制器中验证请求参数的使用方法
2019/06/19 PHP
WordPress JQuery处理沙发头像
2009/06/22 Javascript
SlideView 图片滑动(扩展/收缩)展示效果
2010/08/01 Javascript
Jquery中offset()和position()的区别分析
2015/02/05 Javascript
jQuery使用CSS()方法给指定元素同时设置多个样式
2015/03/26 Javascript
举例讲解Node.js中的Writable对象
2015/07/29 Javascript
jQuery实现的超简单点赞效果实例分析
2015/12/31 Javascript
jquery dataTable 后台加载数据并分页实例代码
2017/06/07 jQuery
基于JavaScript中标识符的命名规则介绍
2018/01/06 Javascript
javascript原生封装一个淡入淡出效果的函数测试实例代码
2018/03/19 Javascript
vue实现文字横向无缝走马灯组件效果的实例代码
2019/04/09 Javascript
vue 插件的方法代码详解
2019/06/06 Javascript
angular6开发steps步骤条组件
2019/07/04 Javascript
layui prompt 设置允许空白提交的方法
2019/09/24 Javascript
js实现无缝轮播图插件封装
2020/07/31 Javascript
Python编程之微信推送模板消息功能示例
2017/08/21 Python
利用python将pdf输出为txt的实例讲解
2018/04/23 Python
解决python中 f.write写入中文出错的问题
2018/10/31 Python
python3使用flask编写注册post接口的方法
2018/12/28 Python
python禁用键鼠与提权代码实例
2019/08/16 Python
Django中的session用法详解
2020/03/09 Python
飞利信loadrunner和软件测试笔试题
2012/09/22 面试题
小学英语教学反思案例
2014/02/04 职场文书
护士年终考核评语
2014/12/31 职场文书
2015年文明创建工作总结
2015/04/30 职场文书
小学生表扬稿范文
2015/05/05 职场文书
2019让人心动的商业计划书
2019/06/27 职场文书
python3实现无权最短路径的方法
2021/05/12 Python