升级 vant 之后，rem城市联动选择不精准

最新推荐文章于 2022-03-25 14:48:54 发布
最新推荐文章于 2022-03-25 14:48:54 发布
阅读量169 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_39255073/article/details/107110792
版权

升级 vant 之后，rem城市选择bug

vant 版本之前是 2.5.2, 手欠升级到 2.8.7
van-picker 组件 和 van-area 组件选择时，高度变大，
解决方案是 降级到 2.5.2
先删除 本地的 vant ， npm uninstall vant
再安装 npm install --save vant@2.5.2
特此记录一下，希望能帮到小伙伴

weixin_39255073
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vant Picker 选择器数据处理的使用记录与坑
lucky_ax的博客
09-10 5946
总结使用vant 时遇到的一些问题 1, Field 输入框 Popup 弹出层 Picker 选择器 在使用过程中 发现很多官方API说的都不是很清楚 以下是使用实例 效果图 HTML部分 <li> <van-field clickable required is-link input-align="center"
Vant picker 多级联动操作
01-18
官网地址：链接 官网文档可能不是很完善，但仔细看文档，方法，类型其实都讲到的。 度娘也没有找到，花了大半天爬坑试错。 搭配弹出层使用 <van-picker show-toolbar :columns=columns @cancel=showPicker = false @confirm=
vant-ui rem问题
weixin_30341745的博客
06-06 460
使用vant-ui时rem单位问题 vue-cli3.x项目引入vant-ui1.6.21,要求在项目中使用rem单位,但vant是px的.故,需要添加一个自动转换插件和一段修改html根元素的font-size值的脚本 一.添加插件: npm i postcss-plugin-px2rem --save 添加之后需要在vue.config.js文件中加一段该插件的配置.参考博客https:...
【vant】配合 van-popup 使用 van-picker 多级联动，回显赋默认值 遇到的坑及解决方案
热门推荐
songchang88的博客
10-27 1万+
先吐槽一句，van-picker 真心不怎么好用。。。 页面大概是这个样子： 代码结构大概是这个样子： <!-- 选择 收支类型弹窗 --> <van-popup ref = "accountTypePopup" v-model="showPicker" position="bottom"> <van-picker ref = "a...
解决vue Vant组件省市区选择组件 省市区不显示不出来一直加载问题
weixin_43512524的博客
10-13 3553
1.首先我们先看手册，将import相关信息导入，看手册代码演示，发现问题 实际代码中data（）中areaList是不允许这样写的 代码会报错 2.既然不能这么写，我们就需要改一下，继续看手册 ，发现areaList是个对象 那我们这样写试一下 编译器没有报错，运行一下也没有报错，但是发现省市区没有显示出来，一直加载 3.分析应该是数据问题，没有获取到数据，仔细分析应该是没有手册中的area.js文件，翻了手册之后发现不会下载（原谅我还很白），所以我用了比较蠢的方法，全部复制下来，在自己项目
省市区选择
02-23
查询全国省市区的数据，自带离线数据，查询出来的省，市，区，实现排序。保存上次选择的数据
把项目中的vant UI组件升级
weixin_30932215的博客
07-05 5321
首先把之前的VANT卸载掉 npm uninstall vant 然后重新安装一次vant npm i vant -S 转载于:https://www.cnblogs.com/huzhuhua/p/11139661.html
vue-cli3+vant+vantRem适配方案项目搭建
qq_37942845的博客
05-22 1万+
1、安装vue-cli3脚手架，不懂的去vue-cli官网 npm install -g @vue/cli 2、通过vue-cli3创建项目 vue create my-project 创建的过程有很多选项，我的常用选项： 简单介绍一下: a、Babel：转码工具，有了它就可以开心的用es2015以上的代码，那必须有！ b、Router：前端路由，对一个单页面来说，基本不...
vue-cli3+vant+vantRem完成移动端适配的问题
weixin_43831302的博客
08-23 1139
本文从如下链接转载：https://blog.csdn.net/qq_37942845/article/details/90444784 1、安装vue-cli3脚手架，不懂的去vue-cli官网 npm install -g @vue/cli 2、通过vue-cli3创建项目 vue create my-project 创建的过程有很多选项，我的常用选项： 简单介绍一下: a、Babel ：转码...
使用vant的移动端REM适配方法
Aaa_Liao的博客
06-21 2215
Vant 中的样式默认使用 px 作为单位，如果需要使用 rem 单位，推荐使用以下两个工具： postcss-pxtorem 是一款 postcss 插件，用于将单位转化为 rem lib-flexible 用于设置 rem 基准值 下面我们分别将这两个工具配置到项目中完成 REM 适配。 一、使用 lib-flexible 动态设置 REM 基准值（html 标签的字体大小） 1、安装 # yarn add amfe-flexible npm i amfe-flexible 2、然后在 main.
mint-ui 通过popup和picker实现三级联动（编辑时设置默认值）
SnowBeatRain的博客
11-30 3881
成果预览： 准备工作： 请有针对性的查看以下文档：vue组件以及父子组件传值、mint-ui中的popup和picker。（本文不涉及，请自行查阅） 省市区三级数据源：https://github.com/artiely/Administrative-divisions-of-China  (由于业务需要，我使用的公司统一数据，但格式不变) 实现代码： 在对应的文件目录下新建：add...
Vant省市区的三级联动
麋鹿
01-14 1万+
Vant省市区的三级联动 Vant是有赞前端团队基于有赞统一的规范实现的 Vue 组件库，提供了一整套 UI 基础组件和业务组件。通过 Vant，可以快速搭建出风格统一的页面，提升开发效率。目前已有近50个组件，这些组件被广泛使用于有赞的各个移动端业务中。如果你需要开发一个移动商城，用 Vant 就再合适 html &lt;van-address-edit :area-list="areaLi...
vant ui与rem适配问题
dd602350527的博客
06-16 1699
1、安装插件 指令：npm i postcss-plugin-px2rem --save 添加之后需要在vue.config.js文件中加一段该插件的配置。 参考博客链接：https://www.cnblogs.com/taohuaya/p/10274993.htm 使用默认配置即可，minPixelValuen设置为3。表示3px以上才转换，有些像素值太小时没必要转换。 css: { loaderOptions: { postcss: {
使用vant组件库做移动端项目时的REM适配方法
qq_38090109的博客
07-16 1621
移动端项目，它需要去适配不同的手机屏幕。我们希望实现适配的效果是：与屏幕大小相关。以按钮为例：在大屏手机，按钮的宽高都大些，在小屏手机上尺寸小些。 技术手段： 把所有px单位改成rem 根据不同的手机屏幕的宽度，来动态设置rem的参考值：html标签上的font-size的大小。 地址 Vant 中的样式默认使用px作为单位，如果需要使用rem单位，推荐使用以下两个工具一起工作，来达到目标。 postcss-pxtorem 是一款 postcss 插件，用于将px转化为 rem 它需要设置在开发依赖
Vant实现省市区三级联动
明知山
04-17 3066
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalab...
vant 索引城市不对_Vant Area 省市区选择
weixin_34857730的博客
12-23 768
介绍省市区三级联动选择，通常与弹出层组件配合使用引入import Vue from 'vue';import { Area } from 'vant';Vue.use(Area);代码演示基础用法要初始化一个Area组件，你需要传入一个area-list属性，数据格式具体可看下面数据格式章节选中省市区如果想选中某个省市区，需要传入一个value属性，绑定对应的省市区code配置显示列可以通过c...
vant填坑之area
qq719756146的博客
04-05 3760
转载： https://www.jianshu.com/p/770a54e1a39c <van-area :area-list="arrylist" :columns-num="1" @change="onChange" :value="130000" /> onChange(pi...
Vant Picker组件问题，Picker设置选中值，清除Picker选中值
weixin_42556438的博客
03-30 8025
Picker设置选中值/恢复默认选项/清空选中值/切换问题描述代码解析参考文档 问题描述 需求是一个选择时间的选择器，需要加一个选择全部时间的操作。所以需要把清除掉上一次Picker选中的值。Vant的文档的实例方法都没有示例，着实是费了很大劲。 目前逻辑是选择时间点击确定的话是按筛选时间去查询。点击全部时间按全部时间去查询，把picker恢复到默认状态。 代码 template的结构 <van-popup v-model="showPicker" position="top" :lazy-rend
vant-weapp Area 省市区选择的使用及遇到的坑
liuye066的专栏
03-25 1万+
.json中 导入 "van-area": "@vant/weapp/area/index" 基础用法： <van-area area-list="{{ areaList }}" /> areaList 格式 areaList 为对象结构，包含 province_list、city_list、county_list 三个 key。 Vant 官方提供了一份默认的省市区数据，可以通过 @vant/area-data 引入。 npm i @vant/area-data 安装之后
vue+vant省市区选择组件
qq_20729169的博客
01-07 2921
Area 省市区选择+Popup 弹出层,效果如下： 在main.js中引入Area+Popup html: <van-cell class=“flex_x_center” is-link @click=“showPopup”> 选择日期 {{province}}-{{city}}-{{area}} js: export defa...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值