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

最新推荐文章于 2024-04-06 11:46:40 发布
最新推荐文章于 2024-04-06 11:46:40 发布
阅读量8.7k 收藏 4
点赞数
分类专栏： vant vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/KLS_CSDN/article/details/108378253
版权
vue 同时被 2 个专栏收录
45 篇文章 2 订阅
订阅专栏
vant
7 篇文章 1 订阅
订阅专栏

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

KLW75
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
修改vant 弹窗Dialog组件调用是确认按钮与取消按钮的文字
草巾冒小子的博客
01-25 6061
修改vant 弹窗Dialog组件调用是确认按钮与取消按钮的文字
Ajax控件详解、ConfirmButton、TextBoxWatermark
07-15
Ajax控件详解、FilteredTextBox、ConfirmButton、TextBoxWatermark、PasswordStrength、AlwaysVisibleControl
自定义带两个按钮的Dialog-修改
07-28
自定义带两个按钮的Dialog
微信小程序vant弹窗组件的实现方式
10-15
主要介绍了小程序vant弹窗组件的实现方式，本文给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
学习Vant中，van-dialog不能弹窗问题解决。
最新发布
weixin_58853115的博客
04-06 381
van-dialog v-model:show="addressShow" title="添加地址" show-cancel-button>在学习前端Vue中，使用van-dialog发现不能弹窗，源代码如下。title="添加地址" show-cancel-button>虽然在VS编辑器上有红色错误提示。一点点debug发现，问题出在。如全局注册，依然不起作用。参考网上大神的解决方案，
VantUI中单选和多选修改为按钮样式
chujian0325的博客
12-21 2550
VantUI中单选van-radio和多选van-checkbox设置为按钮样式
关于使用vantUI Field 输入框的问题
weixin_45077505的博客
09-19 9813
在使用vantUI Field 输入框的时候发现了一些问题， 最初我是在main.js全局引入的组件，但是页面报错组件没有注册 后来尝试了在页面中局部引入，就可以正常使用，也没明白到底是哪里出了问题 ...
小程序基本命令
aiven1637的博客
10-30 3234
onLoad: function () { // 生命周期函数--监听页面加载 onReady: function () { // 生命周期函数--监听页面初次渲染完成 }, onShow: function () { // 生命周期函数--监听页面显示 }, onHide: function () { // 生命周期函数--监...
element的自定义confirm组件
weixin_43837268的博客
03-04 6330
1.安装element-ui npm i element-ui -S 2.使用 const h = this.$createElement; this.$msgbox({ title: '消息', message: h('p', null, [ h('span', null, '内容可以是 '), ...
【vue】this.$alert、this.$confirm的简单使用
ChaoChao66666的博客
06-14 6972
【vue】this.$alert、this.$confirm的简单使用
VUE+element+其他插件，导出功能的简单实现,
测试领域专家，多领域测试技术、管理、工具都略懂，略懂一二
04-26 4177
我们的导出excle，今天来推荐使用一个插件vue-json-excel， 参考：https://blog.csdn.net/junkaicool/article/details/96423061 第一步：先下载 npm install vue-json-excel -S 第二步：导入 import JsonExcel from 'vue-json-excel'; 第三步：添加组件 <--导出事件--> <download-excel class="blueBt
vue 修改 this.$confirm 的文字样式、自定义样式
金乌的博客
12-01 4959
四、使用 customClass 设置MessageBox 的自定义类名，从而自定义样式。二、createElement 新建元素和对象，然后对新建的元素进行标签化设置。但偶尔也需要修改文字等样式，这时该怎么做呢？就会被当作 HTML 片段处理。属性设置为 true，
vant组件中 dialog的确认按钮的回调事件操作
01-22
不知道是不是我理解有问题，看了vant的组件库，他的文档是这样说...补充知识：修改 vant 弹窗Dialog 组件调用是确认按钮与取消按钮的文字 Props 有关props 两个属性 confirm-button-text 与 cancel-button-text 。 co
vant-ui组件调用Dialog弹窗异步关闭操作
01-18
需求描述：官方文档又是组件调用方式，又是函数调用方式。 我就需要一个很简单的：点击操作弹窗显示后，我填写一个表单，表单校验通过后，再调用API接口，返回成功后，关闭弹窗。 一个很简单的东西，element-ui用的...
微信小程序使用 vant Dialog组件的正确方式
10-15
主要介绍了微信小程序使用 vant Dialog组件的正确方式，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
vue：vant实现弹框
qq_36413371的博客
10-31 6468
单个弹出层及picker选择器（实现） // 只要通过一种行为（点击页面的某个按钮）来showPicker=true，让弹框显示出来 。功能：选择性别,学历等都会用到 <template > <div class="vantdemon"> <!-- 单级别选择框：选择性别。学历 --> <div @click="clickFn()......
js修改comfirm提示框中按钮上的文字
热门推荐
bytxl的专栏
02-05 2万+
将按钮替换为“是”，“否”的形式，只支持IE function window.confirm(str) { execScript("n = (msgbox('"+str+"',vbYesNo, '提示')=vbYes)", "vbscript"); return(n); } alert(confirm("重载的confir
vant-ui 使用(2)
kjs--的博客
04-26 1150
vant-ui 使用(2) 记录近期所使用vantui组件的过程 使用过程中用到的vant文档 https://vant-contrib.gitee.io/vant/#/zh-CN/quickstart#tong-guo-npm-an-zhuang Toast 轻提示 1.介绍 使用了toast的页面效果就是会弹出一个黑色半透明的提示 可能使用到的业务场景 ...
Vue组件：自定义弹窗组件Dialog详解
工作的日常记录和平凡的生活分享
10-18 4307
项目中大量的模块因字段都比较少，因此添加和编辑用弹框的形式更加方便，但是UI的设计和现用的组件库的弹框组件差异比较大，只能自己动手封装这么一个组件了。通过自定义弹窗组件ByDialog，我们可以在Vue.js应用中创建高度定制化的弹窗功能。通过属性、事件和插槽的灵活运用，我们可以实现各种弹窗样式和交互效果。
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` 关键字等待异步操作完成。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值