qimall/addons/Store/backend/views/components/diy/store-search/preview.php

<template id="store-search-preview">
    <div class="search-box" >  <!--:style="{background: computedStyle.searchBox}"-->
        <div class="search-ipt" flex="cross:center" :style="{...inputStyle}">
            <i class="el-icon-search search-icons" :style="{color: computedStyle.iconsStyle}"></i>
            <div class="placeholder" :style="{color: computedStyle.textStyle}">{{ searchData.name || '请输入关键字' }}</div>
        </div>
    </div>
</template>
<script>
    /**
     * @descriptions 
     *  1. 组件名字必须对应模板形式 - 递归组件name
     *  2. 样式内容方法尽量内部维护 - 前端方便通用
     *  3. 父级组件会传预览数据 - activeItem
     */
    Vue.component('store-search-preview', {
        name: "store-search-preview",
        props: {
            activeItem: {
                type: Object,
                default () {
                    return {}
                }
            }
        },
        template: '#store-search-preview',
        data() {
            return {

            }
        },
        computed: {
            computedStyle() {
                return this.activeItem.computedStyle
            },
            searchData() {
                return this.activeItem.data
            },
            inputStyle() {
                let tabItem = this.computedStyle.tabItem
                let style = {
                    'background': this.computedStyle.iptBg,
                    ...this.computedStyle.searchIpts
                }
                if (tabItem && tabItem.value == 'border') style.border = '1px solid ' + (tabItem ? tabItem.color : 'transparent')
                if (tabItem && tabItem.value == 'shandow') style.boxShadow = tabItem ? '0 0 10px ' + tabItem.color : '0 0 10px rgba(226, 231, 244, 0.7)'
                return style
            }
        },
        mounted() {

        },
        methods: {

        }

    });
</script>

<style>
    .search-box {
        padding: 8px 12px;
    }

    .search-ipt {
        background-color: #F3F3F3;
        height: 30px;
        padding: 0 17px;
    }

    .placeholder {
        font-size: 11px;
        color: #999;
        font-weight: 700;
        padding-left: 10px;
    }

    .search-icons {
        color: #FF0000;
    }

    .search-shadow {
        /* box-shadow: 0 0 10px var(--shadow, rgba(226, 231, 244, 0.7)); */
    }
</style>