vue面板卡片

最新推荐文章于 2025-08-28 22:43:53 发布

原创

最新推荐文章于 2025-08-28 22:43:53 发布 · 1.5k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue #html #js

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

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",
    components: {},
    props: {
        x: {
            type: String,
            default