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实现动态CSS换肤技术的脚本
Jun 29 Javascript
百度Popup.js弹出框进化版 拖拽小框架发布 兼容IE6/7/8,Firefox,Chrome
Apr 13 Javascript
jQuery aminate方法定位到页面具体位置
Dec 26 Javascript
js的window.showModalDialog及window.open用法实例分析
Jan 29 Javascript
使用pjax实现无刷新更改页面url
Feb 05 Javascript
js检测判断日期大于多少天的方法
May 04 Javascript
bootstrap弹出层的多种触发方式
May 10 Javascript
vue.js通过路由实现经典的三栏布局实例代码
Jul 08 Javascript
layer弹出层全屏及关闭方法
Aug 17 Javascript
微信小程序实现的绘制table表格功能示例
Apr 26 Javascript
基于JQuery实现页面定时弹出广告
May 08 jQuery
element-plus一个vue3.xUI框架(element-ui的3.x 版初体验)
Dec 02 Vue.js
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
德劲1107的电路分析与打磨
2021/03/02 无线电
如何在PHP中使用Oracle数据库(4)
2006/10/09 PHP
php格式化日期实例分析
2014/11/12 PHP
php实现数组按指定KEY排序的方法
2015/03/30 PHP
php提高网站效率的技巧
2015/09/29 PHP
详解Laravel视图间共享数据与视图Composer
2016/08/04 PHP
Apache站点配置SSL强制跳转443
2021/03/09 Servers
Extjs的FileUploadField文件上传出现了两个上传按钮
2014/04/29 Javascript
Vue.js每天必学之构造器与生命周期
2016/09/05 Javascript
Bootstrap CSS组件之导航条(navbar)
2016/12/17 Javascript
BootStrap表单控件之复选框checkbox和单选择按钮radio
2017/05/23 Javascript
echart简介_动力节点Java学院整理
2017/08/11 Javascript
详解关于react-redux中的connect用法介绍及原理解析
2017/09/11 Javascript
layer.js之回调销毁对话框的例子
2019/09/11 Javascript
JavaScript 面向对象基础简单示例
2019/10/02 Javascript
关于JS模块化的知识点分享
2019/10/16 Javascript
《javascript设计模式》学习笔记四:Javascript面向对象程序设计链式调用实例分析
2020/04/07 Javascript
解决vue组件没显示,没起作用,没报错,但该显示的组件没显示问题
2020/09/02 Javascript
JS检测浏览器开发者工具是否打开的方法详解
2020/10/02 Javascript
在Vue中使用Echarts可视化库的完整步骤记录
2020/11/18 Vue.js
Vue实现简单计算器
2021/01/20 Vue.js
python实现根据用户输入从电影网站获取影片信息的方法
2015/04/07 Python
Python实现两个list对应元素相减操作示例
2017/06/09 Python
简单实现python数独游戏
2018/03/30 Python
Python初学者常见错误详解
2019/07/02 Python
全球第二大家装零售商:Lowe’s
2018/01/13 全球购物
你所知道的集合类都有哪些?主要方法?
2012/12/31 面试题
售后服务科岗位职责范文
2013/11/13 职场文书
公务员转正考察材料
2014/02/07 职场文书
第一批党的群众路线教育实践活动工作总结
2014/03/03 职场文书
有关爱国演讲稿
2014/05/07 职场文书
星级党支部申报材料
2014/05/31 职场文书
基层党建工作汇报材料
2014/08/15 职场文书
护士2015年终工作总结
2015/04/29 职场文书
王亚平太空授课观后感
2015/06/12 职场文书
大学社团活动总结怎么写
2019/06/21 职场文书