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 相关文章推荐
jQuery Validate 验证,校验规则写在控件中的具体实例
Feb 27 Javascript
JS的encodeURI和java的URLDecoder.decode使用介绍
May 08 Javascript
jQuery队列操作方法实例
Jun 11 Javascript
js阻止冒泡和默认事件(默认行为)详解
Oct 20 Javascript
Vue.js bootstrap前端实现分页和排序
Mar 10 Javascript
详解angular中的作用域及继承
May 31 Javascript
Angular.js自动化测试之protractor详解
Jul 07 Javascript
JS数组交集、并集、差集的示例代码
Aug 23 Javascript
解决Linux无法正常安装与卸载Node.js的方法
Jan 19 Javascript
VuePress 静态网站生成方法步骤
Feb 14 Javascript
详解js动态获取浏览器或页面等容器的宽高
Mar 13 Javascript
JavaScript嵌入百度地图API的最详细方法
Apr 16 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
让这部DC动画新作刷新你的认知
2020/03/03 欧美动漫
php警告Creating default object from empty value 问题的解决方法
2014/04/02 PHP
php 解决substr()截取中文字符乱码问题
2016/07/18 PHP
Laravel框架基础语法与知识点整理【模板变量、输出、include引入子视图等】
2019/12/03 PHP
基于jquery的jqDnR拖拽溢出的修改
2011/02/12 Javascript
在Iframe中获取父窗口中表单的值(示例代码)
2013/11/22 Javascript
nodejs中简单实现Javascript Promise机制的实例
2014/12/06 NodeJs
js创建对象的方式总结
2015/01/10 Javascript
函数window.open实现关闭所有的子窗口
2015/08/03 Javascript
浅谈Javascript中的函数、this以及原型
2016/10/09 Javascript
jQuery Easyui datagrid editor为combobox时指定数据源实例
2016/12/19 Javascript
浅谈webpack打包生成的bundle.js文件过大的问题
2018/02/22 Javascript
原生js实现拖拽功能基本思路详解
2018/04/18 Javascript
利用nodeJs anywhere搭建本地服务器环境的方法
2018/05/12 NodeJs
vue: WebStorm设置快速编译运行的方法
2018/10/18 Javascript
如何从0开始用node写一个自己的命令行程序
2018/12/29 Javascript
原生JS使用Canvas实现拖拽式绘图功能
2019/06/05 Javascript
基于Ionic3实现选项卡切换并重新加载echarts
2020/09/24 Javascript
uniapp实现可滑动选项卡
2020/10/21 Javascript
python实现屏保程序(适用于背单词)
2019/07/30 Python
python 多进程共享全局变量之Manager()详解
2019/08/15 Python
关于django 1.10 CSRF验证失败的解决方法
2019/08/31 Python
利用python实现PSO算法优化二元函数
2019/11/13 Python
PyTorch和Keras计算模型参数的例子
2020/01/02 Python
使用Jupyter notebooks上传文件夹或大量数据到服务器
2020/04/14 Python
巧用 CSS3的webkit-box-reflect 倒影实现各类动效
2021/03/05 HTML / CSS
来自圣地亚哥的实惠太阳镜:Knockaround
2018/08/27 全球购物
JD Sports西班牙:英国领先的运动服装公司
2020/01/06 全球购物
德国便宜的宠物店:Brekz.de
2020/10/23 全球购物
如何安装ruby on rails
2014/02/09 面试题
管理心得体会
2013/12/28 职场文书
优秀教师先进个人事迹材料
2014/08/31 职场文书
涨价通知怎么写
2015/04/23 职场文书
员工给公司的建议书
2019/06/24 职场文书
手把手教你怎么用Python实现zip文件密码的破解
2021/05/27 Python
使用Oracle命令进行数据库备份与还原
2021/12/06 Oracle