89 lines
2.3 KiB
Vue
89 lines
2.3 KiB
Vue
<template>
|
||
<view class="emptybox">
|
||
<view class="empty-image-wrap" :style="imageWrapStyle">
|
||
<up-image
|
||
:src="emptyImage || emptyImg"
|
||
:width="renderWidth"
|
||
:height="renderHeight"
|
||
:mode="imgMode"
|
||
></up-image>
|
||
</view>
|
||
<text class="empty-text">{{ emptyDesc }}</text>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { computed } from 'vue';
|
||
import emptyImg from "@/static/icon_empty.png"
|
||
const props = defineProps({
|
||
emptyImage: {
|
||
type: String,
|
||
default: ''
|
||
},
|
||
imgWidth: {
|
||
type: [String, Number],
|
||
default: ''
|
||
},
|
||
imgHeight: {
|
||
type: [String, Number],
|
||
default: ''
|
||
},
|
||
emptyDesc: {
|
||
type: String,
|
||
default: '暂无数据'
|
||
}
|
||
})
|
||
|
||
const normalizeSize = (size) => {
|
||
if (size === '' || size === null || size === undefined) return '';
|
||
// 直传字符串（如 50%、206rpx、120px），数字交给 up-image 按组件规则处理
|
||
return typeof size === 'string' ? size.trim() : size;
|
||
};
|
||
const isPercentSize = (size) => typeof size === 'string' && size.endsWith('%');
|
||
|
||
const imgWidth = computed(() => {
|
||
const width = normalizeSize(props.imgWidth);
|
||
const height = normalizeSize(props.imgHeight);
|
||
if (width !== '') return width;
|
||
if (height === '') return '206rpx';
|
||
return '';
|
||
});
|
||
const imgHeight = computed(() => normalizeSize(props.imgHeight));
|
||
const renderWidth = computed(() => (isPercentSize(imgWidth.value) ? '100%' : imgWidth.value));
|
||
const renderHeight = computed(() => (isPercentSize(imgHeight.value) ? '100%' : imgHeight.value));
|
||
const imageWrapStyle = computed(() => {
|
||
const style = {};
|
||
if (isPercentSize(imgWidth.value)) style.width = imgWidth.value;
|
||
if (isPercentSize(imgHeight.value)) style.height = imgHeight.value;
|
||
return style;
|
||
});
|
||
const imgMode = computed(() => {
|
||
// 只传宽/高时按比例缩放，避免图片被拉伸
|
||
if (imgWidth.value && !imgHeight.value) return 'widthFix';
|
||
if (!imgWidth.value && imgHeight.value) return 'heightFix';
|
||
return 'aspectFit';
|
||
});
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.emptybox{
|
||
width:100%;
|
||
height:800rpx;
|
||
min-width:600rpx;
|
||
display: flex;
|
||
margin:0 auto;
|
||
align-items: center;
|
||
justify-content: center;
|
||
flex-direction: column;
|
||
.empty-image-wrap{
|
||
width: 100%;
|
||
display: flex;
|
||
justify-content: center;
|
||
}
|
||
.empty-text{
|
||
font-size: 30rpx;
|
||
color:#999;
|
||
}
|
||
}
|
||
</style>
|