This is the 21st day of my participation in the November Gwen Challenge. Check out the event details: The last Gwen Challenge 2021

[thousands of words long, stay up late to update, original is not easy, a lot of support, thank you]

preface

Hello, everyone. In the previous part of the article we made a simple change to the voting feature: we introduced the AXIos third-party library and re-wrapped it to simulate requesting server data. At the same time, a JSON file was added to replace the server so as to achieve the purpose of front and back end interaction. Finally, a dynamically configurable, unlimited number of voting function was realized. However, no matter how many voting functions there are, they can only count the number of supported and unsupported. If a new requirement comes up: click and select or input functions, then simple voting cannot be satisfied. Next, this article will continue to expand and transform based on the previous voting function, and realize a questionnaire survey function that can be clicked, selected and input.

Analysis of the

In our common questionnaire survey generally includes: single selection part, multiple selection part, user input part; General questionnaire design will try to let users click rather than input, so when designing the questionnaire, we should design as many radio or multiple options as possible, and design one or two user input parts at the end, and put a submit button at the end. To make the code more usable, we have a separate wrapper for each type, such as Vote as Vote component, radio as MyRadio component, multiple as MyCheck component, input as MyInput component, and score as Mystar component. Let’s wrap each of these components. In addition, the Vote component has already been encapsulated in the previous sharing of the voting function, which will not be explained here.

Radio component MyRadio

For this encapsulation of radio components we need el-Radio based on ElementUI. We know that radio buttons should generally be placed in the same group, so that radio can be selected. Otherwise, even radio buttons can be selected multiple times without grouping, so we need to use el-radio-group

  • First we need to define two properties:
    • Title: String, mandatory, used to display the title of the questionnaire
    • ItemData: Array type, required, used to load radio button options
  • Import ElCard, ElRadioGroup, ElRadio in ElementUI
  • Import the REF method in VUE to define reactive attributes
  • Define a reactive property selectedValue in the setup function to receive the selectedValue
  • Use the add El-card, el-radio-Group, and el-Radio components in the Template template, respectively
  • Display our questionnaire title: Title in the title of the El-Card component
  • Set the v-model property value to selectedValue in el-radio-group to receive the selectedValue
  • Finally, add an el-radio and use the V-for instruction to loop through the itemData property to load the options
<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>
Copy the code
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 }; }};Copy the code

Multiple component myCheck

A multiselect component is very similar to a singleton component, except that it uses a different ElementUI component. Multi-select components We need to use the el-checlbox-group and el-Checkbox in the ElementUi component library, using the same steps as the radio buttons:

  • First we need to define two properties:
    • Title: String, mandatory, used to display the title of the questionnaire
    • ItemData: Array type, required, used to load multiple button options
  • Import ElCard, ElCheckboxGroup, ElCheckbox in ElementUI
  • Import the REF method in VUE to define reactive attributes
  • Define a reactive property selectedValue in the setup function to receive the selectedValue
  • Use the add El-card, el-checkbox-group, and el-checkbox components in the template template, respectively
  • Display our questionnaire title: Title in the title of the El-Card component
  • Set the v-model property value to selectedValue in the el-checkbox-group to receive the selectedValue
  • Finally, add an el-checkbox and use the V-for directive to loop through the itemData property to load the options
<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>
Copy the code
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 }; }};Copy the code

The input component myInput

This input component is much simpler than the first two, requiring only a questionnaire title and a text box for user input, so this component is based on the El-Input implementation of the ElementUI library

  • First I define a title property, a String property, which must be used to display the title of the questionnaire
  • Import ElCard and ElInput in ElementUI
  • Import the REF method in VUE to define reactive attributes
  • Define a reactive property selectedValue in the setup function to receive entered values
  • Use the Add El-Card and el-Input components, respectively, in the Template template
  • Set in el-input:
    • The V-model property, with a selectedValue, is used to receive input values
    • The type property is textarea, which the user can enter in multiple lines
    • The rows property, with a value of 4, sets the input box height to 4 rows
    • Placeholder property, set the hint
    • Clearable property, which can be cleared
  • Finally, the title of our questionnaire is displayed in the title of the EL-Card component
<template>
  <el-card class="box-card">
    <template #header>
      <h1>{{ title }}</h1>
    </template>
    <div>
      <el-input
        v-model="selectedValue"
        type="textarea"
        :rows="4"
        placeholder="Please input"
        clearable
      />
    </div>
  </el-card>
</template>
Copy the code
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 }; }};Copy the code

Scoring component MyStar

To show more functionality, we finally add a scoring component, MyStar, which is similar to the previous two and still needs to define two properties:

  • First we need to define two properties:
    • Title: String, mandatory, used to display the title of the questionnaire
    • ItemData: Array type, required, used to display the score or description for each level (customizable as required)
  • Import ElCard, ElRate in elementUI
  • Import the REF method in VUE to define reactive attributes
  • Define a reactive property selectedValue in the setup function to receive the selectedValue
  • Use the Add El-Card and el-Rate components, respectively, in the Template template
    • The following properties need to be set in the EL-Rate component:
    • V-model property with a selectedValue
    • The texts attribute, whose value is the attribute itemData defined above
    • Show-text property, with the value true
  • Display our questionnaire title: Title in the title of the El-Card component
<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>
Copy the code
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 }; }};Copy the code

Add the data source to the JSON file

In order to achieve the configurability of various components, we still need to set up the data source of each component in the JSON file, which is used to simulate the server request to realize the front and back end interaction

{
    "data":[
        {"id":1."title":"Vue3.0 easy to learn?"}]."radios":[
        {"id":1."title":"Are you satisfied with the company's benefits?"."items": ["Very satisfied."."Satisfied"."Basically satisfied"."Dissatisfied"] {},"id":2."title":"Are you satisfied with your current income?"."items": ["Very satisfied."."Satisfied"."Basically satisfied"."Dissatisfied"]}],"checks":[
        {"id":1."title":"What other benefits would you like the company to add?"."items": ["Get a raise"."Pay for your food."."Send girlfriend"."All of the above"]}],"inputs":[
        {"id":1."title":"What do you want to say to our company?"},
        {"id":2."title":"Just say something."}]."stars":[
        {"id":1."title":"Please give this share a mark!"."items": ["Bad"."Disappointed"."General"."Very good"."Very good."]]}}Copy the code

Introduce packaged components in app.vue

All you have to do is package your components and then import them and register them and use them, but I won’t go into that, I’ll just go into the code

<template>
  <Vote v-for="vote in data" :key="vote.id" :title="vote.title" />
  <myradio
    v-for="radio in radios"
    :key="radio.id"
    :title="radio.title"
    :itemData="radio.items"
  />
  <mycheck
    v-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" />
  <mystar
    v-for="star in stars"
    :key="star.id"
    :title="star.title"
    :itemData="star.items"
  />
  <el-button type="primary">submit</el-button>
</template>
Copy the code
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, }; }};Copy the code

The final effect is shown below

conclusion

In this paper, we based on the previous voting function to do an extension, to achieve a simple questionnaire function. Along the way, the various types of survey components were simply wrapped to make the code edible, while continuing with axios requests and JSON files from the previous article to simulate server interaction. Finally realized a simple questionnaire survey small function. Well friends, this time to share here, like friends welcome to like comments and attention oh!