vant calendar 组件 bottom-info slot 用法

vant 组件库中的calendar组件定义了4个插槽，如下所示：

从文档上看，bottom-info插槽有参数，所以是作用域插槽，我们看下此插槽用法。还是直接上代码吧

    <van-calendar
      ref="calendarRef"
      :poppable="false"
      :show-confirm="false"
      :show-title="false"
      :show-mark="false"
      :default-date="defaultDate"
      :style="{ height: '64rem' }"
      :formatter="formatter"
      :min-date="minDate"
      :max-date="maxDate"
      @select="onSelect"
    >
      <div slot="bottom-info" slot-scope="day">
        <div>{{ day.bottomInfo }}</div>
        <div v-if="day.tip">{{ day.tip }}</div>
        <div v-else style="min-height: 14px"></div>
      </div>
    </van-calendar>

    // Vant日历日期添加法定节假日以及24节气
    formatter(day) {
      const _time = new Date(day.date);
      const y = _time.getFullYear();
      const m = _time.getMonth() + 1;
      const d = _time.getDate();
      const w = _time.getDay();
      const info = calendar.solar2lunar(y, m, d);
      //   改变周六周日显示颜色
      if (w === 0 || w === 6) {
        day.className = "weekendRed";
      }
      //   优先级:节日>节气>农历
      if (info.festival != null && info.festival != "") {
        day.bottomInfo = info.festival;
      } else if (info.Term != null && info.Term != "") {
        day.bottomInfo = info.Term;
        day.tip = "*";
      } else if (info.IDayCn != null && info.IDayCn != "") {
        day.bottomInfo = info.IDayCn;
      }

      return day;
    },

我们给bottom-info 加了节日，节气，农历，并给所有节气下面增加了一个* 。如下所示：

源代码看下上一篇文章：Vant 日历组件改造，增加农历，左右点击按钮上一个月，下一个月_夜跑者的博客-CSDN博客_vant calendar 日历切换月份