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 相关文章推荐
js资料toString 方法
Mar 13 Javascript
js实现兼容IE6与IE7的DIV高度
May 13 Javascript
JavaScript设计模式之单件模式介绍
Dec 28 Javascript
javascript的几种继承方法介绍
Mar 22 Javascript
利用Angularjs和原生JS分别实现动态效果的输入框
Sep 01 Javascript
javascript this详细介绍
Sep 19 Javascript
vue+springboot前后端分离实现单点登录跨域问题解决方法
Jan 30 Javascript
Vue 父子组件数据传递的四种方式( inheritAttrs + $attrs + $listeners)
May 04 Javascript
微信小程序module.exports模块化操作实例浅析
Dec 20 Javascript
Three.js实现3D机房效果
Dec 30 Javascript
layer弹出层显示在top顶层的方法
Sep 11 Javascript
二维码条形码生成的JavaScript脚本库
Jul 07 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
PHP分页类集锦
2014/11/18 PHP
详解Laravel视图间共享数据与视图Composer
2016/08/04 PHP
textarea的value是html文件源代码,存成html文件的代码
2007/04/20 Javascript
EXTJS FORM HIDDEN TEXTFIELD 赋值 使用value不好用的问题
2011/04/16 Javascript
javascript 树形导航菜单实例代码
2013/08/13 Javascript
jQuery显示和隐藏 常用的状态判断方法
2015/01/29 Javascript
JavaScript实现的浮动层框架用法实例分析
2015/10/10 Javascript
浅谈JS中的bind方法与函数柯里化
2016/08/10 Javascript
简单的js表格操作
2016/09/24 Javascript
vue中手机号,邮箱正则验证以及60s发送验证码的实例
2018/03/16 Javascript
vue中$refs的用法及作用详解
2018/04/24 Javascript
详解mpvue开发小程序小总结
2018/07/25 Javascript
解决jQuery使用append添加的元素事件无效的问题
2018/08/30 jQuery
vue axios基于常见业务场景的二次封装的实现
2018/09/21 Javascript
浅谈在vue中使用mint-ui swipe遇到的问题
2018/09/27 Javascript
js实现数字从零慢慢增加到指定数字示例
2019/11/07 Javascript
d3.js 地铁轨道交通项目实战
2019/11/27 Javascript
Node快速切换版本、版本回退(降级)、版本更新(升级)
2021/01/07 Javascript
python的继承知识点总结
2018/12/10 Python
Django异步任务之Celery的基本使用
2019/03/23 Python
Python中遍历列表的方法总结
2019/06/27 Python
python+django+rest框架配置创建方法
2019/08/31 Python
浅析python,PyCharm,Anaconda三者之间的关系
2019/11/27 Python
python使用beautifulsoup4爬取酷狗音乐代码实例
2019/12/04 Python
Python实现线性判别分析(LDA)的MATLAB方式
2019/12/09 Python
Python用类实现扑克牌发牌的示例代码
2020/06/01 Python
Keras—embedding嵌入层的用法详解
2020/06/10 Python
Python 如何测试文件是否存在
2020/07/31 Python
英国领先的在线礼品店:Getting Personal
2019/09/24 全球购物
Windows和Linux动态库应用异同
2016/07/28 面试题
喝酒检查书范文
2014/02/23 职场文书
2014统计局民主生活会对照检查材料思想汇报
2014/10/02 职场文书
见习报告的格式
2014/10/31 职场文书
2014年保洁工作总结
2014/11/24 职场文书
教师工作表现自我评价
2015/03/05 职场文书
NGINX 权限控制文件预览和下载的实现原理
2022/01/18 Servers