精选文章 Vue element-ui 组合开发时间选择器组件

Vue element-ui 组合开发时间选择器组件

作者:spe_track 时间: 2020-07-28 11:38:52
spe_track 2020-07-28 11:38:52

Vue 可以将页面上频繁使用的时间范围选择器,写成组件,便于前端开发

组件js文件 datepick.js

Vue.component('select-range-datetime', {
	props:{
        start_date: {
            type: String,
            default: '',
        },
        end_date: {
            type: String,
            default: '',
        },
        index: {
        	type: Number,
        	require: true,
        }
	},
	mounted(){
		this.dateRange = [this.start_date, this.end_date];
	},
	data: function () {
		return {
			dateRange: [],
			pickerOptions: {
          		shortcuts: [{
					text: '最近一周',
					onClick(picker) {
						const end = new Date();
              			const start = new Date();
              			start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              			picker.$emit('pick', [start, end]);
            		}
          		}, {
            		text: '最近一个月',
            		onClick(picker) {
              			const end = new Date();
              			const start = new Date();
              			start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              			picker.$emit('pick', [start, end]);
            		}
          		}, {
            		text: '最近三个月',
            		onClick(picker) {
              			const end = new Date();
              			const start = new Date();
              			start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              			picker.$emit('pick', [start, end]);
            		}
				}]
			}
		}
	},
	methods: {
		setDate: function(e) {
			var val = {};
			val.datetime = e;
			val.index = this.index;
			console.log(val);
			this.$emit('datetimeselected', val);
		}
	},
	template: `
        
`, });

注意:template 中的html部分,一定要有个总的元素包在最外层,不可以有并列元素

页面使用时就比较简单了



一个页面,可以多次使用,不用在页面上写太多的变量与js,很方便

勿删,copyright占位
分享文章到微博
分享文章到朋友圈

上一篇:聊聊 Python 调用 JS 的几种方式,你都知道吗?

下一篇:怎么在远程办公软件华为云WeLink上面关注公众号?

您可能感兴趣

  • vue知识点总结

    # 1.ES6新增? *1、变量的改变* *let:代码块内有效;不能重复声明;不存在变量提升* *const:只读变量,声明之后不允许改变。意味着,一旦声明必须初始化,否则会报错。;* *2、模版字符串(``)* *3、函数* **1、箭头函数 (sender) => { } 箭头函数最直观的三个特点。 不需要function关键字 可以省略return关键字 继承当前上下文的this关键...

  • 当遇到跨域开发时, 我们如何处理好前后端配置和请求库封装(koa/axios版)

    我们知道很多大型项目都或多或少的采用跨域的模式开发, 以达到服务和资源的解耦和高效利用. 在大前端盛行的今天更为如此, 前端工程师可以通过nodejs或者Nginx轻松搭建起web服务器.这个时候我们只需要请求后端服务器的接口即可实现系统的业务功能开发.这个过程中会涉及到web页面向API服务器的跨域访问(由于受到浏览器的同源策略,但是业界已有很多解决方案,接下来会介绍).通过这种开发模式使...

  • 软件测试面试1--软件测试基础理论(持续更新中...)

    1.软件测试工程师的素质: 良好的沟通和表达能力 具有怀疑与破坏的精神 扎实的软件测试基础知识 缜密的业务逻辑分析能力 处在用户的角度进行换位思考 足够的耐心、细心、信心、责任心 积极乐观向上的心态和团队协作能力 要有严谨、敢于承担责任、稳重的做事风格 善于自我总结、自我督促和不断学习的能 2.软件的分类: 软件 = 程序 + 数据 + 文档。   按照功能划分:     系统软件:如操作系...

  • 浅谈微服务体系中的分层设计和领域划分

    引言 看标题感觉这个东西很理论,比起“高并发、多线程”、“分布式CAP、一致性、Paxos”、“高可用SLA”等具体的干货技术点,软件体系知识显得很“湿”,似乎人人都有自己的认识,但又很少有人能说完整,有一点可以确定的是,如果你未来需要独立设计一个复杂的系统中台,并使之未来能快速应对各种需求变化的话,科学合理的领域划分和边界界定需要我们“处女座级”的坚持下去,这对防止人力失控、减少项目烂尾很...

  • GitHub 上值得收藏的 100 个精选前端项目!

    点击上方“逆锋起笔”,公众号回复 PDF 领取大佬们推荐的学习资料 来 源:https://www.jianshu.com/p/72ca8192f7b8 引言 整理与收集的一些比较优秀github项目,方便自己阅读,顺便分享出来,大家一起学习,作者简书上文章会持续更新,版权归原作者所有。 最新更新 codepen 一个在线编辑前端项目的网站,其中有一些前端大神的作品,也有很多令人惊艳的前端效...

  • Android视频的操作

    上节课我们着重介绍了Android中的音频的处理,通过学习,我们已经熟悉并掌握了多媒体开发的几个操作,大致可以分为:a 播放和采集 编解码处理 算法处理,实现特殊功能 标准协议以及播放器工具类的开发 本节课我们来看一下Android的视频的相关操作。Android提供了常见的视频的编码、解码机制。使用Android自带的MediaPlayer、MediaController等类可以很方便的实...

  • 2020年iOS面试反思总结

    Object-C系列面试题总结 基础题: 1.Objective-C的类可以多重继承么?可以实现多个接口么?Category是什么?重写一个类的方式用继承好还是分类好?为什么不要在category中重写一个类原有的方法? 答: Objective-c的类不可以有多继承,OC里面都是单继承,多继承可以用protocol委托代理来模拟实现 可以实现多个接口,可以通过实现多个接口完成OC的多重继承...

  •  Flink  内存

    Flink map:做一些清洗转换; flatMap:输入一个元素,返回一个或者多个元素; filter:符合条件的数据留下; keyBy:key相同的数据进入同一个分区; reduce:当前元素与上一次reduce返回值进行聚合操作; Union:合并多个流,但是所有的流类型必须一致; Connect:合并两个流,两个流的类型可以不同; CoMap、CoFlatMap:对于Connecte...

华为云40多款云服务产品0元试用活动

免费套餐,马上领取!
CSDN

CSDN

中国开发者社区CSDN (Chinese Software Developer Network) 创立于1999年,致力为中国开发者提供知识传播、在线学习、职业发展等全生命周期服务。