vant组件中 dialog的确认按钮的回调事件操作

不知道是不是我理解有问题，看了vant的组件库，他的文档是这样说的

然后我就绑定了事件 ：confirm

结果他的触发机制是：加载页面时会触发，点击按钮打开模态框时会触发，点击确定会触发，点击取消也会触发。

经过查阅资料以后，可以绑定他一个事件：beforeClose

这个事件的回调 有两个参数，

第一个参数是来判断点击的是确认按钮还是取消按钮。第二个参数我感觉就是可以关闭模态框。

补充知识：修改 vant 弹窗Dialog 组件调用是确认按钮与取消按钮的文字

Props

有关props 两个属性 confirm-button-text 与 cancel-button-text 。

confirm-button-text 确认按钮显示内容

cancel-button-text 取消按钮显示内容

<van-dialog class="" confirm-button-text="这里输入确认按钮的文字" cancel-button-text="这里输入取消按钮显示的文字" title="这里是标题" show-cancel-button v-model="show" @confirm="" v-cloak>

</van-dialog>

文档链接：https://youzan.github.io/vant/#/zh-CN/quickstart#fang-shi-si.-tong-guo-cdn-yin-ru

以上这篇vant组件中 dialog的确认按钮的回调事件操作就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vant-ui组件调用Dialog弹窗异步关闭操作

    需求描述: 需求描述:官方文档又是组件调用方式,又是函数调用方式. 我就需要一个很简单的:点击操作弹窗显示后,我填写一个表单,表单校验通过后,再调用API接口,返回成功后,关闭弹窗. 一个很简单的东西,element-ui用的很方便,在这里就懵比了,刚开始做的,弹窗关闭了,才返回异步接口调用的结果.网速慢点,用起来真的很不好. 正确的解决方式一: <van-dialog v-model="showDialog" title="提示" show-cancel-b

  • 在vant 中使用cell组件 定义图标该图片和位置操作

    @本来想直接使用icon组件,使用阿里的图标库,可是怎么弄也不行,折腾一下午,最后决定使用最笨的办法,直接上代码 vant 中使用cell组件 定义图标该图片和位置像微信信息栏一样 <div> <van-cell-group class="vanCellGroupClass"><!--../../assets/tou.png--> <!--<van-cell icon="" title="二级经营单位&quo

  • vue 公共列表选择组件,引用Vant-UI的样式方式

    此组件用于公共选择组件.引用Vant UI 作为样式 特性: 1.支持动态.静态数据源. 2.支持分页加载. 3.支持模糊搜索. 4.支持单选.多选. 组件源码: <template> <div class="gn-PubSelect"> <van-action-sheet v-model="inShow"> <div class="gn-PubSelect-main" :style="{'he

  • vant组件中 dialog的确认按钮的回调事件操作

    不知道是不是我理解有问题,看了vant的组件库,他的文档是这样说的 然后我就绑定了事件 :confirm 结果他的触发机制是:加载页面时会触发,点击按钮打开模态框时会触发,点击确定会触发,点击取消也会触发. 经过查阅资料以后,可以绑定他一个事件:beforeClose 这个事件的回调 有两个参数, 第一个参数是来判断点击的是确认按钮还是取消按钮.第二个参数我感觉就是可以关闭模态框. 补充知识:修改 vant 弹窗Dialog 组件调用是确认按钮与取消按钮的文字 Props 有关props 两个属

  • Unity 按钮添加OnClick事件操作

    Unity 按钮添加OnClick事件操作

    1.在Hierarchy面板右键UI>Button 2.创建一个空物体 3.创建一个脚本 ButtonClick.cs,定义一个Click方法(必须为Public) 4.把脚本挂在到空物体上 5.将空物体拖到如下图 None(Object) 位置 6.在右侧选择 ButtonClick>Click 方法 7.如下 补充:Unity三种添加Click事件 我就废话不多说了,大家还是直接看代码吧~ public Button btn; void Start () { // 一.btn.onClic

  • 在Vue组件中获取全局的点击事件方法

    使用场景: 在Vue组件中点击某元素之外的地方移除该元素 需求: 如上图所示,"用户列表"页面有三个Vue组件组成,分别是"菜单组件","导航组件"和"列表组件".其中"列表组件"中包含一个"下拉菜单",当我们点击"下拉菜单"以外的区域隐藏下拉菜单. 解决方法一: 出现"下拉菜单"的同时,建一个透明的遮罩层,然后只有"下拉菜单"

  • vue中vant组件样式失效问题及解决

    目录 vant组件样式失效 通常有以下几种解决方法 修改vant组件样式 vant组件样式失效 vue项目中引入vant组件,若发现vant组件样式失效 通常有以下几种解决方法 方法一:引入全局样式   在引入vant组件的地方或者全局引入vant组件所有的样式,引入方法为:在vue引入vant的页面中,添加以下代码: import 'vant/lib/index.css' 这样可以引入vant全部样式,不过通常我们可以按需引入,如法二,局部引入部分样式即可. 方法二:局部引入样式   顾名思义

  • Vue中使用element-ui给按钮绑定一个单击事件实现点击按钮就弹出dialog对话框

    目录 1.需求描述 2.功能实现 1.创建按钮 2.创建对话框 3.对话框与按钮的绑定 3.对话框表单的改造 4.对“状态”Switch开关所提交的类型进行修改 5.完整代码 总结 1.需求描述 想要实现点击一个按钮就弹出一个对话框,在对话框中可输入数据进行提交,在点击取消时对话框关闭 2.功能实现 1.创建按钮 在element中把找到按钮的代码放到div里 <el-row> <el-button type="primary" plain>新增</el-

  • 详解VUE项目中安装和使用vant组件

    Vant 是有赞前端团队基于有赞统一的规范实现的 Vue 组件库,提供了一整套 UI 基础组件和业务组件. 特性 50+ 个经过有赞线上业务检验的组件 单元测试覆盖率超过 90% 完善的中英文文档和示例 支持babel-plugin-import 支持 TypeScript 支持 SSR 组件中文文档地址:https://youzan.github.io/vant/#/zh-CN/intro 1.创建VUE项目之后进入项目目录运行安装命令: npm i vant -S 2.安装 babel-pl

  • 详解如何搭建mpvue框架搭配vant组件库的小程序项目

    1. vant 介绍 ### 扫码体验 Vant - 轻量.可靠的移动端 Vue 小程序 组件库.由 有赞 公司开发与维护.提供了一系列美观.优质的移动端组件.vant 官网 2. 在普通小程序怎么使用 vant 组件 使用之前 使用 Vant Weapp 前,请确保你已经学习过微信官方的小程序简易教程 和自定义组件介绍 安装 方式一. 通过 npm 安装 (推荐) 小程序已经支持使用 npm 安装第三方包,详见npm 支持 # npm npm i vant-weapp -S --product

  • 微信小程序引入Vant组件库过程解析

    微信小程序引入Vant组件库过程解析

    前期准备 Vant Weapp组件库: https://youzan.github.io/vant-weapp/#/intro 1.先在微信开发者工具中打开项目的终端: 然后初始化一个package.json文件:输入命令:npm init 然后一路回车默认的即可: npm init 项目就回产生一个package.json文件: { "name": "miniprogram", "version": "1.0.0", &qu

  • 使用Vue3+Vant组件实现App搜索历史记录功能(示例代码)

    使用Vue3+Vant组件实现App搜索历史记录功能(示例代码)

    最近在开发一款新的app项目,我自己也是第一次接触app开发,经过团队的一段时间研究调查,决定使用Vue3+Vant前端组件的模式进行开发,vue2开发我们已经用过几个项目了,所以决定这一次尝试使用Vue3来进行前段开发. 我刚开始负责搜索功能的开发,有历史搜索记录的需求,一开始我认为这是记录的存储信息也会放在一个数据库表里面,但经过一番调查,发现并不是这样,而是要存储在本地.但是网上的方法也并没有完全解决问题,经过一番尝试,终于给搞好了,话不多说,直接上效果图. 初始化不显示历史搜索记录 回车

随机推荐