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;
}

重写的样式，其余的基本上能够参考上述连接，最终实现的效果以下