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">    <CheckBoxCardv-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路由拦截：Vue自定义全局弹窗组件
前言在任何一个平台中,如果需要增加用户黏度,除了用户需要的基本内容外,用户登录注册提交信息也是非常重要的一环,可以了解用户基本信息,用户喜欢等. 抛出前后端混合开发外,vue可以轻松的实现路由拦截. ...
vue自定义音频播放组件_易于创建Vue的自定义音频播放器组件
vue自定义音频播放组件音频更好 (vue-audio-better) Easy to create custom audio player components for Vue.js. 易于为Vu ...
vue自定义日历小组件
vue自定义小日历组件一.前言自己开发的项目需要用到类似博客侧边栏小日历组件,觉得自己造一个比较随心所欲,更能满足自己的需求,所以决定自己开发一个.最终效果如图所示. 二.日历样式我的这个日历组 ...
Vue自定义InputNumber 计数器组件
1.为什么要自己封装一个InputNumber 计数器组件? 因为原始的el-element的el-input-number组件有问题: 原生组件能输入英文,不能限制只能输入数值: 原始组件能通过键盘 ...
前端 vue 自定义导航栏组件高度及返回箭头自定义 tabbar 图标
前端vue自定义导航栏组件高度及返回箭头自定义tabbar图标, 下载完整代码请访问uni-app插件市场地址:https://ext.dcloud.net.cn/plugin?id=12986 喜 ...
vue 自定义键盘组件_使用Vue自定义数字键盘组件的方法
这篇文章主要介绍了关于使用Vue自定义数字键盘组件的方法,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下最近做 Vue 开发,因为有不少页面涉及到金额输入,产品老是觉得用原生的 inp ...
vue 自定义多选框组件
自定义多选框组件 <template><div class="checkBox"><input v-model="isInherit&quo ...
vue自定义翻页组件
效果图如下: 1.在components建立page.vue文件 <template><div class="pagination"><!-- 上 - ...
vue自定义星星评分组件rater，可自定义星星图片，大小，暂不支持半颗星
在线预览地址:https://wenyuming.github.io/w-demos/dist/index.html#/rater 鉴于第三方ui库的星星评分组件星星基本上是固定,不能自定义,使用起来 ...

Vue 自定义多选组件

Vue 自定义多选组件

子组件（选项卡）

父组件

效果图

Vue 自定义多选组件相关推荐

最新文章

热门文章