van-picker隐藏取消确认，自定义按钮实现其功能

最新推荐文章于 2024-04-23 16:26:38 发布
最新推荐文章于 2024-04-23 16:26:38 发布
阅读量243 收藏
点赞数 1
文章标签： 前端 经验分享
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_64152677/article/details/137080648
版权

把van-picker的show-toolbar设置为false，会隐藏自带的“取消”“确认”

在van-picker中添加ref，比如picker

在自定义按钮的点击方法中直接用ref操作van-picker自带的方法，取消好说，一般都是把外面一层组件关闭就行

确认时用this.$refs.picker.confirm()

——————————

刚开始找了一圈没找到解决方法，自己吐槽一下：

van-picker自带confirm，change，cancel方法，change的第二个参数能获取改变后的值，但是等我点击后直接关闭van-picker，change是获取不到默认值的，只有confirm方法能获取到

 

早睡早起身体好mo
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
van 自定义组件_vue移动端两列选择器van-picker，自定义数据及改造确定按钮
weixin_39760295的博客
12-19 2517
【更新】往往UI给的设计稿和我们找到的组件库是有出入的，比方说人家是两列，设计给出三列；人家显示五行，设计偏要显示三行；人家有确定和取消按钮，且左右对齐，设计非要把取消按钮拿掉，且要求确定居中！如下图：我们能怎么办，只能根据UI设计稿改呗！改造代码如下：:columns="columns":visible-item-count='3'@change="handleChange"/>请选择正确...
微信小程序 - 自定义picker 封装成插件
06-27
微信小程序 - 自定义picker 封装成插件 可以自定义多级数据picker 最多四级 最少一级 自定义二级数据联动 自定义三级数据联动 自定义四级数据联动 封装成插件 全局使用
el-date-picker 英文改中文.doc
11-18
https://blog.csdn.net/xuelang532777032/article/details/121287203,内有博客截图，方便没有vip的小伙伴下载
Wordpress-ACF-Multi-Dates-Picker:为高级自定义字段WordPress插件添加“多日期选择器”字段类型
05-18
ACF WordPress多日期选择器字段 为WordPress插件添加“多日期选择器”字段类型。 兼容性 该附加组件可与以下产品一起使用： 版本5 版本4 安装 下载.zip 解压缩.zip并将文件夹重命名为“ acf-multidates-picker” 将“ acf-multidates-picker”文件夹复制到您的plugins文件夹中 通过插件管理页面激活插件 屏幕截图
uni-app uni-data-picker 省市区数据表
06-16
<uni-data-picker> 是一个选择类datacom组件。支持多列级联选择。列数没有限制，如果屏幕显示不全，顶部tab区域会左右滚动。 适用于uni-app使用uni-data-picker实现省市区选择器的json数据
小程序 vant-piker或则vant-area不显示标题和确认取消按钮
fdyputi的博客
05-20 3580
使用vant-picker或vant-area时，有时候会无法显示取消和确认按钮 代码及截图如下： <van-popup show="{{showAddress}}" position="bottom" custom-style="height:42%" bind:click-overlay="closeAddress" > <van-picker
微信小程序组件的显示与隐藏
艾丽的博客
01-21 2022
wxml: <van-picker class="{{showPicker ? 'show' : 'hide'}}" columns="{{ columns }}" bind:change="onChange" bind:confirm="onConfirm" show-toolbar/> js: data: { // ...省略其它非此处问题相关的代码 showPicker: false // picker组件的显示与隐藏，默认不显示 } wxss: .hide{ dis
react-native-syan-image-picker：React-Native多图片选择支持裁剪压缩
02-04
可自定义裁剪区域大小，支持圆形裁剪 可设置压缩质量 可设置是否返回图片base64编码 支持记录当前已选定的图片 支持删除指定下标的图片 生活 安装使用 安装 // Step 1 基于 npm npm install react-native-syan-image...
vue 移动端 月份滑块组件
qq_36702286的博客
11-08 323
月份滑块组件
前端面试题
m0_48038376的博客
03-19 1178
如果要频繁切换某节点，使用v-show(切换开销比较小，初始开销较大)。如果不需要频繁切换某节点使用v-if（初始渲染开销较小，切换开销比较大）。
vant的picker组件，传值为对象数组，colunmsFieldNames属性
qq_46416934的博客
03-03 1333
// 组件用法 colunmsFieldNames:用来确定展示内容的键（picker里面默认展示键text的值），具体用法如下： <van-picker title=“标题” :columns=“columns” @change=“onChange” :colunmsFieldNames="{text:‘name’}"/> // script <script setup lang="ts"> const columns = reactive([[ {
零基础编写微信小程序的问题总结(不定时更新)
欢迎小伙伴们的评论和私信，工作日基本都会上来看看的哈
09-24 9468
此乃段某研习微信小程序时的无上心法！！！！
【前端】数组的常用处理函数
lcukyNwa的博客
04-22 476
item------->每个元素值 (必)index----->索引（可选）arr-------- >当前数组（可选）推荐vscode的一款插件来写以下的demo，该插件可以直接在js文件中显示结果，搜 Quokka.js用这个插件去新建一个js文件，直接就运行在node上了forEach不会返回一个新的数组，里面改值会影响原数组，其他方法不影响原数组map可以返回新数组 用于映射，如每个元素都加倍或执行其他转换操作every返回一布尔值，需数组中全部满足。
C++ WebServer的细节理解
我的博客
04-22 630
在非阻塞模式下，如果 I/O 操作不能立即完成（例如，因为没有数据可读 或 写缓冲区满），系统不会让调用进程阻塞等待，而是立即返回一个错误（通常为 EAGAIN 或 EWOULDBLOCK）。先查询文件描述符 fd 当前的标志，然后将 O_NONBLOCK 标志加入其中，并通过 F_SETFL 来更新文件描述符，最终实现将该文件描述符切换为非阻塞模式。这意味着，如果没有待处理的连接请求（即没有客户端尝试连接到服务器），accept() 会一直阻塞，直到有新的连接请求到达或发生其他特定条件（如超时）为止。
SpringBoot项目打包分离高阶操作
最新发布
Record Little
04-23 678
虽然传输jar包 比较大，但是安全性、稳定性比较高，不需要关注pom.xml 添加了新的依赖、更新了版本号等等影响版本功能的操作。关注maven的特性， profiles即可满足， 根据不同的activation 状态，激活不同的build操作。每次修改一小部分代码或仅仅更新某个依赖jar包时，都需要重新进行整个项目的构建、打包、上传和部署。但是当你的项目趋于稳定，只有业务上的逻辑变更时，如果使用分离版本，可以加快迭代、更新的速度。弊端： 需要配置IDE命令，修改依赖时需要同时修改2处。
webman 事务回滚失效问题记录
juan9872的博客
04-21 853
webman是一款基于workerman开发的高性能HTTP服务框架。webman用于替代传统的php-fpm架构，提供超高性能可扩展的HTTP服务。你可以用webman开发网站，也可以开发HTTP接口或者微服务。除此之外，webman还支持自定义进程，可以做workerman能做的任何事情，例如websocket服务、物联网、游戏、TCP服务、UDP服务、unix socket服务等等。
Vue-router的动态路由：获取传递的值
woliuhuaqiangla的博客
04-22 431
Vue.js是一款流行的JavaScript框架，用于构建单页面应用程序。它提供了许多有用的功能，其中之一是Vue-router，它允许您轻松地管理应用程序的路由。Vue-router支持动态路由，这意味着您可以在路由中使用变量，并在组件中访问它们。本文将介绍如何定义Vue-router的动态路由，以及如何获取传递的值。动态路由的优缺点动态路由是指根据特定的参数来动态地生成路由，这在使用Vue-router时是非常常见的。
WebSocket 快速入门 - springboo聊天功能
m0_56308072的博客
04-21 964
HTTP和WebSocket都是啥？
van-datetime-picker 自定义时间
07-12
要自定义时间选择器（van-datetime-picker），你需要使用van-datetime-picker组件的属性和事件来实现。下面是一个示例代码和解释，帮助你自定义时间选择器： ```html <template> <div> <van-datetime-picker v-model="value" type="time" :formatter="formatter" :columns-order="columnsOrder" @confirm="onConfirm" /> </div> </template> <script> export default { data() { return { value: new Date(), columnsOrder: ['minute', 'second'], // 自定义时间选择器的列顺序 }; }, methods: { formatter(type, value) { if (type === 'minute') { return `${value}分`; // 自定义分钟的格式 } if (type === 'second') { return `${value}秒`; // 自定义秒的格式 } return value; }, onConfirm(value) { console.log(value); // 在确认选择后触发的事件，你可以在这里处理选择的时间值 }, }, }; </script> ``` 在上面的示例中，我们使用了`v-model`指令来绑定时间选择器的值到`value`属性。`type`属性设置为`time`表示我们只选择时间。`formatter`属性用于自定义显示的时间格式，我们根据类型（minute或second）返回自定义格式。`columnsOrder`属性设置为我们想要的列顺序，这里我们只选择了分钟和秒钟。`@confirm`事件在确认选择后触发，我们可以在这里处理选择的时间值。 你可以根据需要修改上述代码，并根据van-datetime-picker的文档进行更多自定义。希望对你有帮助！

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值