基于Vue实现多标签选择器

简介: 基于Vue实现多标签选择器

实现效果

d24.2.png


实现代码

<html lang="en">

<head>
    <title>Document</title>

    <!-- 引入本地组件库 -->
    <link rel="stylesheet" href="static/element-ui/index.css">
    <script src="static/element-ui/vue.js"></script>
    <script src="static/element-ui/index.js"></script>

    <!-- 引入CDN样式 -->
    <!-- <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> -->
    <!-- <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> -->
    <!-- <script src="https://unpkg.com/element-ui/lib/index.js"></script> -->

    <style>
        .not-active {
            display: inline-block;
            font-size: 12px;
            margin: 5px 8px;
        }
        
        span {
            margin: 0 2px;
        }
    </style>
</head>

<body>

    <div id="app">
        <!-- 待选标签 -->
        <div v-for='(category, categoryIndex) in categories' :key="category.id">
            <!-- 分类  -->
            <span class="not-active">{
        {category.name}}:</span>

            <template>
                <span  v-if="category.count"class="not-active" @click="clearCategory(category, categoryIndex)"> 不限</span>
                <my-tag v-else>不限</my-tag>
            </template>

            <!-- 标签  -->
            <template v-for='(child, childIndex) in category.children'>
                <my-tag  v-if="child.active" :closable='true'  @click-child='clickChild(category, categoryIndex, child, childIndex)'>
                    {
        { child.name }}
                </my-tag>
                <span v-else class="not-active" @click='clickChild(category, categoryIndex, child, childIndex)'>{
        { child.name }}</span>
            </template>
        </div>

        <!-- 已选标签 -->
        <div v-if='conditions.length'>
            <span class="not-active" @click="clearCondition">清空已选:<span>
                
            <el-tag
            v-for='(condition, index) in conditions' 
            :key="condition.id"
            type="primary"
            :closable="true"
            size="small"
            :disable-transitions="true"
            @close='removeCondition(condition, index)'
            @click='removeCondition(condition, index)'>
                {
        {condition.name}}
            </el-tag>
        </div>
    </div>

    <script src="./data.js"></script>

    <script>
        // 简单封装一个公用组件
        Vue.component('my-tag', {
            template: "<el-tag v-bind='$attrs' v-on='$listeners' effect='dark' size='small' :disable-transitions='true' @click='clickChild' @close='clickChild'><slot></slot></el-tag>",

            methods: {
                clickChild() {
                    this.$emit("click-child")
                }
            }
        });

        var app = new Vue({
            el: '#app',
            data() {
                return {
                    categories, // 分类标签,可从外部加载配置
                    conditions: [] // 已选条件
                }
            },

            watch: {
                // 监听条件变化,按照请求接口拼装请求参数
                conditions(val){
                    let selectedCondition = {};

                    for(let categorie of this.categories){
                        let selected_list = [];
                        for(let child of categorie.children){
                            if(child.active){
                                selected_list.push(child.name);
                            }
                        }
                        selectedCondition[categorie.name] = selected_list.join("|")
                    }
                    console.log(selectedCondition);
                }
            },

            methods: {
                // 处理标签点击事件,未选中则选中,已选中则取消选中
                clickChild(category, categoryIndex, child, childIndex) {
                    let uid = `${categoryIndex}-${childIndex}`
                    child.uid = uid;
                    console.log(uid)
                    
                    // 取消选择
                    if (child.active === true) {
                        category.count--;
                        child.active = false;
                        this.conditions.forEach((conditionChild, index) => {
                            if (conditionChild.uid === child.uid) {
                                this.conditions.splice(index, 1);
                            }
                        });
                    // 选择
                    } else {
                        category.count++;
                        child.active = true;
                        this.conditions.push(child);
                    }
                },
            
                // 清除已选整个类别标签
                clearCategory(category, categoryIndex) {
                    category.count = 0;
                    
                    // 可选列表均为未选中状态
                    category.children.forEach(child => {
                        child.active = false;
                    })

                    // 清空该类已选元素
                    for (let index = this.conditions.length - 1; index >= 0; index--) {
                        const conditionChild = this.conditions[index];
                        if (conditionChild.uid.startsWith(categoryIndex)) {
                            this.conditions.splice(index, 1);
                        }
                    }
                },
                
                // 移除一个条件
                removeCondition(condition, index) {
                    let categoryIndex = condition.uid.split("-")[0];
                    this.categories[categoryIndex].count --;

                    this.conditions.splice(index, 1)
                    condition.active = false;
                },

                // 清空所有条件
                clearCondition() {
                    for(let i = this.conditions.length-1; i >=0 ; i--){
                        this.removeCondition(this.conditions[i], i);
                    }
                }
            }
        });
    </script>

</body>

</html>

标签筛选的数据格式

data.js

var categories = [{

name: '品牌',
count: 0,
children: [{
name: '联想',
}, {
name: '小米',

}, {
name: '苹果',

}, {
name: '东芝',

}]
}, {
name: 'CPU',
count: 0,
children: [{
name: 'intel i7 8700K',

}, {
name: 'intel i7 7700K',

}, {
name: 'intel i9 9270K',

}, {
name: 'intel i7 8700',

}, {
name: 'AMD 1600X',


}]
}, {
name: '内存',
count: 0,
children: [{
name: '七彩虹8G',

}, {
name: '七彩虹16G',

}, {
name: '金士顿8G',

}, {
name: '金士顿16G',

}]
}, {
name: '显卡',
count: 0,
children: [{
name: 'NVIDIA 1060 8G',

}, {
name: 'NVIDIA 1080Ti 16G',

}, {
name: 'NVIDIA 1080 8G',

}, {
name: 'NVIDIA 1060Ti 16G',

}]
}]


            </div>
目录
相关文章
|
JavaScript
Vue小项目01——标签记录器
Vue小项目01——标签记录器
|
设计模式 JavaScript 前端开发
vue快速学习01、环境与常用属性标签
vue快速学习01、环境与常用属性标签
124 0
vue快速学习01、环境与常用属性标签
|
JavaScript jenkins Linux
Vue整合element-china-area-data实现PC端省市区三级联动选择器
demo环境是SpringBoot+Vue+elementUI,开发工具是idea,有涉及到省市区三级联动选择器,网上查找了下,发现了这款和elementUI相匹配的element-china-area-data,这样的话样式什么的就不用担心会很丑,也不需要调,最主要是还可以直接获取到省市区编码,都不用通过后台接口转换。于是就撸起袖子,满心欢喜的整进来。
1880 0
Vue整合element-china-area-data实现PC端省市区三级联动选择器
|
JavaScript 前端开发
【测试开发】vue — elementUI select选择器 远程搜索实现
【测试开发】vue — elementUI select选择器 远程搜索实现
【测试开发】vue — elementUI select选择器 远程搜索实现
|
JavaScript 前端开发
【Vue3从零开始-第四章】4-3 vue的动画标签transition(下)
【Vue3从零开始-第四章】4-3 vue的动画标签transition(下)
215 0
【Vue3从零开始-第四章】4-3 vue的动画标签transition(下)
|
JavaScript 前端开发 CDN
【Vue3从零开始-第四章】4-2 vue的动画标签transition(上)
【Vue3从零开始-第四章】4-2 vue的动画标签transition(上)
312 0
【Vue3从零开始-第四章】4-2 vue的动画标签transition(上)
|
JavaScript 前端开发
Vue实现无限级树形选择器(无第三方依赖)
想要在 Vue 中实现一个这样的无限级树形选择器其实并不难.
Vue实现无限级树形选择器(无第三方依赖)
|
存储 JavaScript 前端开发
Vue:使用ElementUI, Cascader 级联选择器
Vue:使用ElementUI, Cascader 级联选择器
427 0
Vue:使用ElementUI, Cascader 级联选择器
|
JavaScript CDN
Vue:a标签点击和file-saver实现文件下载
Vue:a标签点击和file-saver实现文件下载
465 0
Vue:a标签点击和file-saver实现文件下载
|
JavaScript 前端开发
Vue深度作用选择器
Vue深度作用选择器