hz/ylst-h5
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(Survey): 优化 EmptyContainer 组件描述内容的展示

Browse Source 
- 在描述部分添加 slot 插槽，以支持自定义内容
- 保留原有 errorMsg 显示逻辑，作为默认内容
This commit is contained in:
陈昱达
2025-05-26 14:03:48 +08:00
parent 41850e5187
commit 712985b643
1 changed files with 42 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

82
src/views/Survey/components/EmptyContainer.vue
View File

@@ -1,40 +1,42 @@
<script setup lang="ts">
import { useCssModule } from 'vue';
const errorMsg = defineModel<string>('errorMsg', { default: ' - 更多任务期待您的创建 - ' });
const showButton = defineModel<boolean>('showButton', { default: false });
const imgSrc = defineModel<string>('imgSrc');
const emit = defineEmits(['handle-click']);
const style = useCssModule();
</script>
<template>
<el-empty>
<template #image v-if="imgSrc">
<slot>
<!-- 如果放了图片，默认展示图片位置 -->
<img :src="imgSrc" alt="" :class="style.img" />
</slot>
</template>
<template #description>
<el-text>{{ errorMsg }}</el-text>
</template>
<el-button color="#71b73c" v-if="showButton" @click="emit('handle-click')" class="btn">
<div style="color: #fff">+ 新建问卷</div>
</el-button>
</el-empty>
</template>
<style scoped lang="scss" module>
.img {
width: 30vw;
height: auto;
}
.btn {
color: #fff;
font-weight: 400;
border-radius: 8px;
}
</style>
<script setup lang="ts">
import { useCssModule } from 'vue';
const errorMsg = defineModel<string>('errorMsg', { default: ' - 更多任务期待您的创建 - ' });
const showButton = defineModel<boolean>('showButton', { default: false });
const imgSrc = defineModel<string>('imgSrc');
const emit = defineEmits(['handle-click']);
const style = useCssModule();
</script>
<template>
<el-empty>
<template #image v-if="imgSrc">
<slot>
<!-- 如果放了图片，默认展示图片位置 -->
<img :src="imgSrc" alt="" :class="style.img" />
</slot>
</template>
<template #description>
<slot name="description">
<el-text>{{ errorMsg }}</el-text>
</slot>
</template>
<el-button color="#71b73c" v-if="showButton" @click="emit('handle-click')" class="btn">
<div style="color: #fff">+ 新建问卷</div>
</el-button>
</el-empty>
</template>
<style scoped lang="scss" module>
.img {
width: 30vw;
height: auto;
}
.btn {
color: #fff;
font-weight: 400;
border-radius: 8px;
}
</style>