CheckableTags组件

<template>
    <div class="self-check-tag">
        <a-checkable-tag
            v-for="tag in tags"
            :key="tag.value"
            :value="tag.value"
            :checked="tag.checked"
            :class="{ 'is-checked-tag': tag.checked }"
            @change="handleClick(tag)">
            <div class="cur">
                {{ tag.label }}
                <i v-if="tag.checked"></i>
            </div>
        </a-checkable-tag>
    </div>
</template>

<script lang="ts">
export default {
    name: "CheckableTag",
};
</script>

<script lang="ts" setup>
import { ref, PropType } from "vue";

interface ITagItem {
    label: string;
    value: string | number;
    checked: boolean;
}

const props = defineProps({
    tags: {
        type: Array as PropType<ITagItem[]>,
        required: true,
    },
});

const emits = defineEmits(["update:selected-tags"]);

const handleClick = tag => {
    tag.checked = !tag.checked;
    emits("update:selected-tags", props.tags);
};
</script>

<style lang="less" scoped>
.self-check-tag {
    display: inline-block;
    padding: 10px;
    min-width: 132px;
    .ant-tag {
        display: inline-block;
        background-color: white;
        border: 1px solid #cccccc;
        height: 32px;
        font-size: 14px;
        color: #666666;
        line-height: 32px;
        border-radius: 2px;
    }
    .cur {
        position: relative;
        padding: 0 12px;
    }
    .cur > i {
        display: block;
        position: absolute;
        border-bottom: 14px solid #1890ff;
        border-left: 16px solid transparent;
        width: 0px;
        height: 0px;
        bottom: 1px;
        right: -8px;
    }
    .cur > i::after {
        position: absolute;
        content: "\2713";
        color: #fff;
        left: -0.66rem;
        top: -0.43rem;
        font-size: 0.1px;
        transform: scale(0.7);
    }
    .ant-tag-checkable-checked {
        color: #1890ff;
        background-color: white;
        border: 1px solid #1890ff;
    }
}
</style>