跟随Element学习Vue小技巧(17)——TimePicker

七秒记忆的鱼
1,751 阅读4分钟
❝

这世界也许有人喜欢孤独

但没有人可以承受孤独

❞

前言

前阵了，龙龙出去吃烧烤，大晚上的还发朋友圈炫耀，别提有多馋人
第二天早上，他有气无力的过来跟我说，昨天吃多了，肚子疼，让我扶他去医院看看

龙龙：医生，我肚子疼，给我开点药
医生：现在几点了
我两一脸蒙逼的看着医生
医生重复道：现在几点了
龙龙说，医生我肚子疼，跟时间有什么关系
医生冷不丁的来了句，也许时间是一种解药
龙龙看了看手表，顿时觉得肚子更痛了... 那些好的，或者不好的，都会随时间慢慢消散。如果可以选择，你最想回到哪个时间点呢？那里又有着怎么不一般的故事？
坐稳了吗？时光之旅即将开始
嗖！嗖！嗖！

1 TimePicker

插件plugin

老虎是不是已经很厉害了，如果再加上一对翅膀，岂不是要逆天 !_!
上好的绸缎穿在身上就够动人了，如果再绣上玫瑰花，岂不是连魂都要勾跑 *_*
Vue呢，如果再加上插件，会是种什么样的体验 $_$

代码片段

import TimePicker from '../date-picker/src/picker/time-picker';

/* istanbul ignore next */
TimePicker.install = function(Vue) {
  Vue.component(TimePicker.name, TimePicker);
};

export default TimePicker;

技巧解析

❝

插件，即给Vue额外提供一些功能
从结果看，需要导出一个对象, 即
TimePicker
对象必须提供一个方法，install
方法会给你一个Vue构造器，Vue
有了Vue, 就有Vue.prototype
有了这些，就可以调用Vue全局方法
还记得带$的方法吗？
$nextTick, $createElement,...

Vue全局API 传送门
Vue插件开发 传送门

❞

2 time-picker

混合mixin

那个微信二维码的阿悦，还记得吗？
昨天我们一行人聊天，发现阿悦居然跟我是老乡
所以，对阿悦的了解又进了一步 ^^

代码片段

import Picker from '../picker';
import TimePanel from '../panel/time';
import TimeRangePanel from '../panel/time-range';

export default {
  mixins: [Picker],
  name: 'ElTimePicker',
}

技巧解析

❝

我一直以为，mixin只能混入js那一快，包括数据data，方法methods，生命周期mouted等
没想到，还等混入一整个组件，包括template，style
有没有一点点的小意外
如果原本有template呢？
取自己的template呗，毕竟自身的优先级是最高的

❞

3 picker

根节点$el

话说温州有一位老太太，这天带着儿子和小孙子来到医院做亲子鉴定

三天后，医生告诉他们，结果不好说
儿子笑了，这不是开玩笑吗，宝宝要么是我的要么不是，怎么还不好说
医生说，有一个位点不匹配，要么是基因突变，要么孩子的父亲是男人的近亲属

于是，取了母亲的血液，进行了第二轮检测
三天后，医生告诉他们，完全匹配，排除母亲基因突变的可能

老太太不死心，数天后又带来一个男人，进行了第三轮检测
结果，与孩子完全匹配

最后老太太道明来意，我的儿子是个傻儿子，多年来我隐约觉得老头子和媳妇之间有问题，我真希望我的感觉是错的。现在，这到底是一个家，还是两个家……

代码片段

<template>
  <el-input></el-input>
  <div></div>
</template>

技巧解析

❝

所以，一个家庭最好还是只有一个爸爸
根节点也最好只有一个
粗看时，咦，怎么两个爸爸，要干啥！
细看时，原来是v-if和v-else
至于为什么只允许一个根节点
传送门发给你

Vue实例为什么只能有一个根元素

❞

组件挂载$mount

不知道你玩过魔方没有？
每次看到别人一下子还原6面的时候，只能在一旁投来羡慕的眼光
到底是怎么做到的呢？心里一直是一个谜
有一次，手痒痒的，拿走隔壁的魔方，一个人偷偷地转来转去，一不小心，一个角被我给扭掉了，心想，这下完了！！ 小手一抖，另外几个角也点了，WTF！！！
我只能强忍着泪水，一个一个拼上去
结果咋样，竟然阴差阳错的还原了6面

代码片段

mountPicker() {
  this.picker = new Vue(this.panel).$mount();
  this.picker.defaultValue = this.defaultValue;
  this.picker.defaultTime = this.defaultTime;
  this.picker.popperClass = this.popperClass;
  this.popperElm = this.picker.$el;
  this.picker.width = this.reference.getBoundingClientRect().width;
  this.picker.showTime = this.type === 'datetime' || this.type === 'datetimerange';
  this.picker.selectionMode = this.selectionMode;
  this.picker.unlinkPanels = this.unlinkPanels;
  this.picker.arrowControl = this.arrowControl || this.timeArrowControl || false;
  this.$el.appendChild(this.picker.$el);
}

技巧解析

❝

通常，组件引入后，写在template里
其实，你也可以手动添加
组件实例，new Vue(this.panel)
实例挂载, panel.$mount()
DOM添加,this.$el.appendChild(this.picker.$el)
无聊时，你也可以皮一下，搞搞破坏
搞不好，也会有意外的收获哦

❞

彩蛋

正则匹配

// 时间格式化，忽略[y],[M], ..., [S]
var literal = /\[([^]*?)\]/gm;
'yyyy-[W]ww'.match(literal) // [W]

// 扩展, es6模板语法
var template = /\{\{([^]*?)\}\}/gm;
var data = {
  yyyy: 2020,
  MM: 08
}
'<p>{{yyyy}}-{{MM}}<p>'.replace(template, 
  $0 =>data[$0]) 

获取week

// 今天是一年中的第几周
export const getWeekNumber = function(src) {
  if (!isDate(src)) return null;
  const date = new Date(src.getTime());
  date.setHours(0, 0, 0, 0);
  // Thursday in current week decides the year.
  date.setDate(date.getDate() + 3 - (date.getDay() + 6) % 7);
  // January 4 is always in week 1.
  const week1 = new Date(date.getFullYear(), 0, 4);
  // Adjust to Thursday in week 1 and count number of weeks from date to week 1.
  // Rounding should be fine for Daylight Saving Time. Its shift should never be more than 12 hours.
  return 1 + Math.round(((date.getTime() - week1.getTime()) / 86400000 - 3 + (week1.getDay() + 6) % 7) / 7);
};



「世间最美的文字」 「就是你的名字」

参考链接

往期回顾

avatar
文章
阅读
粉丝