subject_gxj/xj_project_app_2024_2_18/components/placeholder.vue

<!--
 * @Author: colpu ycg520520@qq.com
 * @Date: 2024-07-30 10:45:32
 * @LastEditors: colpu ycg520520@qq.com
 * @LastEditTime: 2024-07-30 10:45:57
 * @FilePath: components/placeholder.vue
 * @Description: 
-->
<template>
  <view class="colpu__placeholder-wrap" :style="styles">
    <view class="colpu__placeholder-img">
      <image :style="imageStyle" lazy-load="true" :src="src"></image>
    </view>
    <rich-text
      class="colpu__placeholder-desc"
      v-if="desc.length"
      :nodes="desc"
    ></rich-text>
    <view class="colpu__placeholder-slot" :style="`margin-bottom:${offset}`">
      <slot></slot>
    </view>
  </view>
</template>
<script setup>
defineProps({
  src: {
    type: String,
    default: "/static/svgs/noinfo.svg",
  },
  desc: {
    type: String,
    default: "空空如也!",
  },
  styles: {
    type: [Object, String],
    default: "",
  },
  imageStyle: {
    type: [Object, String],
    default: () => ({
      width: "96px",
      height: "96px",
    }),
  },
  offset: { type: String, default: "0" },
});
</script>
<script>
export default {
  options: {
    virtualHost: true,
  },
};
</script>
<style lang="scss" scoped>
$lead: '.colpu__';
#{$lead}placeholder {
  &-wrap {
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex: 1;
    height: 100%;
  }
  &-img {
  }
  &-desc {
    display: inline-block;
    text-align: center;
    font-size: 24rpx;
    color: #ccc;
  }
  &-slot {
    display: inline-block;
  }
}
</style>