【Vue3.0实战逐步深入系列】扩展投票功能基于elementui进行组件封装实现一个简单的问卷调查功能

【千字长文，熬夜更新，原创不易，多多支持，感谢大家】

前言

小伙伴们大家好。在前面一偏文章中我们把投票功能进行了简单的改造：引入了axios第三方库并进行了二次封装用于模拟请求服务器数据。同时添加了一个json文件来替代服务器从而达到前后端交互的目的，最终实现了一个可动态配置的，不限个数的投票功能。然而不管有多少个投票功能都只能统计支持和不支持的个数，如果来了新的需求：想要实现点选或者输入功能，那么简单的投票就无法满足。接下来这篇文章就基于前面的投票功能继续扩展改造，实现一个可以点击，可以点选，可以输入的问卷调查功能。

分析

在我们常见的问卷调查中一般都会包含：单选部分，多选部分，用户输入部分；一般的调查问卷设计会尽量的让用户去点选而不是输入，所以在设计问卷的时候回尽量多的设计一些单选或多选部分，而放在最后设计一到两个用户输入的，最后放一个提交按钮。为了让代码可用性高一点，我们对每种类型进行一个独立的封装，比如投票封装成Vote组件，单选封装为myradio组件，多选封装为mycheck组件，输入封装为myinput组件，评分封装为mystar组件，下面我们就来对以上组件进行一一封装。另外Vote组件在前面分享投票功能的时候已经进行了封装，这里就不再说明。

单选组件myradio

本次对单选组件的封装我们需要基于elementui的el-radio。我们知道单选按钮一般都应该放在同一个组中，这样才能够实现单选，否则不进行分组即使是单选按钮也可以进行多选，因此还得需要借助el-radio-group

首先我们需要定义两个属性：

title：String类型，必须，用于展示问卷的标题

itemData：Array类型，必须，用于加载单选按钮选项

导入elementui中的ElCard, ElRadioGroup, ElRadio

导入vue中ref方法用于定义响应式属性

在setup函数中定义一个响应式属性selectedValue，用于接收已选中的值

在template模板中使用分别添加el-card，el-radio-group和el-radio组件

在el-card组件的标题中显示我们的问卷标题：title

在el-radio-group中设置v-model属性值为selectedValue，用于接收已选的值

最后添加一个el-radio并使用v-for指令循环itemData属性加载选项

<template><el-card class="box-card"><template #header><h1>{{ title }}</h1></template><div><el-radio-group v-model="selectedValue"><el-radio v-for="item in itemData" :key="item" :label="item">{{item}}</el-radio></el-radio-group></div></el-card>
</template>

import { ElCard, ElRadioGroup, ElRadio } from "element-plus";
import { ref } from "vue";
export default {components: { ElCard, ElRadioGroup, ElRadio },props: {title: {type: String,required: true,},itemData: {type: Array,required: true,},},setup() {let selectedValue = ref(0);return { selectedValue };},};

多选组件mycheck

多选组件跟单选组件非常类似，只不过是用到的elementui组件不同。多选组件我们需要借助elementui组件库中的el-checlbox-group和el-checkbox，步骤与单选按钮相同：

首先我们需要定义两个属性：

title：String类型，必须，用于展示问卷的标题

itemData：Array类型，必须，用于加载多选按钮选项

导入elementui中的ElCard, ElCheckboxGroup, ElCheckbox

导入vue中ref方法用于定义响应式属性

在setup函数中定义一个响应式属性selectedValue，用于接收已选中的值

在template模板中使用分别添加el-card，el-checkbox-group和el-checkbox组件

在el-card组件的标题中显示我们的问卷标题：title

在el-checkbox-group中设置v-model属性值为selectedValue，用于接收已选的值

最后添加一个el-checkbox并使用v-for指令循环itemData属性加载选项

<template><el-card class="box-card"><template #header><h1>{{ title }}</h1></template><div><el-checkbox-group v-model="selectedValue"><el-checkbox v-for="item in itemData" :key="item" :label="item">{{item}}</el-checkbox></el-checkbox-group></div></el-card>
</template>

import { ElCard, ElCheckboxGroup, ElCheckbox } from "element-plus";
import { ref } from "vue";
export default {components: { ElCard, ElCheckboxGroup, ElCheckbox },props: {title: {type: String,required: true,},itemData: {type: Array,required: true,},},setup() {let selectedValue = ref([]);return { selectedValue };},};

输入组件myinput

这个输入组件要比前两个都简单得多，我们只需要一个问卷标题和一个用户输入的文本框即可，因此本组件主要基于elementui库的el-input实现

首先定义一个title属性，String类型，必须，用于展示问卷的标题

导入elementui中的ElCard和ElInput

导入vue中ref方法用于定义响应式属性

在setup函数中定义一个响应式属性selectedValue，用于接收已输入的值

在template模板中使用分别添加el-card和el-input组件

在el-input中设置：
v-model属性，值为selectedValue，用于接收已的输入值

type属性，值为textarea，用户可多行输入

rows属性，值为4，设置输入框高度为4行

placeholder属性，设置提示信息

clearable属性，设置可清空

最后在el-card组件的标题中显示我们的问卷标题：title

<template><el-card class="box-card"><template #header><h1>{{ title }}</h1></template><div><el-inputv-model="selectedValue"type="textarea":rows="4"placeholder="Please input"clearable/></div></el-card>
</template>

import { ElCard, ElInput } from "element-plus";
import { ref } from "vue";
export default {components: { ElCard, ElInput },props: {title: {type: String,required: true,},},setup() {let selectedValue = ref("");return { selectedValue };},};

评分组件mystar

为了展示更多的功能，我们最后再加一个评分组件mystar，这个组件跟前两个类似仍然需要定义两个属性：

首先我们需要定义两个属性：

title：String类型，必须，用于展示问卷的标题

itemData：Array类型，必须，用于展示每个等级的分数或描述（可根据需要自定义）

导入elementui中的ElCard, ElRate

导入vue中ref方法用于定义响应式属性

在setup函数中定义一个响应式属性selectedValue，用于接收已选中的值

在template模板中使用分别添加el-card和el-rate组件
在el-rate组件中需要设置如下属性：

v-model属性，值为selectedValue

texts属性，值为上面定义的属性itemData

show-text属性，值为true

在el-card组件的标题中显示我们的问卷标题：title

<template><el-card class="box-card"><template #header><h1>{{ title }}</h1></template><div><el-rate v-model="selectedValue" :texts="itemData" show-text> </el-rate></div></el-card>
</template>

import { ElCard, ElRate } from "element-plus";
import { ref } from "vue";
export default {components: { ElCard, ElRate },props: {title: {type: String,required: true,},itemData: {type: Array,required: true,},},setup() {let selectedValue = ref("");return { selectedValue };},
};

在json文件中添加数据源

同样为了实现各类组件的可配置性，我们仍然需要在json文件中设置各个组件的数据源，用于模拟服务器请求实现前后端交互

{"data":[{"id":1,"title":"Vue3.0好学吗？"}],"radios":[{"id":1,"title":"您对公司的福利是否满意？","items":["非常满意","满意","基本满意","不满意"]},{"id":2,"title":"您对当前的收入是否满意？","items":["非常满意","满意","基本满意","不满意"]}],"checks":[{"id":1,"title":"您还希望公司增加哪些福利？","items":["涨工资","涨饭补","发女朋友","以上都要"]}],"inputs":[{"id":1,"title":"您有什么想对公司说的？"},{"id":2,"title":"随便说点啥吧"}],"stars":[{"id":1,"title":"请给本次分享打个分吧！","items":["糟糕","失望","一般","很好","非常好"]}]
}

在App.vue中引入封装好的组件

万事俱备只欠东风，组件都封装好了接下来就是导入并注册它们然后使用了，这里就不多说了，直接上代码吧

<template><Vote v-for="vote in data" :key="vote.id" :title="vote.title" /><myradiov-for="radio in radios":key="radio.id":title="radio.title":itemData="radio.items"/><mycheckv-for="check in checks":key="check.id":title="check.title":itemData="check.items"/><myinput v-for="inp in inputs" :key="inp.id" :title="inp.title" /><mystarv-for="star in stars":key="star.id":title="star.title":itemData="star.items"/><el-button type="primary">提交</el-button>
</template>

import Vote from "./Vote.vue";
import myradio from "./myradio.vue";
import mycheck from "./mycheck.vue";
import myinput from "./myinput.vue";
import mystar from "./mystar.vue";
import http from "./api/http";
import { ref } from "vue";
import { ElButton } from "element-plus";export default {name: "App",components: {Vote,myradio,mycheck,myinput,mystar,ElButton,},setup() {let data = ref([]);let radios = ref([]);let checks = ref([]);let inputs = ref([]);let stars = ref([]);http.get("/caoxuhaijing.json").then((res) => {console.log(res);data.value = res.data;radios.value = res.radios;checks.value = res.checks;inputs.value = res.inputs;stars.value = res.stars;});return {data,radios,checks,inputs,stars,};},
};

最终效果图如下

总结

本文我们基于前面的投票功能做了一下扩展，实现了一个简单的问卷调查功能。在实现的过程中对各类型的调查组件进行了简单的封装以实现代码的可服用，同时继续沿用前面文章中的axios请求和json文件来模拟与服务器交互。最终实现了一个简单的问卷调查小功能。
好了小伙伴们，本次分享就到这里了，喜欢的小伙伴欢迎点赞评论加关注哦！

【Vue3.0实战逐步深入系列】扩展投票功能基于elementui进行组件封装实现一个简单的问卷调查功能相关推荐

【Vue3.0实战逐步深入系列】vue3.0获取问卷调查结果并输出到控制台
[千字长文,熬夜更新,原创不易,多多支持,感谢大家] 前言 hello,小伙伴们大家好.昨天我们对最初的投票功能做了一个简单的扩展:实现了一个简单的问卷调查功能.在实现该问卷功能时,我们分别封装了几个 ...
【Vue3.0实战逐步深入系列】为问卷系统重新布局并添加登录及注销功能
[千字长文,熬夜更新,原创不易,多多支持,感谢大家] 前言小伙伴们大家好.到目前为止我们的问卷调查已经实现了配置问卷,填写问卷,保存问卷,提交问卷,提交记录以及提交结果展示等基本功能.其实到这里关于 ...
关于 vue3.0 实战项目 setup、 props、 reactive、ref
关于 vue3.0 实战项目中遇到的问题介绍vue3.0的特性: 亿点小知识 1.diff算法的优化增加了静态标记PatchFlag 2.按需编译,体积比Vue2.x更小(Tree shaking ...
知识图谱实战应用11-基于py2neo构建一个简单的问答功能
大家好,我是微学AI,今天给大家介绍一下知识图谱实战应用10-基于py2neo构建一个简单的问答功能,利用知识图谱来实现智能的问答功能.知识图谱是一种用于表示实体之间关系的图形化模型,它是人工智能和自 ...
vue3.0实战项目
vue3.0+typescript+vite2实战:后台管理系统一.技术栈二.功能架构三.框架搭建四.安装插件 1.路由插件vue-router4安装使用 2.vuex4的安装 3.安装sas ...
前端学习（2670）： vue3.0实战开始建立新项目功能清单
前端学习（2669）： vue3.0实战开始建立新项目
vue修改节点class_Vue2.0 源码解读系列来自 Vue 的神秘礼盒
鄢栋,微医云服务团队前端工程师.有志成为一名全栈开发工程师甚至架构师,路漫漫,吾求索.生活中通过健身释放压力,思考问题. 目前 Vue3.0 打的很火热,都已经出了很多 Vue3.0 源码解析系列的博 ...
onmounted vue3_基于项目时间阐述vue3.0新型状态管理和逻辑复用方式
作者:Mingle 转发链接:https://mp.weixin.qq.com/s/iOq-eeyToDXJ6lvwnC12DQ 前言背景:2019年2月6号,React 发布「16.8.0」版 ...

【Vue3.0实战逐步深入系列】扩展投票功能基于elementui进行组件封装实现一个简单的问卷调查功能

前言

分析

单选组件myradio

多选组件mycheck

输入组件myinput

评分组件mystar

在json文件中添加数据源

在App.vue中引入封装好的组件

总结

【Vue3.0实战逐步深入系列】扩展投票功能基于elementui进行组件封装实现一个简单的问卷调查功能相关推荐

最新文章

热门文章