vue3+typeScript 多选标签(每周一个小组件)

每周一个小组件

前言

实现功能：单击标签可选中或取消，标签可多选。
每周分享一个vue3+typeScript的小组件，我只想分享下自己的实现思路，楼主是个菜鸡前端，记录下实现过程，说不定对你有帮助。

效果展示

预览地址

github地址

开发过程

其实，只要思路对了，实现这个标签多选功能非常简单，下面看代码结构

html部分

   

        
        
            {{vo.name}}
        
    

ts部分

css部分

    .menu-box {
        width: 400px;
        height: 100px;
        background: #f5f5f5;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        padding: 0 20px;
        padding-top: 20px;

        .menu-item {
            padding: 6px 15px;
            height: 40px;
            border: 1px solid #ddd;
            border-radius: 20px;
            cursor: pointer;
        }

        .acitve {
            border: 1px solid #409EFF;
            color: #409EFF;
        }
    }

vue3持续更新中...