跟随Element学习Vue小技巧(52)——Calendar前言小马哥昨天出差回来，给我带回了一份神秘的礼物只听他一本

❝
人生要是无憾

那该多无趣
❞

前言

小马哥昨天出差回来，给我带回了一份神秘的礼物

只听他一本正经的告诉我：”回家后打开，我怕你太激动，虽然不是特别贵，但也够你用一年了”

我等啊，等啊，终于等到下班了，立马飞奔回家，打开期待已久的礼物，一下子惊呆了，果然够我用一年

呵呵，送我一本日历！！！

今天，也送你一本日历，够用一年哟
千里送鹅毛，礼轻情意重嘛 ^_^

1 Calendar

导出别名

代码片段

import { range as rangeArr} from 'element-ui/src/utils/date-util';

技巧解析

❝
使用as，重命名导出变量
还记得解构赋值吗？使用：重命名
const {id: uid} = obj

JavaScript模块化传送门
❞

插槽语法糖

代码片段

<el-calendar>
  <!-- 这里使用的是 2.5 slot 语法，对于新项目请使用 2.6 slot 语法-->
  <template
    slot="dateCell"
    slot-scope="{date, data}">
    <p :class="data.isSelected ? 'is-selected' : ''">
      {{ data.day.split('-').slice(1).join('-') }} {{ data.isSelected ? '✔️' : ''}}
    </p>
  </template>
</el-calendar>

<el-calendar>
  <!-- 这里使用的是 2.6 slot 语法-->
  <template
    #dateCell="{date, data}">
    <p :class="data.isSelected ? 'is-selected' : ''">
      {{ data.day.split('-').slice(1).join('-') }} {{ data.isSelected ? '✔️' : ''}}
    </p>
  </template>
</el-calendar>

<!-- 2.5 slot语法 -->
<!-- 具名 -->
<div slot="header"></div>
<!-- 具名插槽 -->
<template slot="header" slot-scope="scope"></template>

<!-- 2.6 slot语法 --> 
<template v-slot:header></template>
<template v-slot:header="scope"></template>

<!-- slot语法糖 --> 
<template #header></template>
<template #header="scope"></template>

技巧解析

❝
类似v-bind:简化为：,v-on:简化为@
v-slot：也简化为#
这波糖，吃的甜吗 O(∩_∩)O哈哈~

作用域插槽传送门
❞

小技巧

补零

代码片段

/*
* @ {desc} 小于10的数，补0
* @ {params} day-Number
* @ {example} 
* '' =>00
  1  =>01
  10 =>10
*/
addZero = day =>`00${day}`.slice(-2)

「最美的风景在树上」 「还有你的眼睛里」

跟随Element学习Vue小技巧(52)——Calendar

人生要是无憾

那该多无趣

前言

1 Calendar

导出别名

代码片段

技巧解析

插槽语法糖

代码片段

技巧解析

小技巧

补零

代码片段

参考链接

往期回顾