vue-event-calendar 日历

最近在写一个日历，能够删除或者添加某一个事件，于是百度发现一个可以自定义的组件 参考 https://segmentfault.com/a/1190000007898857

　　以下是自定义的模块，可以删除任意一个事件，也可以点击日期去添加当前日期的事件，这里犯了一个错误，就是在main.js引入这个组件后，在此组件模块下又引了一次，导致覆盖从而出错！

<vue-event-calendar :events="demoEvents" @month-changed="monthChange" @day-changed="dayChange">
      <template scope="props">//最新版本的element-ui支持的slot-scope
        <div class="event-item" v-for="(event,index) in props.showEvents" :key="event">
          <div class="reuse-head">
            <div class="reuse-title">{{index+1}}. {{event.title}}</div>
            <div class="reuse-date">{{event.date}}</div>
            <el-button @click="showDelete(event)" type="warning" icon="el-icon-delete" circle></el-button>
          </div>
          <div class="reuse-foot">
            {{event.desc}}
          </div>
        </div>
      </template>
    </vue-event-calendar>

.reuse-head {
  font-size: 16px;
  display: flex;
  justify-content: space-between;
  .reuse-title {
    font-weight: 500;
  }
  .reuse-date {
    color: #999;
  }
}

.reuse-foot {
  font-size: 16px;
  color: #999;
  padding-top: 8px;
  margin-bottom: 8px;
  border-top: 1px solid #ddd;
}

重写的样式，其他的基本上可以参考上述链接，最终实现的效果如下

 

来源：https://www.cnblogs.com/alhh/p/8671471.html