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 中 document.createEvent的用法
Aug 29 Javascript
JavaScript下利用fso判断文件是否存在的代码
Dec 11 Javascript
模拟jQuery中的ready方法及实现按需加载css,js实例代码
Sep 27 Javascript
使用AOP改善javascript代码
May 01 Javascript
微信浏览器内置JavaScript对象WeixinJSBridge使用实例
May 25 Javascript
javascript实现类似java中getClass()得到对象类名的方法
Jul 27 Javascript
js 弹出虚拟键盘修改密码的简单实例
Oct 10 Javascript
利用jquery禁止外层滚动条的滚动
Jan 05 Javascript
jquery PrintArea 实现票据的套打功能(代码)
Mar 17 Javascript
webpack+vue中使用别名路径引用静态图片地址
Nov 20 Javascript
Vue实现table上下移动功能示例
Feb 21 Javascript
vue任意关系组件通信与跨组件监听状态vue-communication
Oct 18 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数组转xml的代码分享
2015/05/14 PHP
php实现异步将远程链接上内容(图片或内容)写到本地的方法
2016/11/30 PHP
php实现支持中文的文件下载功能示例
2017/08/30 PHP
PHP实现微信红包金额拆分试玩的算法示例
2018/04/07 PHP
PHP _construct()函数讲解
2019/02/03 PHP
javascript下arguments,caller,callee,call,apply示例及理解
2009/12/24 Javascript
原生js ActiveXObject获取execl里面的值
2013/11/01 Javascript
QQ登录背景闪动效果附效果演示源码下载
2015/09/22 Javascript
JavaScript SweetAlert插件实现超酷消息警告框
2016/01/28 Javascript
Vue.js每天必学之数据双向绑定
2016/09/05 Javascript
js 原型对象和原型链理解
2017/02/09 Javascript
微信小程序 选项卡的简单实例
2017/05/24 Javascript
详解js跨域请求的两种方式,支持post请求
2018/05/05 Javascript
详解在HTTPS 项目中使用百度地图 API
2019/04/26 Javascript
微信小程序wx.request拦截器使用详解
2019/07/09 Javascript
vue-cli点击实现全屏功能
2020/03/07 Javascript
微信小程序接入vant Weapp组件的详细步骤
2020/10/28 Javascript
详解微信小程序轨迹回放实现及遇到的坑
2021/02/02 Javascript
[01:00:35]2018DOTA2亚洲邀请赛3月30日B组 EffcetVSMineski
2018/03/31 DOTA
浅析Python中的join()方法的使用
2015/05/19 Python
python实现随机梯度下降(SGD)
2020/03/24 Python
python在非root权限下的安装方法
2018/01/23 Python
python hough变换检测直线的实现方法
2019/07/12 Python
一些关于python 装饰器的个人理解
2020/08/31 Python
通过实例了解python__slots__使用方法
2020/09/14 Python
使用placeholder属性设置input文本框的提示信息
2020/02/19 HTML / CSS
西班牙香水和化妆品购物网站:Arenal Perfumerías
2019/03/01 全球购物
定义一结构体数组表示分数,并求两个分数相加之和
2013/06/11 面试题
酒店总经理工作职责
2013/12/13 职场文书
普通大学毕业生自荐信范文
2014/02/23 职场文书
高考励志标语
2014/06/05 职场文书
大二学生学年自我鉴定
2014/09/12 职场文书
学生检讨书如何写
2014/10/30 职场文书
2015元旦家电促销活动策划方案
2014/12/09 职场文书
家长评语怎么写
2014/12/30 职场文书
玄武湖导游词
2015/02/05 职场文书