JLH/JLHAPP/src/components/lj-cfgsel-tag.vue

<template>
    <div class="product-cfgsel-contanier">
        <div class="contanier-item" :class="isItemCls(textClass, item, i)" v-for="(item,i) in resultList" :key="i">
            <div class="item-title" v-if="item.flag == 4">
                {{item.title}}
            </div>
            <div class="item-value">
                {{item.value}}
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'lj-cfgsel-tag',
    components: {
    },
    props: {
        textValue: {
            type: String,
            default: ""
        },
        textFlag: {
            type: Number,
            default: -1
        },
        textClass: {
            type: Array,
            default: () => {
                return []
            }
        },
    },
    data(){
        return {
            resultList: []
        }
    },
    methods: {
        addCfgValue(value,flag){
            if(flag == 4 || flag == 0) {
                this.resultList = this.addValue(value,flag);
            } else {
                this.resultList.push(this.addValue(value,flag))
            }
        },
        addValue(value,flag) {
            if(flag == 4) {
                let arr = value.split('|');
                let result = [];
                arr.forEach((item) => {
                    if(item.trim().length == 0) return;
                    let index = item.indexOf(':');
                    let a = item.substring(0,index++);
                    let b = item.substring(index,item.length);
                    result.push({flag:flag,title:a,value:b});
                })
                return result;
            }else if(flag == 0){
                return [{flag:flag,value:value}];
            }else {
                return {flag:flag,value:value};
            }
        }
    },
    created(){
        if(this.textValue.length > 0) this.addCfgValue(this.textValue,this.textFlag);
    },
    computed:{
        isItemCls(arr, item, idx) {
            return function (arr, item, idx) {
                if (!Array.isArray(arr) || arr.length < idx) {
                    return ''
                }
                return arr[idx]
            }
        }
    },
}
</script>

<style lang="less" scoped>
    .product-cfgsel-contanier {
        width: 100%;
        display: flex;
        flex-wrap: wrap;

        .contanier-item {
            border: 1px solid #ff976a;
            border-radius: 8px;
            display: flex;
            flex-wrap: nowrap;
            margin: 0 5px 5px 0;
            justify-content: space-between;
            align-content: center;
            overflow: hidden;
            font-size: 10px;

            .item-title {
                background-color: #ff976a;
                padding: 0 3px;
                // border-right: 1px solid #ff976a;
                border-radius: 0 8px 8px 0;
                text-align: center;
                flex-shrink: 0;
                color: #fff;
            }

            .item-value {
                padding: 0 3px;
                white-space:nowrap;
                overflow:hidden;
                text-overflow: ellipsis;
            }
        }
    }
</style>