Material Design 是 Google 推出的设计风格，它强调“纸片”和“墨水”的概念，以及严格的排版、色彩、形状等规范。日历控件是一个常用的 UI 组件，在 Web 应用程序中为用户提供了方便的日期选择体验。在本文中，我们将使用 Vue.js 框架实现 Material Design 风格的日历控件。
前置知识
阅读本文所需的前置技能包括：
- HTML/CSS 基础
- Vue.js 基础知识
设计思路
首先，我们要明确我们要实现的组件的设计思路。使用 Material Design 风格的日历控件应该包含以下特点：
- 使用卡片式设计
- 选择日期时使用涟漪动画
- 支持国际化
- 支持选择范围
使用户能够很容易地选择日期和范围。接下来，我们将按照以上特点来设计和实现这个控件。
组件实现
1. 创建基础组件
首先，在 Vue.js 中创建日历的基础组件。我们将此组件作为一个单独的文件 Calender.vue。此组件将作为我们所有进一步实现所需的基础。
// javascriptcn.com 代码示例
<template>
<div class="calendar">
<div class="header">
<button class="ripple">arrow_left</button>
<button class="ripple">arrow_right</button>
<div class="title"></div>
</div>
<div class="body"></div>
</div>
</template>
<style>
.calendar {
width: 320px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
border-radius: 8px;
overflow: hidden;
}
.header {
display: flex;
justify-content: space-between;
align-items: center;
height: 50px;
background-color: #a7c0cd;
padding: 0 16px;
color: #fff;
}
.body {
display: grid;
grid-template-columns: repeat(7, 1fr);
}
.ripple {
position: relative;
overflow: hidden !important;
}
.ripple:after {
content: "";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 200%;
height: 200%;
background-color: rgba(255, 255, 255, 0.8);
border-radius: 50%;
opacity: 0;
pointer-events: none;
transition: opacity 0.3s ease-out;
}
.ripple:hover:after {
opacity: 1;
}
</style>在上面的代码中，我们创建了一个基础的日历组件，它具有 Material Design 风格卡片和涟漪动画效果。我们使用了基本的 CSS 样式来定位和渲染组件。
接下来，我们将在此基础上添加进一步功能和特性。
2. 实现日期选择
为了使用户能够选择日期，我们将在日历上添加按钮用于选择。每个按钮将显示不同的日期并应附带点击事件。
在 HTML 文件中添加以下代码：
// javascriptcn.com 代码示例
<button
v-for="date in days"
:key="date"
class="ripple"
:class="{ grayed: isGrayed(date), active: isActive(date) }"
@click="select(date)"
>
{{ date }}
</button>代码中的 v-for 指令迭代每天的日期并为其创建一个按钮。我们使用 isActive 方法确定当前日期是否选中，使用 isGrayed 方法使过期的日期变灰。select 方法使用 v-model 双向绑定更新选定日期。
// javascriptcn.com 代码示例
<script>
export default {
props: {
value: { type: String, required: true },
},
data() {
return {
current: "",
};
},
mounted() {
this.current = this.value;
},
computed: {
days() {
const daysInMonth = new Date(
this.current.getFullYear(),
this.current.getMonth() + 1,
0
).getDate();
const firstDayInMonth = new Date(
this.current.getFullYear(),
this.current.getMonth(),
1
).getDay();
const days = [];
for (let i = 1; i <= daysInMonth; i++) {
days.push(i);
}
for (let i = 0; i < firstDayInMonth; i++) {
days.unshift("");
}
return days;
},
},
watch: {
value() {
this.current = this.value;
},
},
methods: {
isGrayed(date) {
const today = new Date();
const target = new Date(this.current);
if (date === "") return true;
target.setDate(date);
return target < today;
},
isActive(date) {
return date === new Date(this.value).getDate();
},
getNextMonth() {
this.current = new Date(
this.current.getFullYear(),
this.current.getMonth() + 1,
1
);
},
getLastMonth() {
this.current = new Date(
this.current.getFullYear(),
this.current.getMonth() - 1,
1
);
},
select(date) {
if (date === "") return;
this.$emit(
"input",
new Date(`${this.current.getFullYear()}-${this.current.getMonth() + 1}-${date}`)
.toISOString()
.split("T")[0]
);
},
},
};
</script>在上面的代码中，我们定义了一个值为当前选定日期的 v-model 属性。我们还在日历中使用了点击事件以便更新此属性。
3. 实现选择范围
为了选择日期范围，我们将添加另一个日历到我们的组件中。此日历应该较小，作为一个辅助日历提供范围选择。添加以下代码：
// javascriptcn.com 代码示例
<template>
<div class="calendar">
<div class="header">
<button class="ripple" @click="getLastMonth()">arrow_left</button>
<button class="ripple" @click="getNextMonth()">arrow_right</button>
<div class="title">{{ current.toLocaleString(navigator.language, { month: "long", year: "numeric" }) }}</div>
</div>
<div class="body">
<button
v-for="date in days"
:key="date"
class="ripple"
:class="{ grayed: isGrayed(date), active: isActive(date) }"
@click="select(date)"
>
{{ date }}
</button>
</div>
<div class="footer"><calendar @input="onRangeSelect" v-model="range"></calendar></div>
</div>
</template>
<style>
.calendar {
display: grid;
grid-template-rows: auto 1fr auto;
}
.footer {
height: 280px;
overflow: hidden;
border-top: 1px solid #e0e0e0;
}
</style>你会注意到我们在组件的底部插入了另一个日历并绑定到我们定义的 v-model 属性。
// javascriptcn.com 代码示例
computed: {
days() {
// ...
},
range() {
return [this.value, this.currentDate];
},
},
methods: {
// ...
onRangeSelect(date) {
this.$emit("input", date[0]);
this.currentDate = date[1];
},
},我们使用 computed 属性得到选择的日期范围，并使用我们新添加的方法 onRangeSelect 更新此范围。
4. 实现国际化
国际化是一个非常重要的功能，我们应该始终使我们的应用程序支持不同的语言。在这种情况下，我们只需要更改日期选择的格式。
// javascriptcn.com 代码示例
computed: {
// ...
title() {
const lang = navigator.language.slice(0, 2);
return `${this.current.toLocaleString(lang, {
month: "long",
})} ${this.current.getFullYear()}`;
},
},我们可以通过 navigator.language 属性获得用户的首选语言，并据此更改日期格式化选项。这样，用户可以轻松选择他们习惯的日期格式。
运行和测试应用程序
现在我们已经实现了日历控件，那么如何使用和测试它呢？
// javascriptcn.com 代码示例
<template>
<div class="app">
<div class="picker">
<calendar v-model="date"></calendar>
</div>
</div>
</template>
<style>
.app {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.picker {
width: 320px;
}
</style>
<script>
import Calendar from "./Calendar.vue";
export default {
components: { Calendar },
data() {
return {
date: new Date().toISOString().split("T")[0],
};
},
};
</script>在上述代码中，我们已经定义了使用此控件的应用程序。可以通过设置应用程序的 data.date 值来设置选定日期值。
接下来打开浏览器，查看工作效果吧！
总结
在本文中，我们使用了 Vue.js 框架和 Material Design 的设计风格实现了一个日历组件，该组件支持范围选择、国际化和减少人为失误的样式指南。我们通过先给出一个基本样式设计思路，再在此基础上添加各种复杂的功能和特性，并为这些功能和特性提供了详细的代码示例。我们希望这篇文章可以帮助您更好地理解如何将 Vue.js 框架与 Material Design 的设计风格结合在一起，以及如何创建美观且功能强大的交互式界面组件。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6530cffd7d4982a6eb25ff5a