vue3+typeScript 多選標籤(每週一個小組件)

每週一個小組件

前言

實現功能：單擊標籤可選中或取消，標籤可多選。
每週分享一個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持續更新中...