perf: 优化计数卡

This commit is contained in:
ibuler 2025-03-17 10:45:53 +08:00 committed by 老广
parent fa5f4348ea
commit 01d44bc84e
4 changed files with 13 additions and 26 deletions

View File

@ -8,12 +8,12 @@
<slot> <slot>
<h3 class="no-margins "> <h3 class="no-margins ">
<span <span
:class="{ 'can-direct': body.canDirect ? true : false }" :class="{ 'can-direct': canDirect }"
class="num" class="num"
@click="handleClick" @click="handleClick"
> >
<span v-if="iCount === null"> - </span> <span v-if="count === null"> - </span>
<span v-else>{{ iCount }}</span> <span v-else>{{ count }}</span>
</span> </span>
</h3> </h3>
</slot> </slot>
@ -21,7 +21,6 @@
</template> </template>
<script> <script>
export default { export default {
name: 'SummaryCard', name: 'SummaryCard',
props: { props: {
@ -29,10 +28,6 @@ export default {
type: String, type: String,
default: '' default: ''
}, },
body: {
type: Object,
default: () => ({})
},
count: { count: {
type: [Number, String, Promise], type: [Number, String, Promise],
default: null default: null
@ -41,6 +36,10 @@ export default {
type: [String, Object], type: [String, Object],
default: '' default: ''
}, },
canDirect: {
type: Boolean,
default: false
},
callback: { callback: {
type: Function, type: Function,
default: () => { default: () => {
@ -54,25 +53,13 @@ export default {
data() { data() {
return {} return {}
}, },
computed: {
iCount() {
const count = this.body.count || this.count
return count
},
iRoute() {
return this.body.route || this.route
},
iDisabled() {
return this.body.disabled === undefined ? this.disabled : this.body.disabled
}
},
methods: { methods: {
handleClick() { handleClick() {
if (this.iDisabled) { if (this.disabled) {
return return
} }
if (this.iRoute) { if (this.route) {
this.$router.push(this.iRoute) this.$router.push(this.route)
return return
} }
this.callback.bind(this)() this.callback.bind(this)()

View File

@ -6,7 +6,7 @@
<div class="content"> <div class="content">
<el-row justify="space-between" type="flex"> <el-row justify="space-between" type="flex">
<el-col v-for="item of summaryItems" :key="item.title" :md="8" :sm="12" :xs="12"> <el-col v-for="item of summaryItems" :key="item.title" :md="8" :sm="12" :xs="12">
<SummaryCard :body="item.body" :title="item.title" /> <SummaryCard :title="item.title" v-bind="item.body" />
</el-col> </el-col>
</el-row> </el-row>
</div> </div>

View File

@ -7,9 +7,9 @@
<SummaryCard <SummaryCard
v-for="item of items" v-for="item of items"
:key="item.title" :key="item.title"
:body="item.body"
:title="item.title" :title="item.title"
class="summary-card" class="summary-card"
v-bind="item.body"
/> />
</div> </div>
</div> </div>

View File

@ -6,7 +6,7 @@
<div class="content"> <div class="content">
<el-row justify="space-between" type="flex"> <el-row justify="space-between" type="flex">
<el-col v-for="item of summaryItems" :key="item.title" :md="8" :sm="12" :xs="12"> <el-col v-for="item of summaryItems" :key="item.title" :md="8" :sm="12" :xs="12">
<SummaryCard :body="item.body" :title="item.title" /> <SummaryCard :title="item.title" v-bind="item.body" />
</el-col> </el-col>
</el-row> </el-row>
</div> </div>