vue面板卡片

最新推荐文章于 2024-06-02 11:28:49 发布

怠惰Zsj

最新推荐文章于 2024-06-02 11:28:49 发布

阅读量1.4k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： vue组件文章标签： vue html js

本文链接：https://blog.youkuaiyun.com/classOurself/article/details/119117037

本文介绍了如何在Vue.js中封装一个卡片组件，包括layout布局和item内容展示，结合HTML和JavaScript实现高度可复用的卡片式设计。

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

vue卡片组件封装

layout

<template>
    <div class="bs-layout">
        <slot></slot>
    </div>
</template>
<script>
export default {
    name: "layout",
    components: {},
    props: {},
    data() {
        return {};
    },
    watch: {},
    methods: {}
};
</script>

<style lang="less">
.bs-layout{
    position: relative;
    height: calc(100% + 16px) ;
    width: calc(100% + 16px) ;
    margin: -8px;    
}
</style>

item

<template>
    <div class="bs-layout-item" :style="layoutStyle">
        <div class="bs-layout-item-body">
            <slot></slot>
        </div>
    </div>
</template>
<script>
export default {
    name: "layoutItem",
    com