Loading [MathJax]/jax/output/CommonHTML/config.js
前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >使用vantUI下拉框(弹窗)的一些bug

使用vantUI下拉框(弹窗)的一些bug

原创
作者头像
xyzzz
修改于 2020-12-10 02:45:56
修改于 2020-12-10 02:45:56
3.7K03
代码可运行
举报
文章被收录于专栏:前端学习。前端学习。
运行总次数:3
代码可运行

公司这边要写一个温度的下拉框,35-42度,以0.1步进。算下来有好几十个,需求是做成下拉框可以拉动选择温度的形式。尝试了很多UI包括select,其中遇到不同的bug,作个记录。

尝试一:vantUI的dropDownMeau

一开始用vantUI的dropDownMeau,做出来的样式比较丑,勉强能实现下拉选择的效果。

有3个问题:

  1. 当组件再接近屏幕底部的时候,下拉框的高度不会相应的变高,也就是说下拉框在什么位置点开的就在这个地方的下面展开,如果空间不足,非常影响使用。尝试过去计算元素距离可视区域底部的距离,当到达某个距离的时候再去做一个弹起的效果,无奈太菜了,没有实现。
  2. 还有一个问题就是,当下拉框点开了之后,再拖动组件以外的地方,下拉框不会跟随屏幕移动,组件已经拉到上面了,下拉框还是停留在底部。这个好像也是vant的特点吧。。。
  3. iOS设备中滑动后,点击输入框不灵敏

代码如下:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
 <div class="item">
 上午体温
 <van-dropdown-menu class="dropdownMeau" active-color="#1989fa" close-on-click-outside>
     <van-dropdown-item v-model="formData.pmTemperature" :title="formData.pmTemperature" :options="options" />
  </van-dropdown-menu> 
  </div>

尝试二:select标签

问题:下拉选项的内容太多了,所以点开下拉框的时候会非常长,以至于底部的选项就看不见也拉不上来了。尝试过去设置select的高度,没有找到对应的dom去设置高度。

网上很多文章说用size来控制显示的option来达到控制高度的方法,实践之后还是不行。加了size之后,不管size值是多大,显示的都是两个或者三个四个

代码如下:

代码语言:html
AI代码解释
复制
 <div  class="item">
       上午体温:
       <div class="options">
            <select v-model="formData.amTemperature"
               size="10"
               class="amTemperature"
               @change="handleChange"
               @blur="handleBlur"
               @click="handleClick"
             >
            <option v-for="(item,index) in options" :key="index" :value="item.value">{{ item.text }}</option>
            </select>
       </div>
  </div>
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
handleClick(){
  if(this.options.length>6){
     this.size=7
   }  
 }
handleBlur(){
   this.size=0
 }
handleChange(){
   this.size=0
 }

尝试三:使用vantUI的dialog包裹组件

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<van-dialog v-model="show" title="标题" show-cancel-button @click="show=true"></van-dialog> 

问题:包裹选项之后没有显示弹窗

尝试四:用popup组件包裹

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
 <van-dropdown-menu class="dropdownMeau" active-color="#1989fa"
        :direction="direction" 
        close-on-click-outside
        @click="showPopup"
        >
           <van-popup
                v-model="show"
                closeable
                position="bottom"
                :style="{ height: '50%' }"
                 >
                     <van-dropdown-item v-model="formData.amTemperature" :title="formData.amTemperature" :options="options" />
           </van-popup>
 </van-dropdown-menu>

问题:点开popup弹层之后,还需要再点一次里面的组件,才会看到选项

还计算了下dom到可视区域底部的距离

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
     handleClick() {
         let wHeight = window.innerHeight; // 获取初始可视窗口高度
         console.log(wHeight);
         window.onscroll = () => {
         // 获取当前元素距离可视区域底部的距离
        let bottomH = window.innerHeight - (this.$refs.contentRef.offsetTop - window.pageYOffset) - this.$refs.contentRef.offsetHeight
        console.log('获取当前元素距离可视区域底部的距离');
         console.log(bottomH);
         if (bottomH <= 60) {
        console.log('111');
        this.$refs.contentRef.direction = 'up'
        }
       }
     },

尝试五:使用picker,终于可以了

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
            <div class="item">
                    <van-field
                        readonly
                        clickable
                        label="下午温度"
                        :value="formData.pmTemperature"
                        :placeholder="formData.pmTemperature"
                        @click="showPicker = true"
                    />
                    <van-popup v-model="showPicker" round position="bottom">
                        <van-picker
                            show-toolbar
                            :columns="options"
                            @cancel="showPicker = false"
                            @confirm="onPmConfirm"
                        />
                    </van-popup>
                </div>

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
methods: {
        onPmConfirm(value) {
            this.formData.pmTemperature = value;
            this.showPicker = false;
        }
    }

辛辛苦苦写的代码,虽然没有实现,但是还是记录下吧。。。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
通过页面配置兼容手机端的表格实现
编程思维
2023/08/18
4050
通过页面配置兼容手机端的表格实现
自定义下拉菜单封装
前段时间面试的时候,面试官看了我简历上一句“擅长组件封装”,就丢给我一个挑战:“那你来做一个可搜索、支持多选的下拉菜单组件吧,最好能加上键盘操作。”这个题目一下子点燃了我——它看起来简单,却能充分暴露一个人对事件控制、状态管理、DOM 操作乃至交互体验的理解。
繁依Fanyi
2025/05/07
1880
vant时间控件的使用「建议收藏」
发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/142577.html原文链接:https://javaforall.cn
全栈程序员站长
2022/08/31
1.6K0
vant时间控件的使用「建议收藏」
【Vue H5项目实战】从0到1的肯德基点餐系统—— 商品与购物车逻辑设计(Vue3.2 + Vite + TS + Vant + Pinia + Nodejs
文章链接:https://cloud.tencent.com/developer/article/2473693
中杯可乐多加冰
2024/12/04
3070
04 Nifty自定义带图片的下拉框
读了好久源代码,才搞明白怎么回事,其实现在回过头来想想很简单,主要是寻找的过程艰难。 自定义一个control 在resources里面新建一个文件夹MyControls,新建一个名为my-nifty
刘开心_1266679
2018/04/17
1.2K0
【Vue H5项目实战】从0到1的自助点餐系统—— 项目页面布局(Vue3.2 + Vite + TS + Vant + Pinia + Nodejs + Mo
今日推荐:机器学习模型从理论到实战|【007-K均值聚类(K-Means)】新闻主题分类
中杯可乐多加冰
2024/12/03
2720
Vue 2.0实现一个多选下拉框效果
要在上述代码中添加一个确认按钮,用于提交用户选择的选项,你可以按照以下步骤进行修改:
王小婷
2023/10/05
1.7K0
Vue 2.0实现一个多选下拉框效果
Vue.js|Nuxt仿制探探堆叠滑动|vue仿Tinder卡片效果
点击右上角筛选按钮,在侧边会出现弹窗。里面的范围滑块、switch开关、Rate评分等组件则是使用Vant组件库。
andy2018
2020/10/13
5.5K0
Vue.js|Nuxt仿制探探堆叠滑动|vue仿Tinder卡片效果
nuxt+vue仿微信聊天界面|nuxt.js聊天室
nuxtjs是一个基于vue.js构建的服务端渲染框架。让你的网页也拥有SEO能力。只要是会vue,上手及非常简单了。
andy2018
2020/10/16
3.9K0
nuxt+vue仿微信聊天界面|nuxt.js聊天室
vue-element怎么给select下拉框赋值?
看文档真的是一件非常快乐的事情,看别人写的代码,再跟自己写的代码一对比,立刻会发现有很多不同的地方,也可以学到很多新技能,从最简单的阅读学习起来,今天看的是select下拉框相关的。
王小婷
2020/10/14
5.3K0
avue上传图片和选择下拉框清空上传的文件
项目前端用的avue框架 然后要做一个上传附件的表单 上传完附件把图片大小等信息回填到表单中 然后一个选择下拉框清空上传的文件
周杰伦本人
2022/10/25
2.9K0
avue上传图片和选择下拉框清空上传的文件
TDesign——Input指定光标插入内容
思索
2024/08/15
1860
TDesign——Input指定光标插入内容
组件封装之输入框下拉列表
项目开发的时候刚好遇到一个需求,需要在输入框输入名字的时候,弹出相应的人员列表提供选择,然后将数据赋值给输入框。项目是使用iview组件的,一开始想着在自定义iview的下拉选择,后来发现效果并不理想。为了实现功能,就在iview输入框的基础上进行了组件封装,下面就来讲下组件封装的过程。
逆锋起笔
2021/05/18
2.3K0
组件封装之输入框下拉列表
【Flutter 专题】104 图解自定义 ACEDropdownButton 下拉框
和尚之前尝试过 Flutter 自带的 DropdownButton 下拉框,简单方便;但仅单纯的原生效果不足以满足各类个性化设计;于是和尚以 DropdownButton 为基础,调整部分源码,扩展为 ACEDropdownButton 自定义下拉框组件;
阿策小和尚
2020/12/14
2.1K0
【Flutter 专题】104 图解自定义 ACEDropdownButton 下拉框
SSM 单体框架 - 前端开发:用户和权限模块
在查询条件中使用了 Element UI 中的日期选择器:https://element.eleme.cn/#/zh-CN/component/date-picker#mo-ren-xian-shi-ri-qi
RendaZhang
2020/10/09
1.8K0
SSM 单体框架 - 前端开发:用户和权限模块
Vue3.0+Vant3移动端短视频+聊天+直播实战
随着人们生活品质的提高,5G及手机硬件的快速发展,短视频/直播快速的成为了很多人的娱乐方式。
andy2018
2021/02/03
4.8K1
Vue3.0+Vant3移动端短视频+聊天+直播实战
angularjs实现下拉框多选
博主最近又开始前后端兼顾了,好心塞,有个需求需要用到下拉框多选,因为项目使用了angularjs,所有使用了一个开源的基于angular写的指令,在这里分享下,非angular可忽略
kl博主
2023/11/18
5760
angularjs实现下拉框多选
a-select组件滚动下拉加载a-select-option数据
用户4396583
2024/08/01
2470
vue-element的select下拉框赋值
当我们从后端获取到返回值之后,需要进行一些处理,渲染到前端的界面里面。 但是后端有时候的返回值的数据类型都是不一样的 就那select下拉框赋值来说: 1:当返回值是对象数组的时候 <template> <el-select v-model="value" placeholder="请选择"> <el-option v-for="item in options" :key="item.value" :label="item.label" :va
王小婷
2020/09/27
4.8K0
vue的select下拉框多选项-multiple属性
最近在使用vue-element-admin这个后台管理框架开源模板在做一个管理后台,使用起来其实还挺方便的,大部分的组件源码里面都已经写好了,用的时候只需要把源码拿出来修改修改,也就成了。
王小婷
2020/09/03
10.5K0
推荐阅读
相关推荐
通过页面配置兼容手机端的表格实现
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验