vant-dialog 弹出框 多个按钮

最新推荐文章于 2024-06-18 18:15:32 发布
最新推荐文章于 2024-06-18 18:15:32 发布
阅读量4.2k 收藏 2
点赞数
分类专栏： 前端 vant 文章标签： vue 前端 html5 javascript css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44501715/article/details/103762975
版权

开发过程中，碰到恶心需求

简单介绍

一些简单使用，直接看网站介绍即可
https://youzan.github.io/vant/#/zh-CN/dialog
但是，碰到客户的需求更改，只能自己修改
1.dialog 弹出框，组件默认的有确定及取消按钮
首先，在开发者模式下，找到该确定或取消的css样式，设置：
display: none; 这时就看到无论确定或取消，就会显出不了
在这里插入图片描述
2.然后在dialog弹出框中，添加自己所需的按钮
在这里插入图片描述
然后设计样式，等等

耳言
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
自定义带两个按钮的Dialog-修改
07-28
自定义带两个按钮的Dialog
纯js 三个按钮的模态对话框
wangduqiang747的博客
06-11 1083
纯js 三个按钮的模态对话框 原创 Confirm3ButtonModel.html: <!-- 三个按钮的模态对话框 added by duqiang.wang 使用说明: 场景1: var result = window.showModalDialog("Confirm3ButtonModel.html", "<table border='1px solid #ccc' ><tr>&l
vant/weapp 对话框组件 van-dialog 点击确认时支持校验成功之后再关闭
最新发布
weixin_42466981的博客
06-18 485
参考：https://vant-ui.github.io/vant-weapp/#/dialog使用属性：props --> before-close通过官方文档可以看出，before-close 是一个属性（Props），而不是暴露出来的事件（Events），所以只要按照属性的方式定义before-close对应的函数，便可以在关闭对话框之前做一些校验，校验通过之后才可以关闭对话框。 2、定义 onBeforeClose 属性 3、在确认事件里面修改 onBeforeClose 以上变
vant 通过组件调用 Dialog 时 show-confirm-button使用及展示多个按钮
qq_35469137的博客
11-02 6847
最近开发复盘项目时遇到这么一个问题 原先dialog自带的取消和确定按钮要隐藏掉 写自定义按钮并且要求有三个按钮 查vant官网只有俩按钮的 找了一些资料实现了隐藏原先按钮并多个自定义按钮 首先来看普通的dialog的使用 官网Vant - Mobile UI Components built on Vue 这样的写法是只有取消和确认两个按钮的 接下来看多个的实现过程 1 首先要隐藏掉默认的取消和确定按钮 看官网文档 给show-confirm-button和show-cancel-b..
vant3 之 van-dialog 弹出框之组件调用 ：vue3+TS
潮汐未见潮落的博客
11-23 5562
vant3 之 van-dialog 弹出框之组件调用 ：vue3+TS
【Vant Weapp】van-dialog 弹出框
joanmelon的博客
11-16 2714
☀️大家好，我是宾果的救星~希望记录的学习和收获能够帮助大家在开发过程中得到思路并且解决难题。希望大家多多点赞~爱你们哟~
vant-ui组件调用Dialog弹窗异步关闭操作
01-18
需求描述： 需求描述：官方文档又是组件调用方式，又是函数调用方式。 我就需要一个很简单的：点击...van-dialog v-model=showDialog title=提示 show-cancel-button :before-close=onBeforeClose @confirm=hand
vant组件中 dialog的确认按钮的回调事件操作
01-22
不知道是不是我理解有问题，看了vant的组件库，他的文档是这样说...补充知识：修改 vant 弹窗Dialog 组件调用是确认按钮与取消按钮的文字 Props 有关props 两个属性 confirm-button-text 与 cancel-button-text 。 co
vant-ui框架的一个bug(解决切换后onload不触发)
01-22
使用了vant-ui里的 List 列表 瀑布流滚动加载，用于控制长列表的展示 先说使用 1.用npm下载该模块包 npm i vant -S 2.引入组件 官方提供了三种方法。（我使用了第三种，全局引入方法） 方式一. 使用 babel-plugin...
微信小程序使用 vant Dialog组件的正确方式
10-15
"van-dialog": "path/to/vant-weapp/dist/dialog/index" } } ``` 确保替换 `path/to/vant-weapp` 为你的实际文件路径。 2. 在对应的 WXML 文件中，将 Dialog 组件添加到页面结构中。例如，在 xxx.wxml 中： ```...
知识记录三：自定义Dialog
hehota的博客
01-11 613
Android中作为与用户互动的控件之一Dialog，系统提供的AlertDialog和Dialog尽管可以达到我们的目的，但是那戳的不行的外观大多情况下总是不能让我们满意，再加上设计师追求完美与整体风格的一致性，使得自定义Dialog成为开发软件中不可缺少的一环。自定义Dialog一般会经过下面几个步骤1) 要自定义Dialog，自然要先继承自Dialog2) 按照需求设置styles，dialo
自定義dialog 底部兩個button的style
u010919133的专栏
06-12 852
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
利用Vant Weapp 组件库 Dialog组件实现自定义倒计时弹出框
weixin_42285486的博客
01-29 822
Vant Weapp - 轻量、可靠的小程序 UI 组件库 (gitee.io)Vant Weapp 安装参考。
小程序基本命令
aiven1637的博客
10-30 3285
onLoad: function () { // 生命周期函数--监听页面加载 onReady: function () { // 生命周期函数--监听页面初次渲染完成 }, onShow: function () { // 生命周期函数--监听页面显示 }, onHide: function () { // 生命周期函数--监...
vant框架中Dialog样式的修改方法（此处使用的是通过函数调用 Dialog的样式修改方法）
热门推荐
weixin_50679884的博客
06-29 1万+
vant框架中Dialog样式的修改方法--getContainer属性的使用（此处使用的是通过函数调用 Dialog的样式修改方法）
vue2项目Vant组件Dialog 弹出框异步关闭的坑
前端开发小白9527
06-28 2974
vue2项目Vant组件Dialog 弹出框异步关闭的坑
van2的弹窗自定义事件
True_story的博客
04-26 571
Vant UI自定义弹窗两种方式的实现过程
自定义Dialog
lmm1217的博客
03-14 1132
自定义Dialog 在工作中会发现，系统的dialog已经不能满足我们的需求了，我们想要自己设计的美观的各种样式，那么自定义样式的dialog就灰常重要了，我的效果如下 自定义样式dialog的步骤概要如下 ## - 先自定义一个弹出框的样式 - 自己实现CustomDialog类，继承自Dialog，实现里面方法，在里面加载自定义样式的弹出框；
vant weapp dialog弹出框 怎么同时自定义标题图片和内容
05-24
可以使用 `Dialog` 组件的 `custom-style` 属性来自定义样式，实现同时自定义标题图片和内容。具体步骤如下： 1. 在 `custom-component` 中定义一个 `Dialog` 组件，设置 `custom-style` 属性，例如： ``` <custom-component> <van-dialog id="my-dialog" custom-style="title-image: url('图片地址');"> <view slot="content">弹窗内容</view> </van-dialog> </custom-component> ``` 2. 在 `custom-style` 中设置 `title-image` 样式，例如： ``` .custom-vant-dialog { .van-dialog__header { background-image: var(--title-image); background-size: contain; background-repeat: no-repeat; background-position: center; height: 100px; } } ``` 其中，`.custom-vant-dialog` 是 `Dialog` 组件的自定义类名，`--title-image` 是 `title-image` 属性的变量名，可以在 `custom-style` 中使用。 3. 在 `custom-component` 中调用 `Dialog` 组件，并设置 `custom-style` 属性，例如： ``` <custom-component> <van-button open-type="share" bindtap="showDialog">打开弹窗</van-button> </custom-component> ``` 在 `showDialog` 函数中设置 `Dialog` 组件的 `custom-style` 属性，例如： ``` Page({ showDialog() { const dialog = this.selectComponent('#my-dialog'); dialog.setData({ 'customStyle': 'title-image: url(图片地址);' }); dialog.show(); } }) ``` 这样就可以同时自定义标题图片和内容了。需要注意的是，`Dialog` 组件的 `custom-style` 属性只能在弹窗显示前设置，否则无法生效。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值