使用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 相关文章推荐
可以文本显示的公告栏的js代码
Mar 11 Javascript
动态为事件添加js代码示例
Feb 15 Javascript
node.js中的fs.fchmodSync方法使用说明
Dec 16 Javascript
JavaScript中的数据类型转换方法小结
Oct 26 Javascript
详解javascript事件冒泡
Jan 09 Javascript
浅谈JS之iframe中的窗口
Sep 13 Javascript
浅谈js之字面量、对象字面量的访问、关键字in的用法
Nov 20 Javascript
JavaScript生成指定范围的时间列表
Mar 19 Javascript
JS中的算法与数据结构之列表(List)实例详解
Aug 16 Javascript
vue下canvas裁剪图片实例讲解
Apr 16 Javascript
Vue组件为什么data必须是一个函数
Jun 11 Javascript
JS继承最简单的理解方式
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
基于Zend的Config机制的应用分析
2013/05/02 PHP
phpMyAdmin自动登录和取消自动登录的配置方法
2014/05/12 PHP
php使用$_POST或$_SESSION[]向js函数传参
2014/09/16 PHP
PHP向浏览器输出内容的4个函数总结
2014/11/17 PHP
PHP中创建图像并绘制文字的例子
2014/11/19 PHP
php基于双向循环队列实现历史记录的前进后退等功能
2015/08/08 PHP
JavaScript高级程序设计 错误处理与调试学习笔记
2011/09/10 Javascript
HTML Color Picker(js拾色器效果)
2013/08/27 Javascript
JavaScript实现图片自动加载的瀑布流效果
2016/04/11 Javascript
AngularJS入门教程中SQL实例详解
2016/07/27 Javascript
vue.js学习笔记之绑定style样式和class列表
2016/10/31 Javascript
使用vue.js实现联动效果的示例代码
2017/01/10 Javascript
原生js仿淘宝网商品放大镜效果
2017/02/28 Javascript
JSON与js对象序列化实例详解
2017/03/16 Javascript
vue2的todolist入门小项目的详细解析
2017/05/11 Javascript
bootstrap table实现双击可编辑、添加、删除行功能
2017/09/27 Javascript
利用Console来Debug的10个高级技巧汇总
2018/03/26 Javascript
JS实现打字游戏
2019/12/17 Javascript
[02:37]TI8勇士令状不朽珍藏II视频展示
2018/06/23 DOTA
python通过yield实现数组全排列的方法
2015/03/18 Python
Python实现合并同一个文件夹下所有PDF文件的方法示例
2018/04/28 Python
Django框架ORM数据库操作实例详解
2019/11/07 Python
pycharm内无法import已安装的模块问题解决
2020/02/12 Python
Python pip安装第三方库实现过程解析
2020/07/09 Python
python获取百度热榜链接的实例方法
2020/08/25 Python
戴尔马来西亚官网:Dell Malaysia
2020/05/02 全球购物
腾讯公司的一个sql题
2013/01/22 面试题
你在项目中用到了xml技术的哪些方面?如何实现的?
2014/01/26 面试题
歌唱比赛获奖感言
2014/01/21 职场文书
联谊活动策划书
2014/01/26 职场文书
节约粮食标语
2014/06/18 职场文书
高中教师个人总结
2015/02/10 职场文书
幼师自荐信范文
2015/03/06 职场文书
2016年情人节问候语
2015/11/11 职场文书
Python中threading库实现线程锁与释放锁
2021/05/17 Python
python基础入门之普通操作与函数(三)
2021/06/13 Python