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 prototype截取字符串函数
Apr 01 Javascript
js 延迟加载 改变JS的位置加快网页加载速度
Dec 11 Javascript
js猜数字小游戏的简单实现代码
Jul 02 Javascript
JavaScript制作windows经典扫雷小游戏
Mar 31 Javascript
精通JavaScript的this关键字
May 28 Javascript
jquery对象访问是什么及使用方法介绍
May 03 Javascript
基于HTML+CSS+JS实现增加删除修改tab导航特效代码
Aug 05 Javascript
对Angular.js Controller如何进行单元测试
Oct 25 Javascript
JavaScript中如何使用cookie实现记住密码功能及cookie相关函数介绍
Nov 10 Javascript
分享一道关于闭包、bind和this的面试题
Feb 20 Javascript
JS设计模式之状态模式概念与用法分析
Feb 05 Javascript
jQuery创建折叠式菜单
Jun 15 jQuery
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
ajax php 实现写入数据库
2009/09/02 PHP
laravel model 两表联查示例
2019/10/24 PHP
jquery dialog open后,服务器端控件失效的快速解决方法
2013/12/19 Javascript
KnockoutJS 3.X API 第四章之表单value绑定
2016/10/10 Javascript
javascript中replace使用方法总结
2017/03/01 Javascript
js实现下一页页码效果
2017/03/07 Javascript
webpack打包react项目的实现方法
2018/06/21 Javascript
基于Vue-Cli 打包自动生成/抽离相关配置文件的实现方法
2018/12/09 Javascript
微信小程序实现发送验证码按钮效果
2018/12/20 Javascript
vue实现购物车案例
2020/05/30 Javascript
使用eslint和githooks统一前端风格的技巧
2020/07/29 Javascript
python实现根据窗口标题调用窗口的方法
2015/03/13 Python
详解设计模式中的工厂方法模式在Python程序中的运用
2016/03/02 Python
Python数据结构与算法之列表(链表,linked list)简单实现
2017/10/30 Python
JavaScript实现一维数组转化为二维数组
2018/04/17 Python
对python中的 os.mkdir和os.mkdirs详解
2018/10/16 Python
Centos部署django服务nginx+uwsgi的方法
2019/01/02 Python
python实现感知机线性分类模型示例代码
2019/06/02 Python
python程序变成软件的实操方法
2019/06/24 Python
python爬虫实现中英翻译词典
2019/06/25 Python
python执行scp命令拷贝文件及文件夹到远程主机的目录方法
2019/07/08 Python
详解Python用三种方式统计词频的方法
2019/07/29 Python
Python argparse模块应用实例解析
2019/11/15 Python
python 读取.nii格式图像实例
2020/07/01 Python
Python Opencv实现单目标检测的示例代码
2020/09/08 Python
pycharm中选中一个单词替换所有重复单词的实现方法
2020/11/17 Python
HTML5的一个显示电池状态的API简介
2015/06/18 HTML / CSS
荷兰优雅女装网上商店:Heine
2016/11/14 全球购物
德国孕妇装和婴童服装网上商店:bellybutton
2018/04/12 全球购物
世界上最全面的草药补充剂和顶级品牌维生素网站:HerbsPro
2019/01/20 全球购物
线程的基本概念、线程的基本状态以及状态之间的关系
2012/10/26 面试题
Ejb技术面试题
2015/04/29 面试题
公司同意接收函
2014/01/13 职场文书
2014应届本科生自我评价
2014/09/13 职场文书
MySQL8.0的WITH查询详情
2021/08/30 MySQL
SQL Server数据库基本概念、组成、常用对象与约束
2022/03/20 SQL Server