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 相关文章推荐
Extjs学习笔记之一 初识Extjs之MessageBox
Jan 07 Javascript
使用SyntaxHighlighter实现HTML高亮显示代码的方法
Feb 04 Javascript
js实现连续英文字符自动换行兼容ie6 ie7和firefox
Sep 06 Javascript
jQuery $.extend()用法总结
Jun 15 Javascript
node.js中的fs.chownSync方法使用说明
Dec 16 Javascript
在Ubuntu系统上安装Ghost博客平台的教程
Jun 17 Javascript
Bootstrap Table服务器分页与在线编辑应用总结
Aug 08 Javascript
js浏览器html5表单验证
Oct 17 Javascript
详谈Ajax请求中的async:false/true的作用(ajax 在外部调用问题)
Feb 10 Javascript
BootStrapValidator初使用教程详解
Feb 10 Javascript
Bootstrap 中data-[*] 属性的整理
Mar 13 Javascript
vue-router+nginx 非根路径配置方法
Jun 30 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的中问验证码
2006/11/25 PHP
php文件夹的创建与删除方法
2015/01/24 PHP
php生成圆角图片的方法
2015/04/07 PHP
yii2中结合gridview如何使用modal弹窗实例代码详解
2016/06/12 PHP
php中static和const关键字用法分析
2016/12/07 PHP
CI框架(CodeIgniter)公共模型类定义与用法示例
2017/08/10 PHP
javascript 出生日期和身份证判断大全
2008/11/13 Javascript
JavaScript 学习笔记二 字符串拼接
2010/03/28 Javascript
初学Jquery插件制作 在SageCRM的查询屏幕隐藏部分行的功能
2011/12/26 Javascript
javascript事件冒泡详解和捕获、阻止方法
2014/04/12 Javascript
jquery 中的each()跳出循环的语句
2014/05/23 Javascript
JS中自定义定时器让它在某一时刻执行
2014/09/02 Javascript
jquery带下拉菜单和焦点图代码分享
2015/08/24 Javascript
Easyui form combobox省市区三级联动
2016/01/13 Javascript
浅谈js中的in-for循环
2016/06/28 Javascript
require简单实现单页应用程序(SPA)
2016/07/12 Javascript
浅谈使用splice函数对数组中的元素进行删除时的注意事项
2016/12/04 Javascript
jQuery 中msgTips 顶部弹窗效果实现代码
2017/08/14 jQuery
AngularJS 控制器 controller的详解
2017/10/17 Javascript
基于input动态模糊查询的实现方法
2017/12/12 Javascript
vue+webpack实现异步组件加载的方法
2018/02/03 Javascript
layui+SSM的数据表的增删改实例(利用弹框添加、修改)
2019/09/27 Javascript
如何利用JavaScript编写一个格斗小游戏
2021/01/06 Javascript
简单实现Python爬取网络图片
2018/04/01 Python
python3.4.3下逐行读入txt文本并去重的方法
2018/04/29 Python
Django处理文件上传File Uploads的实例
2018/05/28 Python
详解python如何在django中为用户模型添加自定义权限
2018/10/15 Python
python 读取更新中的log 或其它文本方式
2019/12/24 Python
python 解决print数组/矩阵无法完整输出的问题
2020/02/19 Python
python生成任意频率正弦波方式
2020/02/25 Python
Python和Bash结合在一起的方法
2020/11/13 Python
HTML5之HTML元素扩展(下)—增强的Form表单元素值得关注
2013/01/31 HTML / CSS
波兰运动鞋网上商店:e-Sporting
2018/02/16 全球购物
业务员管理制度范本
2015/08/06 职场文书
2016廉洁从业学习心得体会
2016/01/19 职场文书
浅谈Python实现opencv之图片色素的数值运算和逻辑运算
2021/06/23 Python