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

<!--双标签组件：标签属性+标签内容-->
<!--slots-->
<!--default-->
<template>
    <div class="lj-tag" :class="setTagCls" @click.stop="handleClickTag">
        <span class="tag-value">
            <slot name="default">
                {{value}}
            </slot>
        </span>
        <template v-if="doubleValue">
            <span class="tag-double-value">
                <slot name="double">
                    {{ doubleValue }}
                </slot>
            </span>
        </template>
    </div>
</template>

<script>
export default {
    name: "lj-tag",
    props: {
        // 标签类型=> default: 默认;
        type: {
            type: String,
            default: "default"
        },
        // 标签文本
        value: {
            type: String/Number,
            default: ""
        },
        // 标签副文本，值
        doubleValue: {
            type: String/Number,
            default: ""
        },
        // 是否为圆角
        round: {
            type: Boolean,
            default: false
        },
        // 是否为空心样式
        plain: {
            type: Boolean,
            default: false
        },
        // 是否为浅色模式
        light: {
            type: Boolean,
            default: false
        },
        // 标签尺寸=> large 16px 28px; medium 14px 24px; small:12px 16px; mini:10px 14px;
        size: {
            type: String,
            default: "small"
        },
        // 双标签，值颜色
        valueColor: {
            type: String,
            default: ""
        },
        // 文本颜色
        textColor: {
            type: String,
            default: ""
        },
        // 标签颜色
        color: {
            type: String,
            default: ""
        }
    },
    computed: {
        setTagCls() {
            let cls = ""
            cls += " lj-tab-" + this.type;
            if (this.round) {
                cls += " lj-tag-round"
            }
            if (this.light) {
                cls += " lj-tag-light"
            }
            if (this.plain) {
                cls += " lj-tag-plain"
            }
            if (this.doubleValue) {
                cls += " lj-tag-double"
            }
            cls += " lj-tab-" + this.size
            return cls
        }
    },
    methods: {
        handleClickTag() {
            this.$emit('tagclick')
        }
    }
}
</script>

<style lang="less" scoped>
.lj-tag {
    display: inline-flex;
    border: 1px solid transparent;
    box-sizing: content-box;
    border-radius: 2px;
    .tag-value {
        flex-shrink: 0;
    }
    .tag-double-value {
        word-break:break-all;
        border-radius: 2px;
        background-color: #fff;
    }
}
.lj-tag-plain {
    background-color: unset!important;
}
.lj-tab-default {
    background-color: @light-system-gray6;
    border-color: @light-system-gray6;

    .tag-value, .tag-double-value {
        color: @light-label-secondary;
    }
}
.lj-tab-primary {
    background-color: @light-system-blue;
    border-color: @light-system-blue;

    // border-color: @musePrimary;

    .tag-value, .tag-double-value {
        color: @light-system-blue;
    }
    &:not(.lj-tag-plain) {
        .tag-value, .tag-double-value {
            color: @light-barkground-elevated-primary;
        }
    }
    &.lj-tag-light {
        background-color: rgba(33, 150, 243, 0.2);
        border-color: rgba(33, 150, 243, 0.2);

        .tag-value, .tag-double-value {
            color: @light-system-blue;
        }
    }
    &.lj-tag-double { 
        background-color: @light-system-blue;
        border-color: @light-system-blue;

        .tag-value {
            // color: @musePrimary;
            // color: @light-system-blue;
            color: @light-barkground-elevated-primary;
        }
        .tag-double-value {
            border-radius: 2px;
            background-color: #fff;
            color: @light-system-blue;
        }
    }
}
.lj-tab-success {
    background-color: @light-system-green2;
    border-color: @light-system-green2;

    &.lj-tag-light {
        background-color: rgba(52, 199, 89, 0.2);
        border-color: rgba(52, 199, 89, 0.2);
    }

    .tag-value, .tag-double-value {
        color: @light-system-green2;
        // color: #fff;
    }
    &:not(.lj-tag-plain) {
        .tag-value, .tag-double-value {
            color: @light-barkground-elevated-primary;
        }
    }
    &.lj-tag-light { 
        background-color: rgba(0, 122, 255, 0.18);
        border-color: transparent;

        .tag-value {
            // color: @musePrimary;
            color: @light-system-green2;
            // color: @light-barkground-elevated-primary;
        }
    }
    &.lj-tag-double { 
        background-color: @light-system-green2;
        border-color: @light-system-green2;

        .tag-value {
            // color: @musePrimary;
            // color: @light-system-green2;
            color: @light-barkground-elevated-primary;
        }
        .tag-double-value {
            border-radius: 2px;
            background-color: #fff;
            color: @light-system-green2;
        }
    }
}
.lj-tab-danger {
    background-color: @light-system-red;
    border-color: @light-system-red;


    .tag-value, .tag-double-value {
        color: @light-system-red;
    }
    &:not(.lj-tag-plain) {
        .tag-value, .tag-double-value {
            color: @light-barkground-elevated-primary;
        }
    }

    &.lj-tag-light {
        background-color: rgb(255, 59, 48, 0.2)!important;
        border-color: rgb(255, 59, 48, 0.2)!important;

        .tag-value {
            // color: @musePrimary;
            // color: @light-system-red;
            color: @light-barkground-elevated-primary;
        }
        .tag-double-value {
            border-radius: 2px;
            background-color: #fff;
            color: @light-system-red;
        }
    }
    &.lj-tag-double { 
        background-color: rgb(255, 59, 48, 0.18);
        border-color: transparent;

        .tag-value {
            // color: @musePrimary;
            color: @light-barkground-elevated-primary;
            // color: @light-barkground-elevated-primary;
        }
        .tag-double-value {
            border-radius: 2px;
            background-color: #fff;
            color: @light-system-red;
        }
    }
}
.lj-tab-warning {
    background-color: @light-system-orange;
    border-color: @light-system-orange;

    &.lj-tag-light {
        background-color: rgb(255, 149, 0, 0.2);
        border-color: rgba(255, 149, 0, 0.2);
    }
    // border-color: @musePrimary;

    .tag-value, .tag-double-value {
        color: @light-system-orange;
    }
    &:not(.lj-tag-plain) {
        .tag-value, .tag-double-value {
            color: @light-barkground-elevated-primary;
        }
    }
    &.lj-tag-double { 
        background-color: @light-system-orange;
        border-color: @light-system-orange;

        .tag-value {
            // color: @musePrimary;
            // color: @light-system-blue;
            color: @light-barkground-elevated-primary;
        }
        .tag-double-value {
            border-radius: 2px;
            background-color: #fff;
            color: @light-system-orange;
        }
    }
}
.lj-tab-mini {
    font-size: 10px;
    line-height: 14px;

    .tag-value, .tag-double-value {
        padding: 0px 2px;
    }
}
.lj-tab-small {
    font-size: 12px;
    line-height: 16px;

    .tag-value, .tag-double-value {
        padding: 1px 4px;
    }
    &.lj-tag-round {
        .tag-value, .tag-double-value {
            padding: 1px 6px;
        }
    }
}
.lj-tab-medium {
    font-size: 13px;
    line-height: 24px;

    .tag-value, .tag-double-value {
        padding: 0px 8px;
    }
}
.lj-tab-large {
    font-size: 16px;
    line-height: 28px;

    .tag-value, .tag-double-value {
        padding: 0px 12px;
    }
}
.lj-tag-round {
    border-radius: 100px;
}

.lj-tab-purple {
    background-color: @light-system-indigo;
    border-color: @light-system-indigo;

    &.lj-tag-light {
        background-color: rgb(255, 149, 0, 0.2);
        border-color: rgba(255, 149, 0, 0.2);
    }
    // border-color: @musePrimary;

    .tag-value, .tag-double-value {
        color: @light-system-indigo;
    }
    &:not(.lj-tag-plain) {
        .tag-value, .tag-double-value {
            color: @light-barkground-elevated-primary;
        }
    }
    &.lj-tag-double { 
        background-color: @light-system-indigo;
        border-color: @light-system-indigo;

        .tag-value {
            // color: @musePrimary;
            // color: @light-system-blue;
            color: @light-barkground-elevated-primary;
        }
        .tag-double-value {
            border-radius: 2px;
            background-color: #fff;
            color: @light-system-indigo;
        }
    }
}

.lj-tab-black {
    background-color: @light-system-gray1;
    border-color: @light-system-gray1;

    &.lj-tag-light {
        background-color: rgb(255, 149, 0, 0.2);
        border-color: rgba(255, 149, 0, 0.2);
    }
    // border-color: @musePrimary;

    .tag-value, .tag-double-value {
        color: @light-system-gray1;
    }
    &:not(.lj-tag-plain) {
        .tag-value, .tag-double-value {
            color: @light-barkground-elevated-primary;
        }
    }
    &.lj-tag-double { 
        background-color: @light-system-gray1;
        border-color: @light-system-gray1;

        .tag-value {
            // color: @musePrimary;
            // color: @light-system-blue;
            color: @light-barkground-elevated-primary;
        }
        .tag-double-value {
            border-radius: 2px;
            background-color: #fff;
            color: @light-system-gray1;
        }
    }
}
</style>