问题：

在使用插槽的时候，插槽内的默认内容不显示出来。
image.png
如上图红框部分，没有使用插槽，按道理应该显示插槽中的默认内容，但是现在没有显示出来。
image.png

解决方法：

还未知

组件实现：
CountDown.vue

  1. <template>
  2.   <div class="count_down-base">
  3.     <slot
  4.       :item="{
  5.         d: days,
  6.         h: hours,
  7.         m: mins,
  8.         s: seconds,
  9.         hh: `00${hours}`.slice(-2),
  10.         mm: `00${mins}`.slice(-2),
  11.         ss: `00${seconds}`.slice(-2),
  12.       }"
  13.     >
  14.       <span v-show="isIncludes('dd')">{{ days }}天</span>
  15.       <span v-show="isIncludes('hh')">{{ hours | zeroize }}:</span>
  16.       <span v-show="isIncludes('mm')">{{ mins | zeroize }}:</span>
  17.       <span v-show="isIncludes('ss')">{{ seconds | zeroize }}</span>
  18.     </slot>
  19.   </div>
  20. </template>
  21. <script>
  22. export default {
  23.   filters: {
  24.     zeroize(val) {
  25.       if (val < 10) {
  26.         return '0' + val
  27.       }
  28.       return val
  29.     },
  30.   },
  31.   data: () => ({
  32.     days: '0',
  33.     hours: '00',
  34.     mins: '00',
  35.     seconds: '00',
  36.     timer: null,
  37.     clackCount_: 3,
  38.     curTime: 0,
  39.   }),
  40.   props: {
  41.     formatter: {
  42.       type: String,
  43.       default: 'dd天hh:mm:ss',
  44.     },
  45.     time: {
  46.       type: [Number, String],
  47.       default: 0,
  48.     },
  49.     // 时间时间单位是否为毫秒
  50.     isMilliSecond: {
  51.       type: Boolean,
  52.       default: false,
  53.     },
  54.     clackCount: {
  55.       // 重复执行次数，需要在 finishClick 方法中执行回调方法
  56.       type: Number,
  57.       default: 3,
  58.     },
  59.   },
  60.   computed: {
  61.     duration() {
  62.       const time = this.isMilliSecond
  63.         ? Math.round(+this.time / 1000)
  64.         : Math.round(+this.time)
  65.       return time
  66.     },
  67.   },
  68.   watch: {
  69.     duration() {
  70.       this.countDown()
  71.     },
  72.   },
  73.   mounted() {
  74.     this.clackCount_ = this.clackCount
  75.     this.curTime = Date.now()
  76.     this.countDown()
  77.   },
  78.   methods: {
  79.     isIncludes(str) {
  80.       return this.formatter.includes(str)
  81.     },
  82.     countDown() {
  83.       this.getTime(this.duration)
  84.     },
  85.     getTime(duration) {
  86.       this.timer && clearTimeout(this.timer)
  87.       if (duration < 0) {
  88.         // 执行结束调用父组件方法，参数是重新执行倒计时回调函数,最多重新执行3次
  89.         this.$emit('finishClick', () => {
  90.           this.clackCount_ -= 1
  91.           if (this.clackCount_ < 0) {
  92.             return
  93.           }
  94.           this.getTime(this.duration)
  95.         })
  96.         return
  97.       }
  98.       const { dd, hh, mm, ss } = this.durationFormatter(duration)
  99.       this.days = dd || 0
  100.       this.hours = hh || 0
  101.       this.mins = mm || 0
  102.       this.seconds = ss || 0
  103.       this.timer = setTimeout(() => {
  104.         //  为什么使用diffTime?
  105.         //  部分浏览器在进入后台时(或者失去焦点时), 会将 setTimeout 等定时任务暂停 待用户回到浏览器时, 才会重新激活定时任务,这里要删除用户失去焦点时候与从新获得焦点的时间间隔
  106.         const now = Date.now()
  107.         const diffTime = Math.floor((now - this.curTime) / 1000)
  108.         this.curTime = now
  109.         this.getTime(duration - diffTime)
  110.       }, 1000)
  111.     },
  112.     durationFormatter(time) {
  113.       if (!time) return { ss: 0 }
  114.       let t = time
  115.       const ss = t % 60
  116.       t = (t - ss) / 60
  117.       if (t < 1) return { ss }
  118.       const mm = t % 60
  119.       t = (t - mm) / 60
  120.       if (t < 1) return { mm, ss }
  121.       const hh = t % 24
  122.       t = (t - hh) / 24
  123.       if (t < 1) return { hh, mm, ss }
  124.       const dd = t
  125.       return { dd, hh, mm, ss }
  126.     },
  127.   },
  128. }
  129. </script>
  130. <style lang="scss" scoped>
  131. .count_down-base {
  132.   display: flex;
  133.   justify-content: flex-start;
  134.   align-items: center;
  135. }
  136. </style>