1. 首页
  2. css

CSS让我们制作一个Vue驱动的月历

你有没有在网页上看到日历,然后想,他们到底是怎么做到的?对于这样的东西,很自然地就可以找到一个插件,甚至是一个嵌入的Google日历,但实际上制作一个插件要比你想象的简单得多。尤其是当我们使用Vue的组件驱动功能时,我在CodeSandbox上设置了一个演示,这样您就可以看到我们的目标,但最好是详细说明我们的目标:创建一个月视图网格,显示当前月份的日期,显示从上个月到下个月的日期网格总是满的表示当前日期显示当前所选月份的名称导航到上一个月和下一个月允许用户通过单击
返回到当前月份,我们将构建一个单页应用程序,从中获取日历日期天.js,一个超轻实用程序库。步骤1:从基本标记开始
我们将直接跳转到模板。如果你是Vue的新手,Sarah的入门系列是一个很好的开始。另外值得注意的是,在这篇文章中,我将链接到VUE2文档。Vue 3目前处于测试阶段,其文档可能会有所更改。
让我们先为日历创建一个基本模板。我们可以将我们的标记概括为三个层,其中:
– 日历头的一个部分。这将显示当前所选月份的组件和负责在月份之间分页的元素。
– 日历网格头的一个部分。保存包含一周中的几天,从星期一开始。
– 日历网格。你知道,当前月份的每一天,在网格中用正方形表示。
让我们把它写在一个名为CalendarMonth.vue的文件中。这将是我们的主要组件。

Now that we have some markup to work with, let\”s go one step further and create required components.Step 2: Header components
In our header we have two components:
– CalendarDateIndicator显示当前选定的月份。
– CalendarDateSelector负责月份之间的分页。
让我们从CalendarDateIndicator开始。此组件将接受selectedDate属性,该属性是天.js对象,它将正确格式化当前日期并将其显示给用户。

That was easy. Let\”s go and create the pagination component that lets us navigate between months. It will contain three elements responsible for selecting the previous, current and next month. We\”ll add an event listener on those that fires the appropriate method when the element is clicked.

Then, in the script section, we will set up two props that the component will accept:
– currentDate允许我们在单击\”今天\”按钮时返回到当前月份。
– selectedDate告诉我们当前选择的月份。
我们还将定义负责使用中的subtract和add方法,基于当前选定的日期计算新选定的日期天.js. 每个方法还将$emit一个事件,以新选择的月份发送给父组件。这允许我们将所选日期的值保存在一个地方,这将是我们的CalendarMonth.vue组件,并将其传递给所有子组件(即标题、日历网格)。
// CalendarDateSelector.vueimport dayjs from \”dayjs\”;export default {name: \”CalendarDateSelector\”,props: {currentDate: {type: String,required: true},selectedDate: {type: Object,required: true}},methods: {selectPrevious() {let = dayjs(this.currentDate);this.$emit(\”dateSelected\”, newSelectedDate);},selectNext() {let>
Now, let\”s go back to the CalendarMonth.vue组件并使用新创建的组件。
要使用它们,我们首先需要导入和注册组件,还需要创建值将作为道具传递给这些组件:
– selectedDate 是当前选定的日期(默认设置为今天的日期)。
在呈现组件之前,我们需要做的最后一件事是创建一个负责更改selectedDate的值。当收到来自分页组件的事件时,将触发此方法。
// CalendarMonth.vueimport dayjs from \”dayjs\”;import CalendarDateIndicator from \”./CalendarDateIndicator\”;import CalendarDateSelector from \”./CalendarDateSelector\”;export default {components: {CalendarDateIndicator,CalendarDateSelector},data() {return {selectedDate: dayjs(),today: dayjs().format(\”YYYY-MM-DD\”)};},methods: {selectDate(newSelectedDate)>
Now we have everything we need to render our calendar header:

This is a good spot to stop and see what we have so far. Our calendar header is doing everything we want, so let\”s move forward and create components for our calendar grid.Step 3: Calendar grid components
Here, again, we have two components:
– CalendarWeekdays显示工作日的名称。
– CalendarMonthDayItem表示日历中的一天。
CalendarWeekdays组件包含一个列表,该列表遍历工作日标签(使用v-for指令)并为每个工作日呈现该标签工作日。在脚本部分,我们需要定义我们的工作日,并创建一个computed属性,使其在模板中可用,并缓存结果,以防止我们将来重新计算它。
// CalendarWeekdays.vue
下一个是CalendarMonthDayItem。它是一个列表项,它接收一个对象的day属性,以及一个布尔属性isToday,允许我们设置列表项的样式,以指示它是当前日期。我们还有一个computed属性,它将接收到的日期对象格式化为所需的日期格式(D,或本月的数字日)。
// CalendarMonthDayItem.vue
OK, now that we have these two components, let\”s see how we can add them to our CalendarMonth组件。
我们首先需要导入并注册它们。我们还需要创建一个computed属性,它将返回一个表示我们的日子的对象数组。每天包含一个date属性和isCurrentMonth属性。
//日历月.vue<script>从\”dayjs\”导入dayjs;从\”/CalendarMonthDayItem\”导入CalendarMonthDayItem;从\”/CalendarWeekdays\”导入CalendarWeekdays; 导出默认值{名称:\”CalendarMonth\”,组件:{/…CalendarMonthDayItem,CalendarWeekdays},计算:{days(){return[{date:\”2020-06-29\”,iscurrentmount:false},{date:\”2020-06-30\”,iscurrentmount:false},{日期:\”2020-07-01\”,iscurrentmount:true},{日期:\”2020-07-02\”,iscurrentmount:true},//…{日期:\”2020-07-31\”,iscurrentmount:true},{日期:\”2020-08-01\”,iscurrentmount:false},{日期:\”2020-08-02\”,iscurrentmount:false};};>>></script;
然后,在模板中,我们可以渲染我们的组件。同样,我们使用***30***指令来呈现所需的日元素数。
***31***
好的,现在情况开始好转了。看看我们在哪儿。它看起来不错,但是,正如您可能注意到的,模板目前只包含静态数据。月份被硬编码为七月,日期也被硬编码。我们将通过计算特定月份的日期来改变这一点。让我们深入研究代码吧!第4步:设置当前月历让我们思考如何计算应在特定月份显示的日期。就是在那里天.js真的起作用了。它提供了我们需要的所有数据,以便使用真实的日历数据将日期正确地放置在给定月份的一周中的正确日期上。它允许我们获取和设置从一个月的开始日期到显示数据所需的所有日期格式选项的任何内容。
我们将:
– 获取当前月份
– 计算日期应放在何处(工作日)
– 计算显示上个月和下个月日期的日期
– 将所有我们已经在一起了天.js在我们的***32***部件中进口。我们还将依靠几个天.js插件的帮助。平日有助于我们确定一周的第一天。有些人喜欢星期天作为一周的第一天。其他人喜欢星期一。见鬼,在某些情况下,从星期五开始是有意义的。我们将从星期一开始。WeekOfYear插件返回一年中所有星期中当前星期的数值。一年有52周,所以我们可以说从1月1日开始的那一周是一年中的第一周,以此类推日历月.vue&lt;script&gt;从\”dayjs\”导入dayjs;从\”dayjs/plugin/weekday\”导入weekday;从\”dayjs/plugin/weekOfYear\”导入weekOfYear;//… 天js.extend(工作日);天js.extend(weekOfYear);//…这非常简单,但现在真正的乐趣开始了,因为我们现在将使用日历网格。让我们停下来想一想,我们真正需要做什么才能做到这一点。首先,我们希望日期数字落在正确的工作日列中。例如,2020年7月1日是星期三。这就是日期编号的开始。如果一个月的第一天是星期三,那就意味着第一周的星期一和星期二将有空的网格项。这个月的最后一天是7月31日,星期五。这意味着星期六和星期天将是网格的最后一周。我们要分别用上个月和下个月的尾随日期和前导日期填充这些日期,这样日历网格总是满的。添加当前月份的日期将当前月份的日期添加到网格中,我们需要知道这个月有多少天。我们可以使用提供的***34***方法得到天.js. 让我们为它创建一个***35***属性。***36***当我们知道这一点时,我们创建一个长度等于当前月份天数的空数组。然后我们***37***这个数组,为每个数组创建一个day对象。我们创建的对象具有任意结构,因此如果需要可以添加其他属性。在本例中,我们需要一个***38***属性,用于检查特定日期是否为当前日期。我们还将返回一个***39***值,用于检查日期是在当前月份内还是在当前月份外。如果不在当前月份,我们将对其进行样式设置,以便人们知道它们不在当前月份的范围内。***40***然后,基于此,我们需要检查上个月的最后一个星期一是哪一天。我们需要这个值来知道在当前月份视图中应该可以看到上个月的多少天。我们可以通过从当前月份的第一天减去工作日值得到。例如,如果一个月的第一天是星期三,我们需要减去三天得到上个月的最后一个星期一。有了这个值,我们就可以创建一个day对象数组,从上个月的最后一个星期一开始一直到该月底。***41***好的,我们知道如何创建我们需要的所有天,所以让我们使用它们并将所有天合并到一个包含当前月份中要显示的所有天的数组中,包括上个月和下个月的填充日期。***42***<

CSS让我们制作一个Vue驱动的月历 为WP2原创文章,链接:https://www.wp2.cn/css/css%e8%ae%a9%e6%88%91%e4%bb%ac%e5%88%b6%e4%bd%9c%e4%b8%80%e4%b8%aavue%e9%a9%b1%e5%8a%a8%e7%9a%84%e6%9c%88%e5%8e%86/