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 相关文章推荐
HTML页面如何象ASP一样接受参数
Feb 07 Javascript
jQuery对象和DOM对象相互转化
Apr 24 Javascript
xml转json的js代码
Aug 28 Javascript
Knockoutjs的环境搭建教程
Nov 26 Javascript
用html5 js实现点击一个按钮达到浏览器全屏效果
May 28 Javascript
javascript获取本机操作系统类型的方法
Aug 13 Javascript
JavaScript实现仿新浪微博大厅和腾讯微博首页滚动特效源码
Sep 15 Javascript
详解AngularJS控制器的使用
Mar 09 Javascript
node.js中fs.stat与fs.fstat的区别详解
Jun 01 Javascript
vue.js学习之UI组件开发教程
Jul 03 Javascript
Vue中axios拦截器如何单独配置token
Dec 27 Javascript
js实现简单放大镜效果
Mar 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下载远程图片函数 可伪造来路
2013/06/25 PHP
php实现文件编码批量转换
2014/03/10 PHP
php采集中国代理服务器网的方法
2015/06/16 PHP
php读取XML的常见方法实例总结
2017/04/25 PHP
Laravel框架用户登陆身份验证实现方法详解
2017/09/14 PHP
PHP使用PDO访问oracle数据库的步骤详解
2017/09/29 PHP
javascript使用activex控件的代码
2011/01/27 Javascript
从零开始学习jQuery (八) 插播:jQuery实施方案
2011/02/23 Javascript
刷新页面的几种方法小结(JS,ASP.NET)
2014/01/07 Javascript
JS取request值以及自动执行使用示例
2014/02/24 Javascript
js去除输入框中所有的空格和禁止输入空格的方法
2014/06/09 Javascript
checkbox勾选判断代码分析
2014/06/11 Javascript
javascript获取flash版本号的方法
2014/11/20 Javascript
用JavaScript实现对话框的教程
2015/06/04 Javascript
浅析vue component 组件使用
2017/03/06 Javascript
jQuery实现图片滑动效果
2017/03/08 Javascript
vue 和vue-touch 实现移动端左右导航效果(仿京东移动站导航)
2017/04/22 Javascript
Javascript实现的StopWatch功能示例
2017/06/13 Javascript
ES6学习教程之对象字面量详解
2017/10/09 Javascript
支付宝小程序自定义弹窗dialog插件的实现代码
2018/11/30 Javascript
纯 JS 实现放大缩小拖拽功能(完整代码)
2019/11/25 Javascript
Vue基于localStorage存储信息代码实例
2020/11/16 Javascript
Python实现程序的单一实例用法分析
2015/06/03 Python
解决python3 网络请求路径包含中文的问题
2018/05/10 Python
Python任意字符串转16, 32, 64进制的方法
2019/06/12 Python
Django admin禁用编辑链接和添加删除操作详解
2019/11/15 Python
使用Python实现批量ping操作方法
2020/05/06 Python
CSS3中Transform动画属性用法详解
2016/07/04 HTML / CSS
CSS3实现菜单悬停效果
2020/11/17 HTML / CSS
通信工程专业个人找工作求职信范文
2013/09/21 职场文书
出国留学自荐信
2013/10/25 职场文书
自我介绍演讲稿范文
2014/08/21 职场文书
房屋租赁授权委托书范本
2014/09/20 职场文书
安全责任书
2015/01/29 职场文书
会议通知
2015/04/15 职场文书
2016年社会管理综治宣传月活动总结
2016/03/16 职场文书