vue mint-ui学习笔记之picker的使用


Posted in Javascript onOctober 11, 2017

本文介绍了vue mint-ui picker的使用,分享给大家,也给自己留个学习笔记

Picker的使用

import { Picker } from 'mint-ui';
Vue.component(Picker.name, Picker);

API

vue mint-ui学习笔记之picker的使用

vue mint-ui学习笔记之picker的使用

示例一:picker的简单使用

xxx.vue:

<template> 
 <div id="app"> 
 <mt-picker :slots="slots" ></mt-picker> 
  
  <router-view></router-view> 
 </div> 
</template> 
  
<script> 
  
export default { 
 data () { 
 return { 
 slots:[{values: ['年假', '事假', '病假', '婚假', '其他']}] 
  } 
 }, 
 mounted:function(){ 
  
 } 
} 
</script> 
  
<style> 
  
</style>

show:

picker显示出来了

vue mint-ui学习笔记之picker的使用

分析:

pincker的显示,会在上方留下一半的白 

vue mint-ui学习笔记之picker的使用

当拖动的时候,选项就会跑到上方预留的空白位置

vue mint-ui学习笔记之picker的使用

示例二:picker的简单使用——分组picker

xxx.vue:

<template> 
 <div id="app"> 
  <mt-picker :slots="slots" ></mt-picker> 
   
  <router-view></router-view> 
 </div> 
</template> 
 
<script> 
 
export default { 
 data () { 
  return { 
    slots: 
        [ 
        { 
         flex: 1, 
         values: ['年假', '事假', '病假', '婚假', '其他'], 
         className: 'slot1', 
         textAlign: 'left' 
        }, { 
         divider: true, 
         content: '-', 
         className: 'slot2' 
        }, { 
         flex: 1, 
         values: ['2015-11', '2015-02', '2015-03', '2015-04', '2015-05', '2015-06'], 
         className: 'slot3', 
         textAlign: 'right' 
        } 
       ] 
  } 
 }, 
 mounted:function(){ 
 
 } 
} 
</script> 
 
<style> 
 
</style>

show:

vue mint-ui学习笔记之picker的使用

分析:

1.picker还可以拆分成左中右3个部分——具体可以看上面的slot对象的属性

通过slots属性的设置对应的数据,接收一个数组,数组里面分3个对象

对象内除了可以使用values外,还可以使用flex(弹性盒子的flex值,1是充满剩余空间),className(使用slot1、slot2、slot3),textAlign(设置文字的水平位置,可以使用left、center、right)

2.每个picker的高度默认是36px

 vue mint-ui学习笔记之picker的使用

示例三:picker使用change事件

xxx.vue:

<template> 
 <div id="app"> 
  <mt-picker :slots="slots" @change="onValuesChange" ></mt-picker>  
  <router-view></router-view> 
 </div> 
</template> 
 
<script> 
 
export default { 
 name: 'app', 
 data () { 
  return { 
    slots: 
        [ 
        { 
         flex: 1, 
         values: ['年假', '事假', '病假', '婚假', '其他'], 
         className: 'slot1', 
         textAlign: 'left' 
        }, { 
         divider: true, 
         content: '-', 
         className: 'slot2' 
        }, { 
         flex: 1, 
         values: ['2015-11', '2015-02', '2015-03', '2015-04', '2015-05', '2015-06'], 
         className: 'slot3', 
         textAlign: 'right' 
        } 
       ] 
  } 
 }, 
 mounted:function(){ 
 
 }, 
 methods: { 
    onValuesChange(picker, values) { 
      console.log(picker) 
      console.log(values) 
  } 
 } 
} 
</script> 
 
<style> 
 
</style>

show:

运行后,change事件会自动输出2次内容

这是因为,这里面有2个picker可以选择内容

vue mint-ui学习笔记之picker的使用

分析:

当滚动其中一列的时候,又会触发change事件

vue mint-ui学习笔记之picker的使用

vue mint-ui学习笔记之picker的使用 

示例四:获取change事件所选的内容

xxx.vue:

<template> 
 <div id="app"> 
  <mt-picker :slots="slots" @change="onValuesChange" ></mt-picker>  
  <router-view></router-view> 
 </div> 
</template> 
 
<script> 
 
export default { 
 name: 'app', 
 data () { 
  return { 
    value:'', 
    slots: 
        [ 
          { 
            values: ['年假', '事假', '病假', '婚假', '其他', '婚假'] 
          } 
        ] 
  } 
 }, 
 mounted:function(){ 
 
 }, 
 methods: { 
    onValuesChange(picker, values) { 
   this.value = values[0]; 
   console.log(this.value) 
} 
 } 
} 
</script> 
 
<style> 
 
</style>

show:

开启picker的时候,在没有操作的时候,会先自动执行一次change事件,选中第一个选项的内容

vue mint-ui学习笔记之picker的使用 

更改选择的内容,输出了data内的数据

vue mint-ui学习笔记之picker的使用 

示例五:picker的显示个数

xxx.vue:

<template> 
 <div id="app"> 
  <mt-picker :slots="slots" @change="onValuesChange" :visible-item-count="1"></mt-picker>  
  <router-view></router-view> 
 </div> 
</template> 
 
<script> 
 
export default { 
 name: 'app', 
 data () { 
  return { 
    value:'', 
    slots: 
        [ 
          { 
            values: ['年假', '事假', '病假', '婚假', '其他', '婚假'] 
          } 
        ], 
  } 
 }, 
 mounted:function(){ 
 
 }, 
 methods: { 
    onValuesChange(picker, values) { 
   this.value = values[0]; 
   console.log(this.value) 
  } 
 } 
} 
</script> 
 
<style> 
 
</style>

show:

使用了:visible-item-count="1"之后,picker的可显示个数就变成了1个

vue mint-ui学习笔记之picker的使用

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript.The.Good.Parts阅读笔记(一)假值与===运算符
Nov 16 Javascript
jquery select(列表)的操作(取值/赋值)
Mar 16 Javascript
javascript读写XML实现广告轮换(兼容IE、FF)
Aug 09 Javascript
js键盘事件的keyCode
Jul 29 Javascript
node.js中的http.response.writeHead方法使用说明
Dec 14 Javascript
在JavaScript中对HTML进行反转义详解
May 18 Javascript
js微信分享API
Oct 11 Javascript
vue使用watch 观察路由变化,重新获取内容
Mar 08 Javascript
vue.js声明式渲染和条件与循环基础知识
Jul 31 Javascript
Angular5.1新功能分享
Dec 21 Javascript
解决ant Design中this.props.form.validateFields未执行的问题
Oct 27 Javascript
javascript实现京东快递单号的查询效果
Nov 30 Javascript
jQuery中过滤器的基本用法示例
Oct 11 #jQuery
基于VUE.JS的移动端框架Mint UI的使用
Oct 11 #Javascript
jQuery中extend函数简单用法示例
Oct 11 #jQuery
vue中配置mint-ui报css错误问题的解决方法
Oct 11 #Javascript
node.js操作MongoDB的实例详解
Oct 11 #Javascript
简单谈谈vue的过渡动画(推荐)
Oct 11 #Javascript
Vue-router结合transition实现app前进后退动画切换效果的实例
Oct 11 #Javascript
You might like
NT IIS下用ODBC连接数据库
2006/10/09 PHP
JS实现php的伪分页
2008/05/25 PHP
Yii中的relations数据关联查询及统计功能用法详解
2016/07/14 PHP
全面解析PHP验证码的实现原理 附php验证码小案例
2016/08/17 PHP
PHP isset()及empty()用法区别详解
2020/08/29 PHP
jQuery学习笔记(1)--用jQuery实现异步通信(用json传值)具体思路
2013/04/08 Javascript
jQuery 限制输入字符串长度
2016/06/20 Javascript
详解JavaScript树结构
2017/01/09 Javascript
JQuery异步提交表单与文件上传功能示例
2017/01/12 Javascript
完美实现js选项卡切换效果(一)
2017/03/08 Javascript
JavaScript中使用Async实现异步控制
2017/08/15 Javascript
angularjs实现时间轴效果的示例代码
2017/11/29 Javascript
JavaScript数组去重算法实例小结
2018/05/07 Javascript
vue-cli初始化项目中使用less的方法
2018/08/09 Javascript
vue实现固定位置显示功能
2019/05/30 Javascript
jQuery实现html可联动的百分比进度条
2020/03/26 jQuery
JS removeAttribute()方法实现删除元素的某个属性
2021/01/11 Javascript
用map函数来完成Python并行任务的简单示例
2015/04/02 Python
matplotlib subplots 调整子图间矩的实例
2018/05/25 Python
解决python升级引起的pip执行错误的问题
2018/06/12 Python
python里dict变成list实例方法
2019/06/26 Python
Python 生成短8位唯一id实战教程
2021/01/13 Python
德国咖啡批发商:Coffeefair
2019/08/26 全球购物
Pedro官网:新加坡时尚品牌
2019/08/27 全球购物
杠杆的科学教学反思
2014/01/10 职场文书
护士自我鉴定总结
2014/03/24 职场文书
学习张林森心得体会
2014/09/10 职场文书
授权收款委托书
2014/09/23 职场文书
老人节标语大全
2014/10/08 职场文书
自我查摆剖析材料
2014/10/11 职场文书
董事长助理岗位职责
2015/02/11 职场文书
2016年师德先进个人事迹材料
2016/02/29 职场文书
高考升学宴主持词
2019/06/21 职场文书
如何在CSS中绘制曲线图形及展示动画
2021/05/24 HTML / CSS
动画「进击的巨人」第86话播出感谢绘公开
2022/03/21 日漫
PostgreSQL逻辑复制解密原理解析
2022/09/23 PostgreSQL