使用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 相关文章推荐
Extjs4 Treegrid 使用心得分享(经验篇)
Jul 01 Javascript
jQuery拖拽 &amp; 弹出层 介绍与示例
Dec 27 Javascript
javascript的回调函数应用示例
Feb 20 Javascript
javascript制作2048游戏
Mar 30 Javascript
jQuery简单实现图片预加载
Apr 20 Javascript
基于JS+Canves实现点击按钮水波纹效果
Sep 15 Javascript
Bootstrap如何激活导航状态
Mar 22 Javascript
通俗易懂地解释JS中的闭包
Oct 23 Javascript
vue移动端路由切换实例分析
May 14 Javascript
JavaScript代码异常监控实现过程详解
Feb 17 Javascript
解决Mint-ui 框架Popup和Datetime Picker组件滚动穿透的问题
Nov 04 Javascript
vue/cli 配置动态代理无需重启服务的方法
May 20 Vue.js
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
古巴咖啡 Cubita琥爵咖啡 独特的加勒比海风味咖啡
2021/03/06 新手入门
基于PHP如何把汉字转化为拼音
2015/12/11 PHP
PHP实现简单的模板引擎功能示例
2017/09/02 PHP
google 搜索框添加关键字实现代码
2010/04/24 Javascript
JavaScript call apply使用 JavaScript对象的方法绑定到DOM事件后this指向问题
2011/09/28 Javascript
JavaScript面向对象设计二 构造函数模式
2011/12/20 Javascript
alert出数组中的随即值代码
2014/09/25 Javascript
js限制文本框只能输入整数或者带小数点的数字
2015/04/27 Javascript
js+html5通过canvas指定开始和结束点绘制线条的方法
2015/06/05 Javascript
JavaScript字符串常用的方法
2016/03/10 Javascript
原生JS实现的放大镜效果实例代码
2016/10/15 Javascript
简单实现node.js图片上传
2016/12/18 Javascript
详解JavaScript中this的指向问题
2017/01/20 Javascript
AngularJS实现自定义指令及指令配置项的方法
2017/11/20 Javascript
react-native动态切换tab组件的方法
2018/07/07 Javascript
angular4自定义表单控件[(ngModel)]的实现
2018/11/23 Javascript
vue-router二级导航切换路由及高亮显示的实现方法
2019/07/10 Javascript
uniapp,微信小程序中使用 MQTT的问题
2020/07/11 Javascript
[04:47]DOTA2-潍坊风行电子俱乐部探秘
2014/08/08 DOTA
在Python中操作字典之update()方法的使用
2015/05/22 Python
python 获取指定文件夹下所有文件名称并写入列表的实例
2018/04/23 Python
Python类装饰器实现方法详解
2018/12/21 Python
在pycharm中设置显示行数的方法
2019/01/16 Python
正确理解Python中if __name__ == '__main__'
2019/01/24 Python
python打包成so文件过程解析
2019/09/28 Python
详解使用django-mama-cas快速搭建CAS服务的实现
2019/10/30 Python
中国首家奢侈品O2O网购平台:第五大道奢侈品网
2017/12/14 全球购物
美国名牌香水折扣网站:Hottperfume
2021/02/10 全球购物
Claire’s法国:时尚配饰、美容、珠宝、头发
2021/01/16 全球购物
介绍一下Make? 为什么使用make
2013/12/08 面试题
物业管理大学生个人的自我评价
2013/10/10 职场文书
党的群众路线对照检查材料
2014/09/22 职场文书
学期个人自我总结
2015/02/13 职场文书
2019年教师节:送给所有老师的祝福语
2019/09/05 职场文书
Go 在 MongoDB 中常用查询与修改的操作
2021/05/07 Golang
详解Python如何批量采集京东商品数据流程
2022/01/22 Python