<template>
    <div class="ht-base-tag-add-demo">
        <ht-base-tag type="border" v-for="item in tags" :key="item" :name="item" closable @on-close="handleClose">
            标签{{ item + 1 }}
        </ht-base-tag>
        <ht-base-button icon="LiRa_add" type="dashed" size="small" @click="handleAdd">添加标签</ht-base-button>
    </div>
</template>

<script>
    export default {
        name: 'HtBaseTagAddDemo',
        data() {
            return {
                tags: [0, 1, 2]
            }
        },
        methods: {
            handleAdd() {
                if (this.tags.length) {
                    this.tags.push(this.tags[this.tags.length - 1] + 1);
                } else {
                    this.tags.push(0);
                }
            },
            handleClose(event, name) {
                const index = this.tags.indexOf(name);
                this.tags.splice(index, 1);
            }
        }
    }
</script>
<style>
    .ht-base-tag-add-demo {

    }
</style>

