在vue中实现picker样式_基于Vue实现timepicker
主要用到的还是Vue的基本知识而已,不过要想到的细节很多。
先放效果,点击上框,显示timepicker。而且可以根据点击的是时还是分来改变圆盘的数字。
这里我用了两个组件,和,这里的时和分的数值我挂在了根实例中,因为两个组件都需要这两个值,所以想了想我决定还是挂在根实例,通过动态绑定到组件中。HTML见在线demo。
根组件
var app = new Vue({
el: "#app",
data: {
minutes: 15,
hour: 8,
showTimePicker: false,
current: 0 //0为时、1为分
},
created: function(){
this.$on("closeTimePicker",function() { //监听关闭time-picker
this.showTimePicker = false;
}),
this.$on("openTimePicker",function() {
this.showTimePicker = true;
}),
this.$on("getTime",function(h,m) { //获取time-picker返回的点击后的数值,然后动态改变
this.minutes = m;
this.hour = h;
})
}
})
组件
点击时、分的时候,要“通知”根实例点击的是什么,下面的时钟才能显示相应的数字。改变父组件的属性,有两种办法,一是直接修改父组件属性;二是通过自定义事件。
Vue.component('time-box',{
template:'\
{{hour}}\
: \
{{minutes}}\
',
props: ['hour','minutes'],
methods: {
openTime: function() {
app.$emit("openTimePicker");
},
changeCurrent: function(type) {
if(type == 'h' ){
app.current = 0;
} else {
app.current = 1;
}
}
}
});
组件
这里最需要注意的就是单向数据流。时分是通过props传进来的,刚开始我直接操作this.hour,然后控制台警告。看到警告才想起看过的知识,这样很容易误改父组件的信息。所以啊,有些东西得实践才行,不能只看不敲。这里我定义一个局部 data 属性,并将 prop 的初始值作为局部数据的初始值。知识点:https://cn.vuejs.org/v2/guide/components.html#单向数据流
props: ['h','m','mode'],
data: function() {
return {
current: this.mode,
hour: this.h,
minutes: this.m
}
},
正常情况下,如果时分不够两位数就要自动添加0,实现很简单的。刚开始直接判断是否小于10就添加。但是,“08”是小于10的,所以又自动添加0了。但是我觉得这里写得不好,还有改进的空间的。
//时分保证是两位数
fixHour: function() {
return (this.hour < 10 && this.hour.toString().indexOf(0) !== 0) ? "0" + this.hour : this.hour
}
fixMinutes: function() {
return (this.minutes < 10 && this.minutes.toString().indexOf(0) !== 0) ? "0" + this.minutes : this.minutes
},
再说说template里面的事吧。点击timepicker里面的时分改变组件的的current属性和透明度。这里显示数据就需要用到fixHour和fixMinutes了。
{{fixHour(hour)}}
:
{{fixMinutes(minutes)}}
圆盘里的内容就靠v-for了。先定义好12个位置,然后遍历每个位置。里面的针就通过CSS3的旋转啦。一共360度,12个格,一小时60分钟,这么简单的数字知识就不继续说下去了,下面的乘法我相信各位是看得懂的。这里注意的是60,我们钟表没有60只有0啊,所以 ((5 * i) % 60 || “00”)。这里写得很有技巧。60%60是0。然后是||和&&的问题了(推荐两本书《你不知道的JavaScript》上中卷,内容跟《高级程序设计JS》也不怎么重复,值得看)。0强转为false,然后||就返回第二个操作数的值。
{{current === 0 ? i : ((5 * i) % 60 || "00")}}\
methods: {
//分时针的样式
selectorRotateAngle: function(i) {
if(this.current === 0) {
return {
transform: 'rotateZ('+(this.hour * 30)+'deg)'
}
} else {
return {
transform: 'rotateZ('+(this.minutes * 6)+'deg)'
}
}
},
//12格样式
getHourStyle: function(i) {
var hasSelected = (this.current === 0 && this.hour % 12 === i)
|| (this.current === 1 && this.minutes % 60 == (i * 5)); //判断到底是哪个数值被选中
var styleObj = {
transform: 'translate(' + positions[i][0] + "px, " + positions[i][1] + "px)",
background: hasSelected ? 'rgb(0, 188, 212)' : 'rgba(255, 255, 255, 0)',
color: !hasSelected ? '#2c3e50' : '#FFF'
}
return styleObj;
}
}
最后就是把选好的数值传回给父组件啦。
//关闭timepicker
closePicker: function() {
app.$emit('closeTimePicker');
},
//获取时间
getTime: function() {
app.$emit('getTime',this.fixHour(this.hour),this.fixMinutes(this.minutes));
app.$emit('closeTimePicker');
}
v-if和v-show
v-show只是改变每次的display,而v-if如果为true才渲染到页面,所以每次隐藏显示都重新渲染一遍。我觉得。。。如果实际中,经常要开开关关的就用v-show就好了,但是用来v-show我发现不能根据选中的是时还是分来展现数值,很奇怪,v-if就可以。刚开始觉得是初始化问题,但是,既然hour和minute能根据props传下来再data转化,为啥mode就不行呢?没想明白。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
在vue中实现picker样式_基于Vue实现timepicker相关推荐
- 在vue中实现picker样式_基于vue的颜色选择器vue-color-picker
/** * author : alex * email : 961163829@qq.com*/exportdefault{ props:{/*由父组件传递的默认颜色*/defaultColor:{ ...
- 在vue中实现picker样式_用Vue实现timepicker功能
主要用到的还是Vue的基本知识而已,不过要想到的细节很多. 先放效果,点击上框,显示timepicker.而且可以根据点击的是时还是分来改变圆盘的数字. 这里我用了两个组件,和,这里的时和分的数值我挂 ...
- vue中headers是什么_【vue】饿了么项目-header组件开发
1.数据传递的理解 在App.vue中用到了header组件,首先注册组件 components: {'v-header': header } 然后才能引用 :seller="seller& ...
- vue 文字上下循环滚动_基于 Vue 无缝滚动组件Vue-Seamless-Scroll
今天给小伙伴们推荐一款超棒的Vue无缝滚动组件VueSeamlessScroll. vue-seamless-scroll 基于 vue.js 构建的简单实用的无缝滚动组件.满足丰富的配置需求,支持上 ...
- vue 移动到图片浮动_基于Vue实现拖拽升级(九宫格拖拽)
前言 在本文中将会用Vue完成九宫格拖拽效果,同时介绍一下网格布局.具体代码以及demo可以点以下超链接进入 效果实例 Demo 简单了解Grid布局(网格布局) 什么是网格布局 CSS网格布局(又称 ...
- 移动端vue实现部门结构功能_基于Vue的组织架构树组件
由于公司业务需求,需要开发一个展示组织架构的树组件(公司的项目是基于Vue).在GitHub上找了半天,这类组件不多,也没有符合业务需求的组件,所以决定自己造轮子! 分析 既然是树,那么每个节点都应该 ...
- 移动端vue实现部门结构功能_基于Vue制作组织架构树组件
编程之家收集整理的这篇文章主要介绍了基于Vue制作组织架构树组件,编程之家小编觉得挺不错的,现在分享给大家,也给大家做个参考. 由于公司业务需求,需要开发一个展示组织架构的树组件(公司的项目是基于Vu ...
- vue设置输入框输入长度_基于vue的限制输入框可输入字节数的解决方案
2018年07月11日 基于vue的限制输入框可输入字节数的解决方案 需求:input输入框输入上限4个字节.达到上限则不能继续输入,其中1个英文表示1个字节.1个中文表示2个字节. 看到这个需求,第 ...
- vue 中provide的用法_聊聊Vue中provide/inject的应用详解
众所周知,在组件式开发中,最大的痛点就在于组件之间的通信.在 Vue 中,Vue 提供了各种各样的组件通信方式,从基础的 props/$emit 到用于兄弟组件通信的 EventBus,再到用于全局数 ...
最新文章
- Pacbio 纯三代组装复活草基因组
- Matlab读取二进制文件----fread
- [git]git相关
- 中金所技术各部门介绍_【电视技术】液晶电视背光板各部分电路介绍
- 网络爬虫--26.Scrapy中下载器中间件Downloader Middlewares的使用
- 2020年5月数据库流行度排行:疫情下开源数据库逆势增长,新基建下国产数据库迎机遇...
- 生日快乐网站_【总结 】文化自信源自基层贺房氏网站建站十五周年
- 算法:回溯三 Combination Sum组合总数
- html5 fa图标库,axure官方制作FontAwesome图标元件库V5.5.0版
- P5167 xtq的神笔
- Facebook想要成为下一个微信,难!
- 用python提取word到excel(excel可更新)
- token 微信access 过期_微信开发ACCESS TOKEN 过期失效解决方案
- 笔记1-----校园网进知网步骤
- WPS简单五步操作修改图形并调整图形位置大小和旋转角度
- 百度细雨算法2.0详解,规避细雨算法解决方法
- Linux内核的5个子系统
- 无人便利店沿用超高频RFID技术将快速布局全国
- 【电子科学系保研】-- 西安交通大学保研之旅
- ant java macrodef_Ant之 ZipException And Taskdef And MacroDef——“宏”