<template>
  <div
    class="empty"
    v-if="show"
    :style="{
      marginTop: marginTop + 'px',
    }"
  >
    <img
      :style="{ imgWidth: imgWidth + 'px', imgHeight: imgHeight + 'px' }"
      v-if="imgSrc"
      :src="imgSrc"
      alt=""
    />
    <div
      :style="{ color: color, fontSize: fontSize + 'px', marginTop: '10px' }"
    >
      {{ text }}
    </div>
    <div class="slot-wrap">
      <slot name="bottom"></slot>
    </div>
  </div>
</template>

<script>
export default {
  name: "empty",
  components: {},
  props: {
    // 图片路径
    imgSrc: {
      type: String,
      default: "",
    },
    // 提示文字
    text: {
      type: String,
      default: "暂无内容",
    },
    // 文字大小，单位rpx
    fontSize: {
      type: [String, Number],
      default: 26,
    },
    // 文字颜色
    color: {
      type: String,
      default: "#c0c4cc",
    },
    //  图标宽度，单位px
    imgWidth: {
      type: [String, Number],
      default: 120,
    },
    // 图标高度，单位px
    imgHeight: {
      type: [String, Number],
      default: "auto",
    },
    // 是否显示组件
    show: {
      type: Boolean,
      default: true,
    },
    // 组件距离上一个元素之间的距离
    marginTop: {
      type: [String, Number],
      default: 24,
    },
  },
  data() {
    return {};
  },
  created() {},
  methods: {},
};
</script>

<style lang='scss' scoped>
.empty {
  padding: 10px;
  text-align: center;
}
</style>

转载请注明：有爱前端 » empty没有数据内容为空