Vue是一款優秀的JavaScript框架,它能夠幫助開發者更加便捷地構建Web應用程序。其中,Vue組件是Vue框架中非常重要的一個概念,它能夠將頁面劃分為一個個獨立的模塊,使得頁面的結構更加清晰、可維護性更高。如果想在Vue組件中加入日期表,可以使用Vue自制的日期表組件。
Vue.component('date-picker', { template: '\ <div class="date-picker">\ <table>\ <thead>\ <tr>\ <th v-for="weekday in weekdays">{{ weekday }}</th>\ </tr>\ </thead>\ <tbody>\ <tr v-for="week in weeks">\ <td v-for="day in week"\ :class="{ unavailable: isUnavailable(day) }"\ @click="select(day)">\ {{ day.getDate() }}\ </td>\ </tr>\ </tbody>\ </table>\ </div>\ ', props: { monthsToShow: { type: Number, default: 1 }, unavailableDays: { type: Array, default: function() { return [] } }, selectedDay: { type: Date, default: null } }, data: function() { return { currentDate: this.selectedDay || new Date(), weekdays: ['日', '一', '二', '三', '四', '五', '六'] } }, computed: { daysInMonth: function() { return new Date(this.currentDate.getFullYear(), this.currentDate.getMonth() + 1, 0).getDate() }, weeks: function() { var weeks = [], month = this.currentDate.getMonth(), year = this.currentDate.getFullYear(), firstDay = new Date(year, month, 1), lastDay = new Date(year, month + this.monthsToShow, 0) for (var i = firstDay.getDate(); i <= lastDay.getDate(); i++) { var dateObj = new Date(year, month, i) if (i === firstDay.getDate() || dateObj.getDay() === 0) { weeks.push([]) } var weekIndex = weeks.length - 1 weeks[weekIndex].push(dateObj) } return weeks } }, methods: { isUnavailable: function(day) { for (var i = 0; i < this.unavailableDays.length; i++) { var date = this.unavailableDays[i] if (date.getFullYear() === day.getFullYear() && date.getMonth() === day.getMonth() && date.getDate() === day.getDate()) { return true } } return false }, select: function(day) { if (!this.isUnavailable(day)) { this.currentDate = day this.$emit('select', day) } } } })
在上面的代碼中,我們定義了一個名為date-picker的Vue組件,并在組件中定義了一個模板,該模板以一個表格的形式呈現日期表。該組件有三個屬性:monthsToShow、unavailableDays和selectedDay。monthsToShow表示要顯示多少個月的日期,unavailableDays表示不可用日期(即無法被選中的日期),selectedDay表示已選中的日期。同時,該組件具有一個computed屬性:weeks,里面計算了一個二維數組weeks,這個數組包含了每一個月的所有日期。
上一篇json手機上獲取經緯度
下一篇vue自制水印