Vue实现多标签选择器


Posted in Javascript onNovember 28, 2019

本文实例为大家分享了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',

 }]
}]

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
5秒后跳转到另一个页面的js代码
Oct 12 Javascript
可选择和输入的下拉列表框示例
Nov 05 Javascript
js读取json的两种常用方法示例介绍
Oct 19 Javascript
JavaScript中的Primitive对象封装介绍
Dec 31 Javascript
bootstrap学习笔记之初识bootstrap
Jun 21 Javascript
浅析JavaScript函数的调用模式
Aug 10 Javascript
如何正确理解javascript的模块化
Mar 02 Javascript
jQuery实现Select下拉列表进行状态选择功能
Mar 30 jQuery
JavaScript中使用webuploader实现上传视频功能(demo)
Apr 10 Javascript
webpack4 入门最简单的例子介绍
Sep 05 Javascript
JavaScript检查数据中是否存在相同的元素(两种方法)
Oct 07 Javascript
使用Element的InfiniteScroll 无限滚动组件报错的解决
Jul 27 Javascript
swiper实现异形轮播效果
Nov 28 #Javascript
Vue请求java服务端并返回数据代码实例
Nov 28 #Javascript
javascript实现异形滚动轮播
Nov 28 #Javascript
javascript实现切割轮播效果
Nov 28 #Javascript
javascript实现商品图片放大镜
Nov 28 #Javascript
javascript实现视频弹幕效果(两个版本)
Nov 28 #Javascript
javascript实现弹幕墙效果
Nov 28 #Javascript
You might like
3.从实例开始
2006/10/09 PHP
PHP新手上路(十四)
2006/10/09 PHP
获得Google PR值的PHP代码
2007/01/28 PHP
PHP的foreach中使用引用时需要注意的一个问题和解决方法
2014/05/29 PHP
php中Array2xml类实现数组转化成XML实例
2014/12/08 PHP
thinkphp项目如何自定义微信分享描述内容
2017/02/20 PHP
PHP使用PDO抽象层获取查询结果的方法示例
2018/05/10 PHP
仿新浪微博返回顶部的jquery实现代码
2012/10/01 Javascript
火狐textarea输入法的bug的触发及解决
2013/07/24 Javascript
js监听键盘事件示例代码
2013/07/26 Javascript
如何使用Jquery获取Form表单中被选中的radio值
2013/08/09 Javascript
利用毫秒减值计算时长的js代码
2013/09/22 Javascript
javascript里绝对用的上的字符分割函数总结
2014/07/31 Javascript
JavaScript动态提示输入框输入字数的方法
2015/07/27 Javascript
jQuery图片渐变特效的简单实现
2016/06/25 Javascript
微信小程序 教程之列表渲染
2016/10/18 Javascript
强大的 Angular 表单验证功能详细介绍
2017/05/23 Javascript
vue过渡和animate.css结合使用详解
2017/06/14 Javascript
Vue配合iView实现省市二级联动的示例代码
2018/07/27 Javascript
在Vant的基础上实现添加表单验证框架的方法示例
2018/12/05 Javascript
原生js实现获取form表单数据代码实例
2019/03/27 Javascript
Javascript通过控制类名更改样式
2019/05/24 Javascript
详解vuex数据传输的两种方式及this.$store undefined的解决办法
2019/08/26 Javascript
JavaScript Array对象使用方法解析
2019/09/24 Javascript
python对csv文件追加写入列的方法
2019/08/01 Python
django之自定义软删除Model的方法
2019/08/14 Python
Python调用shell cmd方法代码示例解析
2020/06/18 Python
Selenium python时间控件输入问题解决方案
2020/07/22 Python
详解Flask前后端分离项目案例
2020/07/24 Python
pycharm 多行批量缩进和反向缩进快捷键介绍
2021/01/15 Python
基于HTML5的WebGL实现json和echarts图表展现在同一个界面
2017/10/26 HTML / CSS
HTML5页面无缝闪开的问题及解决方案
2020/06/11 HTML / CSS
StubHub新加坡:购买和出售全球活动门票
2017/03/10 全球购物
Delphi笔试题
2016/11/14 面试题
如何进行有效的自我评价
2013/09/27 职场文书
导游词之日月潭
2019/11/05 职场文书