refactor: taro

zhengyiming

2025-02-20 703c46d17731d1b437509f326c050d1d36838f74

 apps/h5/src/components/NoData/NoData.vue

New file
@@ -0,0 +1,75 @@
<template>
  <div :class="isDesktop ? 'desktop-no-data' : 'no-data'">
    <img v-if="type == 'content'" :src="noContent" />
    <img v-else-if="type == 'network'" :src="noNetwork" />
    <img v-else :src="noData" />
    <slot name="no-data-text">
      <div class="no-data-text">{{ noDataText }}</div>
    </slot>
  </div>
</template>
<script setup lang="ts">
import noContent from '@/assets/components/icon-no-data.png';
import noNetwork from '@/assets/components/icon-no-net.png';
import noData from '@/assets/components/icon-no-data.png';
const NoDataText = {
  content: '暂无内容',
  data: '暂无数据',
  network: '暂无网络',
};

type Props = {
  type?: keyof typeof NoDataText;
  text?: string;
  isDesktop?: boolean;
};

const props = withDefaults(defineProps<Props>(), {
  type: 'data',
  text: '',
  isDesktop: false,
});

const noDataText = computed(() => {
  return props.text ? props.text : NoDataText[props.type];
});
</script>

<style lang="scss" scoped>
.no-data {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  // margin-top: 10vh;
  flex: 1;

  img {
    display: block;
    margin: 0 auto;
  }

  .no-data-text {
    margin-top: 20px;
    font-size: 22px;
    text-align: center;
    color: #67666e;
  }
}

.desktop-no-data {
  padding-bottom: 16px;

  img {
    display: block;
    margin: 0 auto;
    width: 14%;
  }

  .no-data-text {
    font-size: 20px;
    text-align: center;
    color: #67666e;
  }
}
</style>