qimall/backend/views/components/common/diy/style-components/diy-align.php

<template id="diy-align">
    <diy-style-contain :title="title">
        <div class="diy-align-content" flex="cross:center">
            <div class="diy-align-img" 
                flex="cross:center main:center" 
                v-for="(item, index) in imgAlign" 
                :key="index" 
                :class="imgIndex == item.type ? 'active' : ''" 
                @click="toggle(item, index)"
            >
                <el-image class="img-left" :src="imgUrl + item.icon"></el-image>
            </div>
        </div>
    </diy-style-contain>
</template>

<script>
    /**
     * 文字位置组件
     */
    Vue.component('diy-align', {
        name: "diy-align",
        props: {
            title: { // 标题
                type: String,
                default: '文字位置'
            },
            aligns: { // 位置展示数组
                type: Array,
                default: () => {
                    return ['left', 'center']
                }
            },
            current: { // 默认选中值
                type: String,
                default: 'left'
            }
        },
        template: '#diy-align',
        data() {
            return {
                imgUrl: 'resources/img/decorate/',
                imgAlign: [],
                imgIndex: 'left'
            }
        },
        watch: {
            aligns: {
                deep:true,
                immediate: true,
                handler(val) {
                    // console.log(val)
                    val.forEach(item => {
                        // this.imgAlign[item] = 'align-' + item + '.png'
                        this.imgAlign.push({
                            icon: 'align-' + item + '.png',
                            type: item
                        })
                    })
                }
            },
            current: {
                deep:true,
                immediate: true,
                handler(val) {
                    this.imgIndex = val || 'left'
                }
            }
        },
        create() {
            
        },
        methods: {
            toggle(it, i) {
                this.imgIndex = it.type
                this.$emit('change', it.type)
                // var result = deepClone(this.activeItem)
                // console.log(result.computedStyle)
                // const style = {
                //     'align-items': it.type == 'left' ? 'flex-start' : it.type == 'center' ? 'center' : 'flex-end'
                // } // 数据内部维护
                // result.computedStyle.searchIpts = style
                // console.log(result.computedStyle)
                // this.$emit("update", result)
            },
            
        }
    });
</script>

<style>
    .diy-align-box {
        /* padding: 16px 20px;
        border-bottom: 10px solid #F4F6F8; */
    }
    .diy-align-content {
        padding-top: 20px;
        margin-right: 10px;
    }
    .diy-align-img {
        width: 50px;
        height: 50px;
        margin-right: 20px;
    }
    .diy-align-content .active {
        border-radius: 5px;
        border: 1px solid #707070;
    }
    .img-left {
        width: 30px; 
        height: 35px
    }
</style>