Vue实现多标签选择器
更新时间：2019年11月28日 17:11:57 作者：彭世瑜
这篇文章主要为大家详细介绍了Vue实现多标签选择器，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了Vue实现多标签选择器展示的具体代码，供大家参考，具体内容如下
实现效果
实现代码
<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',
}]
}]
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了详解基于iview-ui的导航栏路径（面包屑）配置,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-02-02
@click指令用于监听元素的点击事件,并在触发时执行相应的处理函数,在Vue3中,事件处理就可以通过@click指令来实现,下面我们就来看看如何在Vue3中处理点击事件吧2023-08-08
这篇文章主要介绍了vue项目中axios的封装请求，axios 是一个轻量的HTTP客户端，它基于 XMLHttpRequest 服务来执行 HTTP 请求，支持丰富的配置，下文更多详细资料,需要的朋友可以参考一下2022-03-03
这篇文章主要为大家详细介绍了vue实现列表无缝滚动，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-06-06
在前端开发中,部署项目是我们经常发生的事情,下面这篇文章主要给大家介绍了关于部署vue项目到docker的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下2022-04-04
这篇文章主要介绍了Vue面试题及Vue知识点整理，本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友参考下吧2018-10-10
Vue源码之关于vm.$delete()/Vue.use()内部原理详解
这篇文章主要介绍了Vue源码之关于vm.$delete()/Vue.use()内部原理详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-05-05
这篇文章主要介绍了详解Vue3中对VDOM的改进，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-04-04
这篇文章主要为大家详细介绍了vuex实现一个简易计数器，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-10-10
这篇文章主要介绍了vue实现微信获取用户信息的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-03-03
最新评论