[JavaScript知识库]vue面板卡片

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: "0"
        },
        y: {
            type: String,
            default: "0"
        },
        w: {
            type: String,
            default: "0"
        },
        h: {
            type: String,
            default: "0"
        },
        autosize: {
            type: Boolean
        }
    },
    data() {
        return {};
    },
    computed: {
        layoutStyle() {
            let layout = {
                left: this.x,
                top: this.y,
                width: this.w,
                height: this.h
            };
            if (this.autosize) {
                if (this.w == "0") {
                    layout.width = "calc(100% - " + this.x + ")";
                }
                if (this.h == "0") {
                    layout.height = "calc(100% - " + this.y + ")";
                }
            }
            return layout;
        }
    }
};
</script>

<style lang="less">
.bs-layout-item{
    padding: 8px;
    position: absolute;
    &-body{
        height: 100%;
        width: 100%;
        border-radius: 4px;
        border: 1px solid #C8DCEC;
        background-color: #fff;
        box-shadow: 0 2px 8px 0 rgba(153,164,184,0.36);
        position: relative;
        .layout-toolBox{
            height: 30px;
            line-height: 30px;
            position: absolute;
            right: 20px;
            top: 10px;
            display: flex;
            align-items: center;
            z-index: 1;
            i.iconfont{
                cursor: pointer;
                &:hover{
                    color: #73A0FA !important;
                }
            }
        }
    }
}
</style>

card

<template>
    <div class="bs-card">
        <div class="bs-card-header">
            <div class="bs-card-title" v-show="title">{{ title }}</div>
            <div>
                <slot name="header"></slot>
            </div>
        </div>
        <div class="bs-card-content">
            <slot name="content"></slot>
        </div>
    </div>
</template>
<script>
export default {
    name: 'card',
    components: {},
    props: {
        title: String
    },
    data() {
        return {}
    },
    watch: {},
    methods: {}
}
</script>

<style lang="less">
.bs-card {
    height: 100%;
    &-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 40px;
        padding: 0 16px;
        line-height: 40px;
    }
    &-title {
        height: 100%;
        font-size: 16px;
        color: #015ea4;
    }
    &-content {
        height: calc(100% - 40px);
    }
}
</style>