vue3+vant4中表单内嵌picker的默认值设置

vue3+vant4中表单内嵌picker的默认值设置

头一次用vant就在表单默认值上费劲了,搞下来代码量比antd系列的代码量大。废话不说,直接上代码,将这三段代码直接复制到一个组件中即可看到效果。早上5点多就起来捣鼓这玩意,上午以为完成了,发出去一看居然有bug——picker滑动时表单数据同时被修改!于是经查,根据 https://www.cnblogs.com/Super-scarlett/p/17919981.html 又改了一版,见下:

环境版本
“vant”: “^4.9.1”,
“vue”: “^3.4.21”

<script setup lang="ts">
import { ref } from 'vue'
const 地支 = '子丑寅卯辰巳午未申酉戌亥'// 用于picker的v-model的值必须是字符串,数字不行.
const years = Array(100).fill(0).map((_, index) => new Date().getFullYear() - index).map(item => ({ text: item + '' })).reverse()
const year = ref(['1980'])
const _year = ref(['1980'])
const months = Array(12).fill(0).map((_, index) => index + 1).map(item => ({ text: item + '' }))
const month = ref(['6'])
const _month = ref(['6'])
const dates = Array(30).fill(0).map((_, index) => index + 1).map(item => ({ text: item + '' }))
const date = ref(['15'])
const _date = ref(['15'])
const 时辰们 = Array(12).fill(0).map((_, index) => index + 1).map(item => {const text = 地支[item - 1] + '——' + (item === 1 ? '23点(昨)~1点' : `${item * 2 - 3}点~${item * 2 - 1}`)return { text }
})
const 时辰 = ref([时辰们[5].text])
const _时辰 = ref([时辰们[5].text])const showYearPicker = ref(false)
const showMonthPicker = ref(false)
const showDatePicker = ref(false)
const show时辰Picker = ref(false)
const onYearConfirm = ({ selectedOptions }) => {year.value = selectedOptions[0]?.textshowYearPicker.value = false
}
const onMonthConfirm = ({ selectedOptions }) => {month.value = selectedOptions[0]?.textshowMonthPicker.value = false
}
const onDateConfirm = ({ selectedOptions }) => {date.value = selectedOptions[0]?.textshowDatePicker.value = false
}
const on时辰Confirm = ({ selectedOptions }) => {时辰.value = selectedOptions[0]?.textshow时辰Picker.value = false
}
const info = ref(null)const 提交表单 = (values) => {info.value = valuesconsole.log('submit', values);
}
</script>
<template><div class='p-home'><h3>请输入农历出生信息</h3><van-form @submit="提交表单"><van-field v-model="year" is-link readonly name="" label="年份" placeholder="点击选择年份"@click="showYearPicker = true" /><van-popup v-model:show="showYearPicker" position="bottom"><van-picker :columns-field-names='{ value: "text" }' v-model="_year" title="农历出生年份" :columns="years"@confirm="onYearConfirm" @cancel="showYearPicker = false" /></van-popup><van-field v-model="month" is-link readonly name="" label="月份" placeholder="点击选择月份"@click="showMonthPicker = true" /><van-popup v-model:show="showMonthPicker" position="bottom"><van-picker :columns-field-names='{ value: "text" }' v-model="_month" title="农历出生月份" :columns="months"@confirm="onMonthConfirm" /></van-popup><van-field v-model="date" is-link readonly name="" label="日期" placeholder="点击选择日期"@click="showDatePicker = true" /><van-popup v-model:show="showDatePicker" position="bottom"><van-picker :columns-field-names='{ value: "text" }' v-model="_date" title="农历出生日期" :columns="dates"@confirm="onDateConfirm" /></van-popup><van-field v-model="时辰" is-link readonly name="" label="时辰" placeholder="点击选择时辰" @click="show时辰Picker = true" /><van-popup v-model:show="show时辰Picker" position="bottom"><van-picker :columns-field-names='{ value: "text" }' v-model="_时辰" title="农历出生时辰" :columns="时辰们"@confirm="on时辰Confirm" /></van-popup><br /><van-button round block type="primary" native-type="submit">提交</van-button></van-form><br /><p><strong>{{info}}</strong></p></div>
</template>
<style scoped>
.p-home {padding: 1rem;h3 {text-align: left;line-height: 3rem;font-weight: bold;}
}
</style>

如下为早晨第一次尝试,方法看似解决了问题,但出现了个严重bug,就是滑动picker时表单上的数据被同时改变了。

<script setup lang="ts">
import { ref } from 'vue'
const 地支 = '子丑寅卯辰巳午未申酉戌亥'// 用于表单下picker的v-model的值必须是字符串,数字不行,而在单独的picker里可以
const years = Array(100).fill(0).map((_, index) => new Date().getFullYear() - index).map(item => ({ text: item + '' })).reverse()
const year = ref(['1980'])
const months = Array(12).fill(0).map((_, index) => index + 1).map(item => ({ text: item + '' }))
const month = ref(['6'])
const dates = Array(30).fill(0).map((_, index) => index + 1).map(item => ({ text: item + '' }))
const date = ref(['15'])
const 时辰们 = Array(12).fill(0).map((_, index) => index + 1).map(item => {const text = 地支[item - 1] + '——' + (item === 1 ? '23点(昨)~1点' : `${item * 2 - 3}点~${item * 2 - 1}`)return { text }
})
const 时辰 = ref([时辰们[5].text])const showYearPicker = ref(false)
const showMonthPicker = ref(false)
const showDatePicker = ref(false)
const show时辰Picker = ref(false)const info = ref(null)const 提交表单 = (values) => {info.value = valuesconsole.log('submit', values);
}
</script>
<template><div class='p-home'><h3>请输入农历出生信息</h3><van-form @submit="提交表单"><van-field v-model="year[0]" is-link readonly name="" label="年份" placeholder="点击选择年份"@click="showYearPicker = true" /><van-popup v-model:show="showYearPicker" position="bottom"><van-picker :columns-field-names='{ value: "text" }' v-model="year" title="农历出生年份" :columns="years"@confirm="showYearPicker=false" /></van-popup><van-field v-model="month[0]" is-link readonly name="" label="月份" placeholder="点击选择月份"@click="showMonthPicker = true" /><van-popup v-model:show="showMonthPicker" position="bottom"><van-picker :columns-field-names='{ value: "text" }' v-model="month" title="农历出生月份" :columns="months"@confirm="showMonthPicker = false" /></van-popup><van-field v-model="date[0]" is-link readonly name="" label="日期" placeholder="点击选择日期"@click="showDatePicker = true" /><van-popup v-model:show="showDatePicker" position="bottom"><van-picker :columns-field-names='{ value: "text" }' v-model="date" title="农历出生日期" :columns="dates"@confirm="showDatePicker = false" /></van-popup><van-field v-model="时辰[0]" is-link readonly name="" label="时辰" placeholder="点击选择时辰"@click="show时辰Picker = true" /><van-popup v-model:show="show时辰Picker" position="bottom"><van-picker :columns-field-names='{ value: "text" }' v-model="时辰" title="农历出生时辰" :columns="时辰们"@confirm="show时辰Picker = false" /></van-popup><br /><van-button round block type="primary" native-type="submit">提交</van-button></van-form><br /><p ><strong>{{info}}</strong></p></div>
</template>
<style scoped>
.p-home {padding: 1rem;h3 {text-align: left;line-height: 3rem;/* font-weight: bold; */}
}
</style>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/28771.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

2024最新版Node.js下载安装及环境配置教程(非常详细)

一、进入官网地址下载安装包 官网&#xff1a;Node.js — Run JavaScript Everywhere 其他版本下载&#xff1a;Node.js — Download Node.js (nodejs.org) 选择对应你系统的Node.js版本 二、安装程序 &#xff08;1&#xff09;下载完成后&#xff0c;双击安装包&#xf…

【AI原理解析】— 文心一言模型

目录 模型架构 Transformer模型 编码器-解码器结构 训练过程 预训练 微调 关键技术 知识增强 上下文感知 个性化生成 推理与生成 应用场景 问答系统 文本生成 对话系统 模型架构 Transformer模型 文心一言的核心架构采用了Transformer模型&#xff0c;该模型是一…

软考【网络管理员】100道高频考题(含知识点解析),轻松45+

2024上软考已经圆满结束了&#xff0c;距离下半年的考试也只剩下半年不到的时间。需要备考下半年软考网络管理员的小伙伴们可以抓紧开始准备了。 今天给大家整理了——软考网管100道高频考题 &#xff0c;都是核心重点&#xff0c;有PDF&#xff0c;看完一遍教材后打印出来直接…

【电子实验4】TDA2030功率放大电路

&#x1f6a9; WRITE IN FRONT &#x1f6a9; &#x1f50e; 介绍&#xff1a;"謓泽"正在路上朝着"攻城狮"方向"前进四" &#x1f50e;&#x1f3c5; 荣誉&#xff1a;2021|2022年度博客之星物联网与嵌入式开发TOP5|TOP4、2021|2222年获评…

GPRS抄表技术是什么?

1.GPRS抄表技术概述 GPRS(GeneralPacketRadioService)抄表是一种基于移动通信网络的远程抄表技术&#xff0c;它利用GPRS网络进行数据传输&#xff0c;实现了对水、电、气等公用事业表计的实时、远程读取。这项技术的出现&#xff0c;极大地提升了公用事业管理的效率和准确性&…

编写一个简单的Mybatis插件

1.编写一个类&#xff0c;实现Intercepter这个接口 2.完成这个类的方法&#xff0c;并通过注解Intercepts来告诉Mybatis这个插件拦截哪个类和哪个方法 3.在Mybatis的全局配置文件里注册这个插件&#xff0c;让插件生效 4.玩一个实际功能的插件

【leetcode刷题】面试经典150题 88.合并两个有序数组

leetcode刷题 面试经典150 88. 合并两个有序数组 难度&#xff1a;简单 文章目录 一、题目内容二、自己实现代码2.1 实现思路2.2 实现代码2.3 结果分析 三、 官方解法3.1 直接合并后排序3.1.1 算法实现3.1.2 代码实现3.1.3 代码分析 3.2 双指针3.2.1 算法实现3.2.2 代码实现3.2…

Web前端后端结合:深度解析与实战策略

Web前端后端结合&#xff1a;深度解析与实战策略 在数字化时代的浪潮中&#xff0c;Web前端与后端的结合已成为构建高效、稳定且用户友好的网络应用的关键。本文将从四个方面、五个方面、六个方面和七个方面&#xff0c;深入探讨Web前端后端结合的重要性、挑战以及实施策略&am…

【安装笔记-20240616-Windows-Gpg4win 证书管理器】

安装笔记-系列文章目录 安装笔记-20240616-Windows-Gpg4win 证书管理器 文章目录 安装笔记-系列文章目录安装笔记-20240616-Windows-Gpg4win 证书管理器 前言一、软件介绍名称&#xff1a;Gpg4win主页官方介绍 二、安装步骤测试版本&#xff1a;Gpg4win 4.3.1下载链接安装界面…

网站的文章起到什么作用

1.便于用户了解产品服务 如果想要获得更多的用户访问或者转化率&#xff0c;那么网站就得需要高质量、高原创的文章&#xff0c;通过文章可以让用户更好的了解公司的产品和服务&#xff0c;用户会根据自己的需求去选择服务类型&#xff0c;从而可以给公司产生业务订单&am…

攻防演练之-网络安全工作机会大巡礼

书接上文&#xff0c;《网络安全攻防演练风云》专栏之攻防演练之-成功的钓鱼邮件溯源&#xff0c;这里。 午餐的时间到了&#xff0c;每天Nick团队的小伙伴都会到园区外的一家工作餐饭店就餐。这家餐厅是按照称重模式进行菜品选取的&#xff0c;因此种类是相对丰富的&#xff…

android studio 模拟器文件查找

android studio 模拟器文件查找 使用安卓模拟器下载文件后通常无法在系统硬盘上找到下载的文件&#xff0c;安卓 studio studio 其实提供了文件浏览工具&#xff0c;找到后可以直接使用 Android studio 打开 打开 Android studioview 菜单view > Tool Windows > Device…

直播中的美颜技术详解:视频美颜SDK的开发与应用

今天&#xff0c;笔者将深入探讨直播中的美颜技术&#xff0c;解析视频美颜SDK的开发与应用。 一、视频美颜技术概述 视频美颜技术主要通过实时处理视频流&#xff0c;对人脸进行优化和修饰&#xff0c;使直播画面更加美观。这些功能不仅提升了用户的直播体验&#xff0c;还极…

【django问题集】django.db.utils.OperationalError: (1040, ‘Too many connections‘)

一、报错内容 django.db.utils.OperationalError: (1040, Too many connections) 主要体现&#xff1a;就是请求不了后台&#xff0c;登录都登录不了。 二、代码优化 原生django配置的mysql连接是没有连接池的功能&#xff0c;会导致mysql连接创建过多导致连接数超过了mysql服…

国际化项目开发中关于时间的问题一

一、时间、时区、时间戳、UTC这些概念和关系 时间戳&#xff1a;不区分时区&#xff0c;表示自1970年1月1日00:00:00 UTC以来的秒数或毫秒数。 时间与时区关系&#xff1a;时区决定了本地时间与UTC时间的偏移量。本地时间 UTC时间 时区偏移 时区转换1&#xff1a;时间是分时…

Paragon NTFS for Mac 15软件下载及安装教程

简介&#xff1a; NTFS For Mac 15是首个支持Mac上读写NTFS外置存储设备解决方案 &#xff0c;解决mac不能读写外置让您更加简单直观的在Mac机上随意对NTFS文件修改、删除等操作。 安 装 包 获 取 地 址&#xff1a; Paragon Ntfs For Mac 15版&#xff1a; ​​https://sou…

Android出海实战:Firebase Analytics埋点

大家好&#xff0c;我是小编阿文。欢迎您关注我们&#xff0c;经常分享有关Android出海&#xff0c;iOS出海&#xff0c;App市场政策实时更新&#xff0c;互金市场投放策略&#xff0c;最新互金新闻资讯等文章&#xff0c;期待与您共航世界之海。 写在伊始 Google Analytics&…

二刷算法训练营Day30 | 回溯算法(6/6)

目录 详细布置&#xff1a; 1. 回溯总结 2. 332. 重新安排行程 3. 51. N 皇后 4. 37. 解数独 详细布置&#xff1a; 1. 回溯总结 回溯是递归的副产品&#xff0c;只要有递归就会有回溯&#xff0c;所以回溯法也经常和二叉树遍历&#xff0c;深度优先搜索混在一起&#x…

时代巨兽!深度神经网络如何改变我们的世界?

深度神经网络 1、 简介1.1 定义深度神经网络1.2 深度学习的发展历程1.3 深度神经网络的应用领域 2、深度神经网络的基本原理2.1 神经元层2.1.1 神经元2.1.2 神经元层 2.2 前向传播2.3 反向传播2.4 激活函数2.4.1、作用2.4.2、常见激活函数2.4.3、选择激活函数的考虑 2.5 损失函…

AI 有感:智能体 = 提示词工程 + 大模型算力 + 插件类工具?

回顾 继这篇文章推出&#xff1a;怎么看 AI 大模型&#xff08;LLM&#xff09;、智能体&#xff08;Agent&#xff09;、知识库、向量数据库、知识图谱&#xff0c;RAG&#xff0c;AGI 的不同形态&#xff1f; 引起了很多粉丝朋友的反响&#xff0c;随着目前各大模型的发布以…