applet/components/noData/noData.vue

<template>
  <view class="no-data-view" :style="{ 'margin-top': conf.top + 'vh' }">
    <image v-if="conf.imgUrl" :style="{ width: conf.imgWidth, height: config.imgHeight }" :src="conf.imgUrl ? conf.imgUrl : $handleImageUrl('/nodata.png')"></image>
    <image v-if="!conf.imgUrl" class="no-data" :src="$handleImageUrl('/nodata.png')"></image>
    <view :style="{
        color: conf.color,
        'font-size': conf.fSize,
        'padding-top': conf.txtTop + 'rpx',
      }">{{ conf.content }}</view>
  </view>
</template>

<script setup name="noData">
import { ref, watch } from "vue";

const props = defineProps({
  config: {
    type: Object,
    default: function () {
      return {};
    },
  },
});

const conf = ref({
  type: "1",
  top: 22,
  imgWidth: 0,
  imgHeight: 0,
  imgUrl: "",
  content: "暂无数据~",
  fSize: 30,
  color: "#B3B3B3",
  txtTop: 20,
});

const init = () => {
  conf.value = Object.assign(conf.value, props.config);
};

watch(
  () => props.config,
  (newVal) => {
    conf.value = Object.assign(conf.value, newVal);
  }
);

init();
</script>

<style scoped>
.no-data-view {
  text-align: center !important;
}
.no-data {
  width: 475rpx;
  height: 335rpx;
}
</style>