vue判断插槽是否有内容下发

需求

如上图 图标经过插槽传进来，并且图标和文字要有间隙

遇到的问题

当图标插槽没有内容时发现间隙还存在，这样很不美观

解决方法

具名插槽判断：

<div v-if="$slots.footer" slot="footer">
      <slot name="footer"></slot>
 </div>

匿名插槽判断:

<div v-if="$slots.default">
      <slot></slot>
</div>