You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
99 lines
1.8 KiB
Vue
99 lines
1.8 KiB
Vue
<template>
|
|
<!-- <el-button @click="ccc">Default</el-button> -->
|
|
<el-card class="card">
|
|
<el-scrollbar height="100%">
|
|
<h2 class="cardHead">{{ testContent }}</h2>
|
|
|
|
<div class="cardBody" v-if="skeletonBool">
|
|
<el-skeleton :rows="rows" style="margin-top: 4%" />
|
|
</div>
|
|
</el-scrollbar>
|
|
</el-card>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { computed, ref, watch, onMounted } from 'vue';
|
|
|
|
const props = defineProps({
|
|
fontFamily: {
|
|
type: String,
|
|
default: 'Segoe UI'
|
|
},
|
|
fontSize: {
|
|
type: Number,
|
|
default: 14
|
|
},
|
|
testColor: {
|
|
type: String,
|
|
default: '#000000'
|
|
},
|
|
testContent: {
|
|
type: String,
|
|
default: '标题内容'
|
|
},
|
|
skeletonBool: {
|
|
type: Boolean,
|
|
default: true
|
|
},
|
|
skeletonRows: {
|
|
type: Number,
|
|
default: 5
|
|
}
|
|
});
|
|
let computedSize = computed({
|
|
// 读取
|
|
get() {
|
|
return props.fontSize + 'px';
|
|
}, // 修改
|
|
set(val) {
|
|
console.log('有人修改了fullName', val);
|
|
}
|
|
});
|
|
|
|
let rows = computed({
|
|
// 读取
|
|
get() {
|
|
if (props.skeletonRows >= 1) return props.skeletonRows - 1;
|
|
else return 0;
|
|
},
|
|
set(val) {}
|
|
});
|
|
</script>
|
|
|
|
<style scoped>
|
|
:deep(.el-card__body) {
|
|
padding: 0;
|
|
padding-top: 10px;
|
|
/* padding-left: 10px; */
|
|
}
|
|
.card {
|
|
margin: 0;
|
|
padding: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
/* max-width: 480px; */
|
|
color: v-bind('props.testColor');
|
|
font-family: v-bind('props.fontFamily');
|
|
/* font-family: 'Segoe UI'; */
|
|
font-size: v-bind('computedSize');
|
|
}
|
|
|
|
.cardHead {
|
|
margin: 0;
|
|
padding: 0px;
|
|
padding-bottom: 5px;
|
|
text-align: center;
|
|
}
|
|
.cardBody {
|
|
width: 90%;
|
|
height: 100%;
|
|
margin-left: 5%;
|
|
}
|
|
|
|
/* 让骨架屏的段落更厚且宽度一致 */
|
|
:deep(.el-skeleton__item) {
|
|
height: 24px; /* 增加段落高度，默认约 16px */
|
|
width: 100%; /* 让所有段落宽度一致，填满容器 */
|
|
}
|
|
</style>
|