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 相关文章推荐
使用Mootools动态添加Css样式表代码,兼容各浏览器
Dec 12 Javascript
Jquery 选中表格一列并对表格排序实现原理
Dec 15 Javascript
jQuery入门介绍之基础知识
Jan 13 Javascript
Angularjs的ng-repeat中去除重复数据的方法
Aug 05 Javascript
快速掌握jQuery插件WebUploader文件上传
Nov 07 Javascript
基于Node.js的WebSocket通信实现
Mar 11 Javascript
BootStrap入门学习第一篇
Aug 28 Javascript
详解VUE自定义组件中用.sync修饰符与v-model的区别
Jun 26 Javascript
使用vue-router与v-if实现tab切换遇到的问题及解决方法
Sep 07 Javascript
iView-admin 动态路由问题的解决方法
Oct 03 Javascript
JS开发常用工具函数(小结)
Jul 04 Javascript
微信小程序 SOTER 生物认证DEMO 指纹识别功能
Dec 13 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 上传文件的方法(类)
2009/07/30 PHP
php中截取中文字符串的代码小结
2011/07/17 PHP
php随机显示图片的简单示例
2014/02/15 PHP
php字符串按照单词进行反转的方法
2015/03/14 PHP
ucenter中词语过滤原理分析
2016/07/13 PHP
Laravel实现通过blade模板引擎渲染视图
2019/10/25 PHP
Javascript 代码也可以变得优美的实现方法
2009/06/22 Javascript
让你的网站可编辑的实现js代码
2009/10/19 Javascript
JavaScript 数组运用实现代码
2010/04/13 Javascript
js获取下拉列表框中的value和text的值示例代码
2014/01/11 Javascript
ie7+背景透明文字不透明超级简单的实现方法
2014/01/17 Javascript
100个不能错过的实用JS自定义函数
2014/03/05 Javascript
Node.js插件的正确编写方式
2014/08/03 Javascript
js实现iGoogleDivDrag模块拖动层拖动特效的方法
2015/03/04 Javascript
基于JQuery和CSS3实现仿Apple TV海报背景视觉差特效源码分享
2015/09/21 Javascript
基于jQuery实现滚动切换效果
2016/12/02 Javascript
js+html实现周岁年龄计算器
2019/06/25 Javascript
Python urlopen()函数 示例分享
2014/06/12 Python
python读取和保存视频文件
2018/04/16 Python
python交换两个变量的值方法
2019/01/12 Python
对python判断ip是否可达的实例详解
2019/01/31 Python
Django csrf 两种方法设置form的实例
2019/02/03 Python
Python基础学习之时间转换函数用法详解
2019/06/18 Python
python中对数据进行各种排序的方法
2019/07/02 Python
详解使用python绘制混淆矩阵(confusion_matrix)
2019/07/14 Python
python实现批量文件重命名
2019/10/31 Python
Python 2.6.6升级到Python2.7.15的详细步骤
2020/12/14 Python
Banana Republic欧盟:美国都市简约风格的代表品牌
2018/05/09 全球购物
面向对象设计的原则是什么
2013/02/13 面试题
电大会计学自我鉴定
2014/02/06 职场文书
党的群众教育实践活动实施方案
2014/06/12 职场文书
教师考核表个人总结
2015/02/12 职场文书
护士求职简历自我评价
2015/03/10 职场文书
关爱留守儿童主题班会
2015/08/13 职场文书
Python数据清洗工具之Numpy的基本操作
2021/04/22 Python
前端传参数进行Mybatis调用mysql存储过程执行返回值详解
2022/08/14 MySQL