<template>
    <div
        class="nus_tag"
        :class="[styleName && 'nu_tag-' + styleName ||'']"
        @click="_onClick($event)"
        @tap="_onTap($event)"><span class="nu_tag"
        :data-text="nameText||text"></span></div>
</template>

<script>
import WidgetTmp from '../_comm/WidgetTmp';
export default {
    extends: WidgetTmp,
    name: 'NuTag',
    props: {
        /**
         * 内容名称
         */
        nameText: {
            type: [String, Number],
            default: '标签'
        },
        /**
         * 样式名称
         */
        styleName: { // 样式默认为有边框无背景(fill:有边框有背景)
            type: String,
            default: ''
        }
    }
};
</script>

<style lang="scss">
@import '../../../_assets/style/_iconFont.scss';
@import '../../../_assets/style/_var.scss';
@import '../../../_assets/style/_mixin.scss';

.nus_tag {
    font-size: 18px;
    display: inline-block;
    padding: 1px 4px;
    position: relative;
    white-space: nowrap;
    color: $colorRed;
    border-color: $brRed;
    line-height: 1.4;
    border-radius: 5px;
    &::after {
        content: '\20';
        border-style: solid;
        border-width: 1px;
        border-color: inherit;
        position: absolute;
        left: -50%;
        right: -50%;
        top: -50%;
        bottom: -50%;
        transform-origin: 50% 50%;
        transform: scale(0.5);
        border-radius: inherit;
    }
    .nu_tag {
        display: block;
        // transform: scale(0.5);
        position: relative;
        transform-origin: 50% 50%;
        text-align: center;
        z-index: 1;
        width: 100%;
        zoom: 0.5;
        &:before{
            content: attr(data-text);
            // position: absolute;
            // left: -50%;
            // right: -50%;
            // top: -50%;
            // bottom: -50%;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }
        // &:after{
        //     display: block;
        //     content: attr(data-text);
        //     font-size: 0.5em;
        //     visibility: hidden;
        // }
    }
    &.nu_tag-{
        &fill {
            // border-radius: 3px;
            color: $colorFff;
            border-color: transparent;
            &::after {
                overflow: hidden;
                background-color: $bgRed;
            }
        }
    }
}
</style>
