mint-ui Picker组件相关问题
vue 2017-10-12 16:38:22

 

XML/HTML Code复制内容到剪贴板
  1. <!-- visibleItemCount 绑定参数，slot中可见备选值的个数 这里的value-key表示显示对象中指定key -->  
  2.         <mt-picker :slots="slots" @change="onValuesChange" value-key="valueKey" :visibleItemCount="visibleItemCount"></mt-picker>  

 

这里有一个坑啊，就是设置默认值，文档里面说了defaultIndex,可是貌似不行，也有可能数据是对象的原因：

JavaScript Code复制内容到剪贴板
  1. export default {  
  2.     data: function() {  
  3.         return {  
  4.             slots: [{  
  5.                 flex: 1, //是否显示  
  6.                 defaultIndex:0,  
  7.                 values: [{  
  8.                     valueId: '1',  
  9.                     valueKey: '中文 - 英文'  
  10.                 }, {  
  11.                     valueId: '2',  
  12.                     valueKey: '英文 - 中文'  
  13.                 }, {  
  14.                     valueId: '3',  
  15.                     valueKey: '仅单词'  
  16.                 }],  
  17.                 className: 'slot1',  
  18.                 textAlign: 'center'  
  19.             }, {  
  20.                 flex: 1,  
  21.                 defaultIndex:0,  
  22.                 values: [{  
  23.                     valueId: '1',  
  24.                     valueKey: '顺序播放'  
  25.                 }, {  
  26.                     valueId: '2',  
  27.                     valueKey: '随机播放'  
  28.                 }],  
  29.                 className: 'slot2',  
  30.                 textAlign: 'center'  
  31.             }, {  
  32.                 flex: 1,  
  33.                 defaultIndex:0,      //如果要设置默认值的话，这个参数必须要有，虽然没用  
  34.                 values: [{  
  35.                     valueId: '2000',  
  36.                     valueKey: '2秒'  
  37.                 }, {  
  38.                     valueId: '3000',  
  39.                     valueKey: '3秒'  
  40.                 },  
  41.                     {  
  42.                         valueId: '4000',  
  43.                         valueKey: '4秒'  
  44.                     },  
  45.                     {  
  46.                         valueId: '5000',  
  47.                         valueKey: '5秒'  
  48.                     },  
  49.                     {  
  50.                         valueId: '6000',  
  51.                         valueKey: '6秒'  
  52.                     },  
  53.                 ],  
  54.                 className: 'slot3',  
  55.                 textAlign: 'center'  
  56.             }],  
  57.             visibleItemCount: 1, //picker显示几个备选值  
  58.         },  
  59.   
  60.     },  
  61.     mounted() {  
  62.         this.init(); //在初始化的方法里对它设置默认值  
  63.     },  
  64.     methods: {  
  65.         init() {  
  66.             this.slots[2].defaultIndex =  1;  
  67.         },  

 

onValuesChange：

JavaScript Code复制内容到剪贴板
  1. /* 选择播放模式，设置播放参数  */  
  2. onValuesChange(picker, values) {  
  3.     playNum = 0; //已播放的个数归零  
  4.     this.playData = []; //播放列表清零  
  5.     values[0] ? mode = values[0].valueId : ""; //设置播放模式  
  6.     values[1] ? playOrder = values[1].valueId : ""; //设置播放顺序  
  7.     values[2] ? playTime = values[2].valueId : ""; //设置播放间隔时间  
  8. },  

 

 

slots

绑定到 slots 属性的数组由对象组成，每个对象都对应一个 slot，它们有如下键名

key 描述
divider 对应 slot 是否为分隔符
content 分隔符 slot 的显示文本
values 对应 slot 的备选值数组。若为对象数组，则需在 mt-picker 标签上设置 value-key 属性来指定显示的字段名
defaultIndex 对应 slot 初始选中值，需传入其在 values 数组中的序号，默认为 0
textAlign 对应 slot 的对齐方式
flex 对应 slot CSS 的 flex 值
className 对应 slot 的类名

API

参数 说明 类型 可选值 默认值
slots slot 对象数组 Array   []
valueKey 当 values 为对象数组时，作为文本显示在 Picker 中的对应字段的字段名 String   ''
showToolbar 是否在组件顶部显示一个 toolbar，内容自定义 Boolean   false
visibleItemCount slot 中可见备选值的个数 Number   5
itemHeight 每个 slot 的高度 Number   36

Slot

name 描述
- 当 showToolbar 为 true 时，toolbar 中的内容

 

 

 

本文来自于：http://www.yoyo88.cn/study/vue/169.html

上一篇 vue 打包后文件路径默认为绝对路径，修改为相对路径
下一篇 vue 挂载全局函数/变量utils
相关的文章
Powered by yoyo苏ICP备15045725号