【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