基于 vue 封装信息面板

最新推荐文章于 2025-03-27 14:55:56 发布

HenryDZhang

最新推荐文章于 2025-03-27 14:55:56 发布

阅读量634

点赞数

CC 4.0 BY-SA版权

文章标签： vue.js

本文链接：https://blog.youkuaiyun.com/github_38424391/article/details/105208634

本文档介绍如何在Vue.js中封装一个InfoPanel.vue组件，用于展示信息面板。该组件可应用于各种场景，提供定制化的信息展示功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入图片描述
InfoPanel.vue

<template>
    <div class="component info-panel">
        <div class="table-row" v-for="item in data" :key="JSON.stringify(item)">
            <div class="table-col" v-for="i in item" :key="JSON.stringify(i)">
                <div class="table-item label">{{i.label}}</div>
                <div class="table-item value">
                    <text-wrapper v-if="i.html" v-html="i.html"></text-wrapper>
                    <text-wrapper v-else>
                        <a v-if="typeof i.value === 'string'" :class="[{ 'has-click': i.clickF }]" @click="i.clickF && i.clickF(i)">{{i.value}}</a>
                        <template v-else>
                            <a v-for="k in i.value" :key="JSON.stringify(k)" :class="[{ 'has-click': k.clickF || i.clickF }]" @click="k.clickF && k.clickF(k) || i.clickF && i.clickF(k)">{{k.txt}}</a>
                        </template>
                    </text-wrapper>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import TextWrapper from '@/components/TextWrapper.vue'

export default {
    name: 'InfoPanel',
    props: {
        data: {
            types: Object | Array,
            required: true
        }
    },
    methods: {
        returnArray (val) {
            console.log(val)
            return val
        }
    },
    components: {
        TextWrapper
    }
}
</script>

<style lang="scss">
.component.info-panel {
    .table-row {
        display: flex;
        .table-col {
            display: flex;
            flex: 1;
            width: 0;
            .table-item {
                display: flex;
                min-height: 38px;
                box-sizing: border-box;
                padding: 0 10px;
                word-break: break-all;
                align-items: center;
                border-right: 1px solid #CCCCCC;
                border-bottom: 1px solid #CCCCCC;
                &.label {
                    width: 180px;
                    background-color: #F3F7FD;
                    justify-content: flex-end;
                }
                &.value {
                    width: calc(100% - 180px);
                    .has-click {
                        cursor: pointer;
                        color: #1890FF;
                        margin-right: 10px;
                        &::after {
                            content: "、";
                        }
                        &:nth-last-of-type(1)::after {
                            display: none;
                        }
                    }
                }
            }
            &:nth-of-type(1) .table-item.label {
                border-left: 1px solid #CCCCCC;
            }
        }
        &:nth-of-type(1) .table-col .table-item {
            border-top: 1px solid #CCCCCC;
        }
    }
}
</style>

使用部分

<info-panel :data="[[{
    label: '姓名',
    value: 'HenryDZhang'
}, {
    label: '民族',
    value: '汉'
}], [{
    label: '简介',
    html: `前端开发工程师，<span style='color: #ff0000'>前端二组</span>`
}], [{
    label: '附件',
    clickF: clickExtr,
    value: [{
        txt: '公告附件1.pdf'
    }, {
        txt: '公告附件2.pdf'
    }]
}]]"></info-panel>