vux 选择器_Picker 组件使用教程 - VUX 中文文档

本文档介绍了VUX框架中的Picker组件,主要用于提供多选项选择。内容包括Picker的使用场景、选项排列原则、安装方法及组件属性、事件和方法。示例中展示了联动和非联动情况下的数据格式,并强调了value值应为字符串。通过v-model绑定的value和数据数组"data"进行交互,同时支持@on-change事件监听选择值的变化。
摘要由CSDN通过智能技术生成

Picker是指提供多个选项集合供用户选择其中一项的控件。Picker展示区域有限,部分选项会被隐藏,最好是当用户对所有选项都比较熟悉、有预期的时候,才使用Picker。

合理的默认选项能让用户减少操作次数,提升效率。

选项的排列顺序要依据当前上下文情景而定,例如衣服尺码按从小到大的顺序排列,而不是根据衣服尺码的首字母在字母表的顺序排列。

滚轮选择器控制在五列以内。为了保证手机屏幕触控精度,以免发生误触,滚轮选择器建议控制在五列以内。

使用相对概念增强感知。比起绝对的“某年某月日”,用“今天”、“昨天”等相对概念,能更快的激发人对时间的感知。

如果选项非常多,而且选项本身比较复杂难理解需要辅助的解释,建议用容纳更多的选项的其他形式,例如日历或者新页面。

安装

import { Picker } from 'vux'

export default {

components: {

Picker

}

}

// 在入口文件全局引入

import Vue from 'vue'

import { Picker } from 'vux'

Vue.component('picker', Picker)

请确保列表项的value值是字符串,使用数字会出错。

如果你的业务接口返回数字值为数字,需要你先处理成字符串;同样,获取到值时为字符串,你需要自己转换成数字。

非联动情况下,列表数据格式示例:

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值