vue-event-calendar 日曆

最近在寫一個日曆，可以刪除或者添加某一個事件，因而百度發現一個能夠自定義的組件參考 https://segmentfault.com/a/1190000007898857vue

　　如下是自定義的模塊，能夠刪除任意一個事件，也能夠點擊日期去添加當前日期的事件，這裏犯了一個錯誤，就是在main.js引入這個組件後，在此組件模塊下又引了一次，致使覆蓋從而出錯！element-ui

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

重寫的樣式，其餘的基本上能夠參考上述連接，最終實現的效果以下segmentfault