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