vant 通过组件调用 Dialog 时 show-confirm-button使用及展示多个按钮

最新推荐文章于 2024-05-21 15:42:14 发布
最新推荐文章于 2024-05-21 15:42:14 发布
阅读量6.6k 收藏 6
点赞数 4
文章标签： vue.js 前端 javascript 前端框架
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_35469137/article/details/121106310
版权

最近开发复盘项目时遇到这么一个问题 原先dialog自带的取消和确定按钮要隐藏掉 写自定义按钮并且要求有三个按钮 查vant官网只有俩按钮的 找了一些资料实现了隐藏原先按钮并多个自定义按钮

首先来看普通的dialog的使用 官网Vant - Mobile UI Components built on Vue

这样的写法是只有取消和确认两个按钮的 接下来看多个的实现过程

1 首先要隐藏掉默认的取消和确定按钮 

看官网文档

给 show-confirm-button和show-cancel-button属性赋值false就可以实现 说起来简单 写的时候却遇到了麻烦 show-confirm-button='false'这种赋值是不对的 编译器报错false为字符串而不是boolean值 搞了半天终于给解决了

需要加:以及去掉引号

来看正确写法

这样就可以直接隐藏了

下面说多个按钮的写法

 

隐藏掉后直接写你需要的按钮就行啦 需要什么样式自定义即可 

李白和星星
关注
  • 4
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
vant-ui组件调用Dialog弹窗异步关闭操作
01-18
需求描述： 需求描述：官方文档又是组件调用方式，又是函数调用方式。 我就需要一个很简单的：点击操作弹窗显示后，我填写一个表单，表单校验通过后，再调用API接口，返回成功后，关闭弹窗。 一个很简单的东西，element-ui用的很方便，在这里就懵比了，刚开始做的，弹窗关闭了，才返回异步接口调用的结果。网速慢点，用起来真的很不好。 正确的解决方式一： <van-dialog v-model=showDialog title=提示 show-cancel-button :before-close=onBeforeClose @confirm=hand
vue 调用vant弹窗组件
weixin_48188065的博客
08-28 1841
//在页面引入 <van-icon name="delete-o" @click="allDel()"/> //在main.js文件中 import { Dialog } from 'vant'; Vue.use(Dialog); //在methods中定义方法 methods: { allDel(){ this.$dialog.confirm({ // title:'标题奥', message:'确定要清除全部历史记录吗',...
vue3封装一个Dialog组件和showDialog函数
最新发布
m0_52913477的博客
05-21 190
基于vue3封装弹框Dialog组件和showDialog函数
vue3修改vant框架中的dialog弹出框样式
qq_45755298的博客
03-22 1027
在vue3中，通过showConfirmDialog函数方式使用Dialog弹窗，由于他是挂载到根节点(#app)上，所以没有办法直接在css中修改样式。看了官方文档之后，发现可以使用teleport这个属性值，修改dialog组件挂载的节点。若同时有多个dialog弹窗样式不同且挂载到同一节点，则可以通过className属性自定义类名。然后在css中通过各自类名修改样式。若同时有多个页面都需要修改dialog样式，不同页面中挂载的节点类名需要不同！
vite+vant+vue3新闻客户端app（二）
qq_48666244的博客
02-13 610
然后你会神奇的发现点击的那个推荐频道跑到我的频道中了，我们并没有去手动的删除点击的这个推荐频道，但是它没了！主要是因为推荐频道是通过一个计算属性获取的，计算属性中使用了 channels（我的频道）数据，所以只要我的频道中的数据发生变化，那么计算属性就会重新运算获取最新的数据。因为文章列表组件中请求获取文章列表数据需要频道id，所以频道id应该作为props参数传递给文章列表组件，为了方便，我们直接把频道对象传给文章列表组件就可以了。在文章列表中请求获取对应的列表数据，展示到列表中。
Vant 2 调用Dialog组件确认与取消按钮的回调事件
imcholl的博客
05-24 3094
Vant2 Dialog组件官方文档：https://youzan.github.io/vant/v2/#/zh-CN/dialog 消息提示 <script> Dialog.alert({ title: '标题', message: '弹窗内容', confirmButtonText: '确认按钮文案', cancelButtonText: '取消按钮文案', theme: 'round-button', }) .then(() => { //
vant4中如何修改Dialog弹框内容的字体大小
时清云的博客
03-14 812
最近在开发一个移动端的需求，用的UI组件库是vant4。简单地总结一下，如何修改Dialog弹框内容的字体大小。这样 message 内容中的字体大小就是16px了。那么如何修改message中的字体大小呢？我们先看一下Dialog弹框简单的使用。
vant组件中 dialog的确认按钮的回调事件操作
01-22
不知道是不是我理解有问题，看了vant的组件库，他的文档是这样说...补充知识：修改 vant 弹窗Dialog 组件调用是确认按钮与取消按钮的文字 Props 有关props 两个属性 confirm-button-text 与 cancel-button-text 。 co
微信小程序使用 vant Dialog组件的正确方式
10-15
Vant包含了近50个经过实际业务检验的组件，例如 Dialog 组件，它在微信小程序中的使用方法是本文的重点。 首先，Vant 的 Dialog 组件是一个弹窗对话框，它可以用于显示警告、确认或输入等操作。在微信小程序中使用 ...
Vant-Aliapp：支付宝小程序版本Vant组件库
02-26
npm i vant-aliapp -S --production 通过yarn安装 yarn add vant-aliapp --production npm使用 。 下载代码使用 直接通过git下载Vant Aliapp源代码，添加alipay alipay/npm目录副本到自己的项目中 git clone ...
微信小程序 - dialog
03-29
可作为component 使用 (此图片来源于网络，如有侵权，请联系删除! ) 直接上代码 (此图片来源于网络，如有侵权，请联系删除! )(此图片来源于网络，如有侵权，请联系删除! )(此图片来源于网络，如有侵权，请联系删除! ...
小程序 | Vant Weapp Dialog 弹出框的before-close用法
ruoyan8899的博客
05-09 2398
弹出框点击确认按钮会自动关闭，但是项目需要在点击确认前校验是否选择了角色，所以要阻止默认关闭事件。 wxml //弹窗 <view class="dialogConBox"> <van-radio-group value="{{ radio }}" bind:change="getUserType"> <van-cell-group> <van-cell title="供体" clickable data-name="d
Vant组件库使用过程中的小记（组件调用Dialog的show-cancel-button置为false）
BigFamer的博客
04-29 5431
遇到的问题（二） 接上篇文章的项目。因为我需要在Vant的Dialog弹框里边加一个Form表单，所以我选择通过组件调用的形式来引用。产品那边要求这个弹框点击遮罩关闭，不需要确定按钮。vant提供了这样一个props属性（show-cancel-button，这个属性值默认为true），来控制弹框确定按钮的现实与隐藏。可是我在Dialog标签中设置show-cancel-button = fals...
vant Dialog.confirm确认框同步确认
热门推荐
qq_38935512的博客
12-31 1万+
Dialog.confirm 结合 async和await 可以达到同步得效果 async aaa() { await Dialog.confirm({ title: "标题", message: "弹窗内容", }) .then(() => { // on confirm }) .catch(() => { // on cancel
show-confirm-button的bug
m0_51077750的博客
03-10 226
vant官方文档上说show-confirm-button属性是布尔类型。
【已解决】vue3+vant 引入Dialog Toast都会失败报错not defined
baidu_38730364的博客
09-08 6329
vant按需引入其他的组件没有问题，但是在引入Dialog时报错not defined.测试中，点击弹出的那个引入也可以，只有Dialog.confirm类似的就会报错，后面测试类似的Toast也是这样。在网上找了好多，都没有具体的解决方法。 后面看到一个帖子给的方法试了下，算是成功了。 我是在main.js里写要引用的组件，这样就可以全局使用了，但是Dialog和Toast上遇到了阻碍，对于这两个，在要使用的地方单独引用就不会报错。 原main.js： import { Button, Dial
小程序基本命令
aiven1637的博客
10-30 3264
onLoad: function () { // 生命周期函数--监听页面加载 onReady: function () { // 生命周期函数--监听页面初次渲染完成 }, onShow: function () { // 生命周期函数--监听页面显示 }, onHide: function () { // 生命周期函数--监...
messageBox的入门学习
qq_40765784的博客
06-23 1651
messageBox的入门学习
自定義dialog 底部兩個button的style
u010919133的专栏
06-12 831
1 MyDialog.java import android.app.Dialog; import android.content.Context; import android.os.Bundle; import android.view.View; import android.widget.Button; public abstract class MyDialog extends
loading怎么关闭 vant_vant-ui组件调用Dialog弹窗异步关闭操作
06-10
如果你使用了 Vant UI 组件库提供的 Dialog 弹窗组件，并且需要在异步操作完成后关闭 Dialog，你可以通过以下方式实现： 1. 在打开 Dialog 弹窗时，将返回的 Dialog 实例保存下来： ```javascript const dialog = Dialog.alert({ title: '提示', message: '这是一条提示消息' }); ``` 2. 在异步操作完成后，调用 Dialog 实例的 `close` 方法关闭弹窗： ```javascript async function doAsyncTask() { // 异步操作 } async function handleClick() { const dialog = Dialog.alert({ title: '提示', message: '这是一条提示消息' }); try { await doAsyncTask(); dialog.close(); } catch (error) { console.error(error); } } ``` 这样就可以在异步操作完成后关闭 Dialog 弹窗了。注意，由于 `Dialog.alert` 方法返回的是一个 Promise 对象，因此需要在调用 `doAsyncTask` 方法时使用 `await` 关键字等待异步操作完成。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值