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 相关文章推荐
添加到收藏夹代码(兼容几乎所有的浏览器)
Jan 09 Javascript
js日期时间补零的小例子
Mar 05 Javascript
JQuery 图片滚动轮播示例代码
Mar 24 Javascript
js中new一个对象的过程
Feb 20 Javascript
Vuejs 用$emit与$on来进行兄弟组件之间的数据传输通信
Feb 23 Javascript
javascript 中iframe高度自适应(同域)实例详解
May 16 Javascript
小程序实现多选框功能
Oct 30 Javascript
使用Angular自定义字段校验指令的方法示例
Feb 01 Javascript
面试题:react和vue的区别分析
Apr 08 Javascript
p5.js临摹动态图形实现方法详解
Oct 23 Javascript
Vue文本模糊匹配功能如何实现
Jul 30 Javascript
Vuex实现购物车小功能
Aug 17 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
php google或baidu分页代码
2009/11/26 PHP
PHP XML操作类DOMDocument
2009/12/16 PHP
php读取本地json文件的实例
2018/03/07 PHP
启用OPCache提高PHP程序性能的方法
2019/03/21 PHP
从数据结构分析看:用for each...in 比 for...in 要快些
2013/04/17 Javascript
Jquery 过滤器(first,last,not,even,odd)的使用
2014/01/22 Javascript
js实现鼠标感应向下滑动隐藏菜单的方法
2015/02/20 Javascript
AngularJS基础学习笔记之简单介绍
2015/05/10 Javascript
Bootstrap多级导航栏(级联导航)的实现代码
2016/03/08 Javascript
省市联动效果的简单实现代码(推荐)
2016/06/06 Javascript
微信公众号支付H5调用支付解析
2016/11/04 Javascript
微信小程序开发实战教程之手势解锁
2016/11/18 Javascript
jquery实现多次上传同一张图片
2017/01/09 Javascript
详解vue-Resource(与后端数据交互)
2017/01/16 Javascript
微信小程序实战之仿android fragment可滑动底部导航栏(4)
2020/04/16 Javascript
浅谈Node.js轻量级Web框架Express4.x使用指南
2017/05/03 Javascript
Vue Ajax跨域请求实例详解
2017/06/20 Javascript
JavaScript面向对象精要(下部)
2017/09/12 Javascript
JS数组求和的常用方法实例小结
2019/01/07 Javascript
VUE项目初建和常见问题总结
2019/09/12 Javascript
解决vue 子组件修改父组件传来的props值报错问题
2019/11/09 Javascript
python简单的函数定义和用法实例
2015/05/07 Python
python使用reportlab实现图片转换成pdf的方法
2015/05/22 Python
使用Python从零开始撸一个区块链
2018/03/14 Python
python使用matplotlib画饼状图
2018/09/25 Python
python3使用GUI统计代码量
2019/09/18 Python
keras在构建LSTM模型时对变长序列的处理操作
2020/06/29 Python
Python批量修改xml的坐标值全部转为整数的实例代码
2020/11/26 Python
Clarks其乐鞋荷兰官网:Clarks荷兰
2019/07/05 全球购物
外企测试工程师面试题
2015/02/01 面试题
我们没有写servlet的构造方法,那么容器是怎么创建servlet的实例呢
2013/04/24 面试题
小学生田径运动会广播稿
2014/09/11 职场文书
体育运动会广播稿
2014/10/05 职场文书
文员岗位职责范本
2015/04/16 职场文书
会议主持词通用版
2019/04/02 职场文书
Django使用echarts进行可视化展示的实践
2021/06/10 Python