qimall/backend/views/components/common/diy/style-components/title-block/style2.php

<template id="title-block-style2">
    <div class="title-block-style2" flex="cross:center">
        <!-- 图片位置 -->
        <div class="line-left" :style="{background: computedStyle.titleColor}"></div>
        <div class="title" :style="{color: computedStyle.titleColor}">{{title}}</div>
    </div>
</template>
<script>
    /**
     * @descriptions 
     *  1. 组件名字必须对应模板形式 - 递归组件name
     *  2. 样式内容方法尽量内部维护 - 前端方便通用
     *  3. 父级组件会传预览数据 - activeItem
     */
    Vue.component('title-block-style2', {
        name: "title-block-style2",
        props: {
            title: {
                type: String,
                default () {
                    return "标题"
                }
            },
            computedStyle: {
                type: Object,
                default () {
                    return {}
                }
            }
        },
        template: '#title-block-style2',
    });
</script>

<style scoped lang="scss">
    .title-block-style2 {
        position: relative;
        height: 33px;
        .line-left {
            position: absolute;
            content: "";
            top: 0;
            bottom: 0;
            left: 10px;
            margin: auto;
            width: 2px;
            height: 14px;
            background: #000;
        }
        .title {
            margin: 0 20px;
            font-size: 14px;
        }
    }
</style>