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 相关文章推荐
JavaScript For Beginners(转载)
Jan 05 Javascript
Js实现双击鼠标自动滚动屏幕的示例代码
Dec 14 Javascript
原生javascript实现Tab选项卡切换功能
Jan 12 Javascript
JavaScript实现网站访问次数统计代码
Aug 12 Javascript
JavaScript实现简单的tab选项卡切换
Jan 05 Javascript
Ionic实现仿通讯录点击滑动及$ionicscrolldelegate使用分析
Jan 18 Javascript
Bootstrap零基础学习第一课之模板
Jul 18 Javascript
jQuery可见性过滤选择器用法示例
Sep 09 Javascript
Angular 4.x 路由快速入门学习
May 03 Javascript
jquery请求servlet实现ajax异步请求的示例
Jun 03 jQuery
详解微信小程序scroll-view横向滚动的实践踩坑及隐藏其滚动条的实现
Mar 14 Javascript
jQuery实现推拉门效果
Oct 19 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
PHP实现绘制二叉树图形显示功能详解【包括二叉搜索树、平衡树及红黑树】
2017/11/16 PHP
PHP pthreads v3下的Volatile简介与使用方法示例
2020/02/21 PHP
如何在PHP中读写文件
2020/09/07 PHP
javascript学习笔记(十七) 检测浏览器插件代码
2012/06/20 Javascript
Extjs4 消息框去掉关闭按钮(类似Ext.Msg.alert)
2013/04/02 Javascript
jquery的ajaxSubmit()异步上传图片并保存表单数据演示代码
2013/06/04 Javascript
js 控制图片大小核心讲解
2013/10/09 Javascript
jquery获取元素值的方法(常见的表单元素)
2013/11/15 Javascript
jquery实现导航固定顶部的效果仿蘑菇街
2014/10/22 Javascript
js实现图片从左往右渐变切换效果的方法
2015/02/06 Javascript
jQuery实现页面顶部显示的进度条效果完整实例
2015/12/09 Javascript
原生js和jquery分别实现横向导航菜单效果
2016/05/13 Javascript
json对象转为字符串,当做参数传递时加密解密的实现方法
2016/06/29 Javascript
使用JavaScript判断手机浏览器是横屏还是竖屏问题
2016/08/02 Javascript
NodeJs测试框架Mocha的安装与使用
2017/03/28 NodeJs
JavaScript文件的同步和异步加载的实现代码
2017/08/19 Javascript
Vue通过URL传参如何控制全局console.log的开关详解
2017/12/07 Javascript
手动用webpack搭建第一个ReactApp的示例
2018/04/11 Javascript
vue axios数据请求get、post方法及实例详解
2018/09/11 Javascript
seajs和requirejs模块化简单案例分析
2019/08/26 Javascript
JQuery发送ajax请求时中文乱码问题解决
2019/11/14 jQuery
vue.js实现点击图标放大离开时缩小的代码
2021/01/27 Vue.js
Python实例之wxpython中Frame使用方法
2014/06/09 Python
Python实现115网盘自动下载的方法
2014/09/30 Python
Python中Selenium模拟JQuery滑动解锁实例
2017/07/26 Python
python3文件复制、延迟文件复制任务的实现方法
2019/09/02 Python
python统计指定目录内文件的代码行数
2019/09/19 Python
keras 特征图可视化实例(中间层)
2020/01/24 Python
美国在线珠宝商店:SZUL
2017/02/11 全球购物
港湾网络笔试题
2014/04/19 面试题
告诉你怎样写创业计划书
2014/01/27 职场文书
安全标语大全
2014/06/10 职场文书
报到证办理个人委托书
2014/10/06 职场文书
上班迟到检讨书范文
2015/05/06 职场文书
nginx配置ssl实现https的方法示例
2021/03/31 Servers
SpringBoot连接MySQL获取数据写后端接口的操作方法
2021/11/02 MySQL