每周一个小组件

前言

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

成果展现

预览地址

github地址

开发过程

其实，只有思路对了，实现这个标签多选性能非常简单，上面看代码构造

html局部

   <div class="menu-box">        <!-- 循环每个标签 -->        <duv class="menu-item" v-for="(vo,inx) in items" @click="itemFn(inx)" :class="vo.isTrue?'acitve':''" :key="inx">            {{vo.name}}        </duv>    </div>

ts局部

<script lang="ts">import {    defineComponent,    reactive,    toRefs} from 'vue'export default defineComponent({    setup() {        const data = reactive({            items: [{                name: '举荐',                isTrue: false            }, {                name: '图片',                isTrue: false            }, {                name: '视频',                isTrue: false            }, {                name: '段子',                isTrue: false            }, ],            itemFn: (inx: number) => {                data.items[inx].isTrue = !data.items[inx].isTrue            }        })        const data_ = toRefs(data)        return {            ...data_        }    }})</script>

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继续更新中...