使用mint-ui的picker出现的bug

发布于 2022-09-06 04:53:21 字数 1843 浏览 14 评论 0

在使用 picker 中,点击选择框弹起来,然后点击确定按钮调用 getValues() 获取到当前的选中的值,这时候我再次点击选择选择按钮,选择框弹起来,这时候再点击确定默认选择当前被选中的,发现 getValues() 获取的值是undefind;(两次选择相同的内容时,第二次的getValues()取到的值是undefind)
因为我的页面中有需要很多picker选择框,所以我是只初始化了一个picker,然后根据不同的事件来改变slots里的values的值,这样想着会有利于性能;
clipboard.png

不知道大家有没有遇到这种坑,找了半天还是不知道怎么解决,谢谢大家了!
data数据中的picker数据如下:
data(){
return{
popupVisible:false,//picker组件显示和关闭
slots: [{defaultIndex:0}],//picker选择框数据
}
}
picker组件代码如下:

    <mt-popup v-model="popupVisible" position="bottom">
        <div class="picker-toolbar">  
            <span class="mint-datetime-cancel" @click="cancle">取消</span>  
            <span class="mint-datetime-confirm" @click="select">确定</span>  
        </div>  
        <mt-picker ref='pickerObj' :slots="slots" valueKey="name"></mt-picker>
    </mt-popup>

激活picker方法如下:

    career(){//职业类型选择框
            this.popupVisible=true;//激活picker组件
            this.currentPicker='careerName';//当前picker内容变量
            this.currentPickerId='careerNameId';//当前picker内容id变量
            this.currentShow='isCareer';//
            this.slots=[{
                  defaultIndex:0,
                  flex: 1,
                  values: this.$utils.careerStyle,//职业类型
                  className: 'slot1',
                  textAlign: 'center'
            }];
        }

picker上select(点击确定)方法如下:

    select(){
            var pickerVal=this.$refs.pickerObj.getValues();
            console.log(this.$refs.pickerObj.getValues());
            this.popupVisible=false;
        }

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

樱娆 2022-09-13 04:53:21

<mt-picker :slots="slots" @change="onValuesChange"></mt-picker>这部分用@change事件,

//用istemp保存选好的值
onSexChange(picker, values) {
        this.isTemp = values[0];
 },

然后

select(){//获得这个值
    console.log(this.istemp);
}
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文