Vue自定义多选组件使用详解


Posted in Javascript onSeptember 08, 2020

本文实例为大家分享了Vue自定义多选组件使用的具体代码,供大家参考,具体内容如下

子组件(选项卡)

checkBoxCard.vue

<template>
 <div class="checkBoxCard">
  <div :class="`box ${check && 'boxCheck'}`" @click="checked(), updateData()">
   {{ name }}
  </div>
 </div>
</template>

<script>
export default {
 name: "checkBoxCard",
 props: {
  name: String,
  checkIndex: {
   type: Number,
   default: null,
  },
 },
 data() {
  return {
   radio: 0,
   check: false,
   radioName: "",
   list: [],
  };
 },
 methods: {
  checked() {
   if (this.radio == 1) {
    this.check = false;
    this.radio = 0;
   } else if (this.radio == 0) {
    this.check = true;
    this.radio = 1;
   }
  },
  updateData() {
   if (this.radio == 1) {
    this.radioName = this.name;
   } else if (this.radio == 0) {
    this.radioName = "";
   }
   this.$emit("updateSurveyData", this.radioName, this.checkIndex);
  },
 },
 mounted() {},
 created() {},
};
</script>

<style lang="scss" scoped>
.checkBoxCard {
 margin-right: 15px;
 display: inline-block;
 margin-top: 10px;
}
.boxCheck {
 color: rgba(183, 37, 37, 1);
 background: bisque;
}
.box {
 border: 0.55px solid #eee;
 padding: 5px 10px;
 font-size: 3.73333vw;
 border-radius: 10px;
}
</style>

父组件

checkBox.vue

<template>
 <div class="checkBox">
  <div class="title">
   选择
  </div>

  <div class="card">  
    <CheckBoxCard
     v-for="item in list"
     :key="item.value"
     :name="item.name"
     :checkIndex="item.value"
     @updateSurveyData="updateSurveyData"
    />
  </div>
 </div>
</template>

<script>
import CheckBoxCard from "./checkBoxCard";
export default {
 name: "checkBox",
 components: {
  CheckBoxCard,
 },
 data: function () {
  return {
   list: [
    { value: 0, name: "选项1" },
    { value: 1, name: "选项2" },
    { value: 2, name: "选项3" },
    { value: 3, name: "选项4" },
    { value: 4, name: "选项5" },
    { value: 5, name: "选项6" },
    { value: 6, name: "其他" },
   ],
   name: "",
    checkList: [],
  };
 },
 methods: {
  updateSurveyData(question, index) {
   this.checkList[index] = question;
    console.log(this.checkList.filter((x) => x != ""));
   console.log(this.checkList.filter((x) => x != "").join());
  },
 },
 created() {},
};
</script>

<style scoped>
.checkBox {
 padding: 5.33333vw 4vw;
 border-bottom: 0.55px solid #eee;
 background: white;
}

.title {
 text-align: left;
 color: #323233;
 font-size: 3.73333vw;
 padding-bottom: 10px;
 line-height: 30px;
}
</style>

效果图

Vue自定义多选组件使用详解

Vue自定义多选组件使用详解

Vue自定义多选组件使用详解

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

Javascript 相关文章推荐
js获取指定的cookie的具体实现
Feb 20 Javascript
JS循环遍历JSON数据的方法
Jul 08 Javascript
jQuery/CSS3图片特效插件整理推荐
Dec 07 Javascript
js实现从数组里随机获取元素
Jan 12 Javascript
javascript框架设计之类工厂
Jun 23 Javascript
SpringMVC restful 注解之@RequestBody进行json与object转换
Dec 10 Javascript
jQuery实现选项联动轮播效果【附实例】
Apr 19 Javascript
angular+ionic返回上一页并刷新页面
Aug 08 Javascript
vue实现树形菜单效果
Mar 19 Javascript
解决JavaScript中0.1+0.2不等于0.3问题
Oct 23 Javascript
Js实现复选框的全选、全不选反选功能代码实例
Feb 28 Javascript
JavaScript 实现继承的几种方式
Feb 19 Javascript
vue项目中微信登录的实现操作
Sep 08 #Javascript
关于element-ui表单中限制输入纯数字的解决方式
Sep 08 #Javascript
快速解决element的autofocus失效问题
Sep 08 #Javascript
vue axios请求成功却进入catch的原因分析
Sep 08 #Javascript
JavaScript数组类型Array相关的属性与方法详解
Sep 08 #Javascript
vue中后端做Excel导出功能返回数据流前端的处理操作
Sep 08 #Javascript
vue等两个接口都返回结果再执行下一步的实例
Sep 08 #Javascript
You might like
php调用mysql存储过程
2007/02/14 PHP
php str_pad() 将字符串填充成指定长度的字符串
2010/02/23 PHP
Mysql中分页查询的两个解决方法比较
2013/05/02 PHP
php将文本文件转换csv输出的方法
2014/12/31 PHP
详解PHP swoole process的使用方法
2017/08/26 PHP
JavaScript传递变量: 值传递?引用传递?
2011/02/22 Javascript
始终在屏幕中间显示Div的代码(css+js)
2011/03/10 Javascript
通过正则格式化url查询字符串实现代码
2012/12/28 Javascript
玩转方法:call和apply
2014/05/08 Javascript
javascript工厂方式定义对象
2014/12/26 Javascript
提交按钮的name='submit'引起的js失效问题及原因
2015/02/25 Javascript
AngularJS 依赖注入详解及示例代码
2016/08/17 Javascript
Jq通过td获取同行其它列td的方法
2016/10/05 Javascript
JavaScript实现京东购物放大镜和选项卡效果的方法分析
2018/07/05 Javascript
微信小程序实现九宫格抽奖
2020/04/15 Javascript
详解Webpack如何引入CDN链接来优化编译后的体积
2019/06/21 Javascript
加速vue组件渲染之性能优化
2020/04/09 Javascript
vue中echarts的用法及与elementui-select的协同绑定操作
2020/11/17 Vue.js
centos 安装python3.6环境并配置虚拟环境的详细教程
2018/02/22 Python
深入理解Python中的 __new__ 和 __init__及区别介绍
2018/09/17 Python
python抖音表白程序源代码
2019/04/07 Python
django之静态文件 django 2.0 在网页中显示图片的例子
2019/07/28 Python
opencv3/python 鼠标响应操作详解
2019/12/11 Python
python Manager 之dict KeyError问题的解决
2019/12/21 Python
pycharm 复制代码出现空格的解决方式
2021/01/15 Python
一款利用纯css3实现的超炫3D表单的实例教程
2014/12/01 HTML / CSS
AMAVII眼镜官网:时尚和设计师太阳镜
2019/05/05 全球购物
党员年终民主评议的自我评价
2013/11/05 职场文书
求职信怎么写范文
2014/05/26 职场文书
单位活动策划方案
2014/08/17 职场文书
反对四风自我剖析材料
2014/10/07 职场文书
展览会邀请函
2015/02/02 职场文书
民主评议党员个人总结
2015/02/13 职场文书
高中数学教学反思范文
2016/02/18 职场文书
《我和小伙伴》教学反思
2016/02/20 职场文书
5种方法告诉你如何使JavaScript 代码库更干净
2021/09/15 Javascript