vue el-Calendar日历使用

最新推荐文章于 2024-08-27 10:09:56 发布

小川料理机

最新推荐文章于 2024-08-27 10:09:56 发布

阅读量4k

点赞数 3

文章标签： vue.js elementui

本文链接：https://blog.csdn.net/weixin_45427607/article/details/124254535

版权

本文介绍如何在Vue.js项目中结合ElementUI库，实现一个功能丰富的日历组件。通过展示代码示例，包括模板和CSS部分，帮助读者理解如何在父组件和子组件间进行交互。

摘要由CSDN通过智能技术生成

效果图

子组件：

<template>
  <div class="dateInfo">
    <div class="item">
      <span class="day" :show="itemdate.oneDay.length > 0 ? 'show' : false">
        {
  { itemdate.data.split('-').slice(2).join('-') }}
      </span>
      <template>
        <div v-for="(item, index) in itemdate.oneDay" :key="index" class="today">
          <el-popover placement="right" width="width" popper-class="contestPopper" trigger="hover">
            <div class="top">
              <h2>
                {
  { item.title }} <img v-if="item.isGoodsRewards == '1'" src="@/assets/contest/gift.png" alt="" /><img
                  v-if="item.isMoneyRewards == '1'"
                  style="height: 26px"
                  src="@/assets/contest/money.png"
                  alt=""
                />
              </h2>
              <div class="time">
                <img src="@/assets/contest/time.png" alt="" />竞赛时间：
                {
  { parseTime(item.startTime, '{y}年{m}月{d}日 {h}:{i}') + ' ~ ' + parseTime(item.endTime, '{y}年{m}月{d}日 {h}:{i}') }}
              </div>
            </div>
            <div class="footer">
              <span
                class="sign-up-ing"
                :class="
                  item.status == 1
                    ? 'sign-up-ing1'
                    : item.status == 2
                    ? 'sign-up-ing2'
                    : item.status == 3 || item.status == 4
                    ? 'sign-up-ing4'
                    : item.status == 5
                    ? 'sign-up-ing5'
                    : ''
                "
                >{
  {
                  item.status == 1
                    ? '预热中'
                    : item.status == 2
                    ? '报名中'
                    : item.status == 3 || item.status == 4
                    ? '比赛中'
                    : item.status == 5
                    ? '已结束'
                    : ''
                }}</span

最低0.47元/天解锁文章