使用vantUI下拉框（弹窗）的一些bug

原创

xyzzz

修改于 2020-12-10 10:45:56

2.9K0

修改于 2020-12-10 10:45:56

文章被收录于专栏：前端学习。前端学习。

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

尝试一：vantUI的dropDownMeau

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

有3个问题：

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

代码如下：

 <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值是多大，显示的都是两个或者三个四个

代码如下：

 <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>

handleClick(){
  if(this.options.length>6){
     this.size=7
   }  
 }
handleBlur(){
   this.size=0
 }
handleChange(){
   this.size=0
 }

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

<van-dialog v-model="show" title="标题" show-cancel-button @click="show=true"></van-dialog>

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

尝试四：用popup组件包裹

 <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到可视区域底部的距离

     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，终于可以了

            <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>

methods: {
        onPmConfirm(value) {
            this.formData.pmTemperature = value;
            this.showPicker = false;
        }
    }

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

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

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

vue.js

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

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

vue.js

登录后参与评论

0 条评论

热度