美文网首页Vue
Vue根据后台数据动态生成的调查问卷页面

Vue根据后台数据动态生成的调查问卷页面

作者: Lia代码猪崽 | 来源:发表于2019-09-25 15:10 被阅读0次

一、单选

为了更详细的描述，将先写死一个数据，再到后面抽离成组件更方便使用和数据的交互。

1. 编写基本页面

HelloWorld.vue

<template>
  <div class="hello">
    <div class="question">
      <div class="num">01</div>
      <div class="content">
        <div class="title">单选题：今年是哪一年</div>
        <div class="my-radio">
          <div class="row">
            <div class="radio radio-normal"></div>
            <div class="label">2017年</div>
          </div>
          <div class="row">
            <div class="radio radio-normal"></div>
            <div class="label">2018年</div>
          </div>
          <div class="row">
            <div class="radio radio-active"></div>
            <div class="label">2019年</div>
          </div>
          <div class="row">
            <div class="radio radio-normal"></div>
            <div class="label">2020年</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'HelloWorld',
    data () {
      return {
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
  .question {
    margin-bottom: 38px;
    position: relative;
    display: inline-block;
    width: 680px;
    height: auto;
    background-color: #fffcf0;
    border-radius: 20px;
    z-index: 0;
    .num {
      position: absolute;
      left: 20px;
      top: 0;
      width: 54px;
      height: 66px;
      line-height: 66px;
      font-size: 30px;
      color: #fff;
      background-color: #FCB882;
    }
    .content {
      margin-left: 20px;
      margin-top: 38px;
      display: inline-block;
      width: 520px;
      .title {
        margin-bottom: 38px;
        line-height: 1.5em;
        color: #976e48;
        font-weight: bold;
        font-size: 30px;
        text-align: left;
      }
      /*background: #ff1d5e;*/
    }
    .my-radio {
      text-align: left;
      .row {
        margin-bottom: 38px;
        position: relative;
        float: left;
        display: inline-block;
        width: 100%;
        line-height: 38px;
        color: #976e48;
        font-size: 30px;
        cursor: pointer;
        -webkit-tap-highlight-color:rgba(0,0,0,0);
        .radio {
          margin-top: 7px;
          vertical-align: top;
          display: inline-block;
          width: 24px;
          height: 24px;
          background-size: 100%;
          background-repeat: no-repeat;
          &-active {
            background-image: url("../assets/images/radio-active.png");
          }
          &-normal {
            background-image: url("../assets/images/radio-normal.png");
          }
        }
        .label, .input-container {
          display: inline-block;
          /*margin-left: 5px;*/
          width: calc(100% - 24px - 15px);
        }
        .input-container {
          .text {
            float: left;
            /*background-color: #ff1d5e;*/
          }
          .input {
            padding: 0 0;
            margin-left: 10px;
            float: left;
            width: calc(100% - 4em);
          }
        }
      }
    }
  }
</style>
2. 抽象单选选项数据radioData

label为显示的选项名，value为选中这个选项的值，用status来判断是否被选中：

<template>
  <div class="hello">
    <div class="question">
      <div class="num">01</div>
      <div class="content">
        <div class="title">单选题：今年是哪一年</div>
        <div class="my-radio">
          <div v-for="item in radioData" class="row">
            <div :class="['radio', item.status ? 'radio-active' :'radio-normal']"></div>
            <div class="label">{{ item.label }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'HelloWorld',
    data () {
      return {
        radioData: [
          {
            label: '2017年',
            value: 'a',
            status: false
          },
          {
            label: '2018年',
            value: 'b',
            status: false
          },
          {
            label: '2019年',
            value: 'c',
            status: true
          },
          {
            label: '2020年',
            value: 'd',
            status: false
          },
        ]
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
  .question {
    margin-bottom: 38px;
    position: relative;
    display: inline-block;
    width: 680px;
    height: auto;
    background-color: #fffcf0;
    border-radius: 20px;
    z-index: 0;
    .num {
      position: absolute;
      left: 20px;
      top: 0;
      width: 54px;
      height: 66px;
      line-height: 66px;
      font-size: 30px;
      color: #fff;
      background-color: #FCB882;
    }
    .content {
      margin-left: 20px;
      margin-top: 38px;
      display: inline-block;
      width: 520px;
      .title {
        margin-bottom: 38px;
        line-height: 1.5em;
        color: #976e48;
        font-weight: bold;
        font-size: 30px;
        text-align: left;
      }
      /*background: #ff1d5e;*/
    }
    .my-radio {
      text-align: left;
      .row {
        margin-bottom: 38px;
        position: relative;
        float: left;
        display: inline-block;
        width: 100%;
        line-height: 38px;
        color: #976e48;
        font-size: 30px;
        cursor: pointer;
        -webkit-tap-highlight-color:rgba(0,0,0,0);
        .radio {
          margin-top: 7px;
          vertical-align: top;
          display: inline-block;
          width: 24px;
          height: 24px;
          background-size: 100%;
          background-repeat: no-repeat;
          &-active {
            background-image: url("../assets/images/radio-active.png");
          }
          &-normal {
            background-image: url("../assets/images/radio-normal.png");
          }
        }
        .label, .input-container {
          display: inline-block;
          /*margin-left: 5px;*/
          width: calc(100% - 24px - 15px);
        }
        .input-container {
          .text {
            float: left;
            /*background-color: #ff1d5e;*/
          }
          .input {
            padding: 0 0;
            margin-left: 10px;
            float: left;
            width: calc(100% - 4em);
          }
        }
      }
    }
  }
</style>
3. 加上点击事件，满足单选功能
<template>
 <div class="hello">
   <div class="question">
     <div class="num">01</div>
     <div class="content">
       <div class="title">单选题：今年是哪一年</div>
       <div class="my-radio">
         <div v-for="item in radioData" class="row" @click="change(item)">
           <div :class="['radio', item.status ? 'radio-active' :'radio-normal']"></div>
           <div class="label">{{ item.label }}</div>
         </div>
       </div>
     </div>
   </div>
 </div>
</template>

<script>
 export default {
   name: 'HelloWorld',
   data () {
     return {
       radioData: [
         {
           label: '2017年',
           value: 'a',
           status: false
         },
         {
           label: '2018年',
           value: 'b',
           status: false
         },
         {
           label: '2019年',
           value: 'c',
           status: true
         },
         {
           label: '2020年',
           value: 'd',
           status: false
         },
       ]
     }
   },
   methods: {
     change(data) {
       for (let item of this.radioData) {
         // 如果值相等，即为点击的数据，状态为active，其他normal
         item.status = data.value === item.value;
       }
     }
   }
 }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
 .question {
   margin-bottom: 38px;
   position: relative;
   display: inline-block;
   width: 680px;
   height: auto;
   background-color: #fffcf0;
   border-radius: 20px;
   z-index: 0;
   .num {
     position: absolute;
     left: 20px;
     top: 0;
     width: 54px;
     height: 66px;
     line-height: 66px;
     font-size: 30px;
     color: #fff;
     background-color: #FCB882;
   }
   .content {
     margin-left: 20px;
     margin-top: 38px;
     display: inline-block;
     width: 520px;
     .title {
       margin-bottom: 38px;
       line-height: 1.5em;
       color: #976e48;
       font-weight: bold;
       font-size: 30px;
       text-align: left;
     }
     /*background: #ff1d5e;*/
   }
   .my-radio {
     text-align: left;
     .row {
       margin-bottom: 38px;
       position: relative;
       float: left;
       display: inline-block;
       width: 100%;
       line-height: 38px;
       color: #976e48;
       font-size: 30px;
       cursor: pointer;
       -webkit-tap-highlight-color:rgba(0,0,0,0);
       .radio {
         margin-top: 7px;
         vertical-align: top;
         display: inline-block;
         width: 24px;
         height: 24px;
         background-size: 100%;
         background-repeat: no-repeat;
         &-active {
           background-image: url("../assets/images/radio-active.png");
         }
         &-normal {
           background-image: url("../assets/images/radio-normal.png");
         }
       }
       .label, .input-container {
         display: inline-block;
         /*margin-left: 5px;*/
         width: calc(100% - 24px - 15px);
       }
       .input-container {
         .text {
           float: left;
           /*background-color: #ff1d5e;*/
         }
         .input {
           padding: 0 0;
           margin-left: 10px;
           float: left;
           width: calc(100% - 4em);
         }
       }
     }
   }
 }
</style>
4.抽象整个组件

然后再把一整个单选组件独立出来，在子组件里管理数据变化，父组件传初始值进去，变化后也只需要知道结果就行了。
这里我们先假设有两道radio单选题：

4.1. 首先，新增一个组件MyRadio.vue。

  • 将写在HelloWorld.vue里的关于单选选项的HTML、CSS、以及点击选项改变状态的change方法都独立在MyRadio.vue里：
<template>
  <div class="my-radio">
    <div v-for="item in radioData" class="row" @click="change(item)">
      <div :class="['radio', item.status ? 'radio-active' :'radio-normal']"></div>
      <div class="label">{{ item.label }}</div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'my-radio',
    data() {
      return {
      }
    },
    methods: {
      change(data) {
        for (let item of this.radioData) {
          // 如果值相等，即为点击的数据，状态为active，其他normal
          item.status = data.value === item.value;
        }
      },
    }
  }
</script>

<style scoped lang="scss">
  .my-radio {
    text-align: left;
    .row {
      margin-bottom: 38px;
      position: relative;
      float: left;
      display: inline-block;
      width: 100%;
      line-height: 38px;
      color: #976e48;
      font-size: 30px;
      cursor: pointer;
      -webkit-tap-highlight-color:rgba(0,0,0,0);
      .radio {
        margin-top: 7px;
        vertical-align: top;
        display: inline-block;
        width: 24px;
        height: 24px;
        background-size: 100%;
        background-repeat: no-repeat;
        &-active {
          background-image: url("../assets/images/radio-active.png");
        }
        &-normal {
          background-image: url("../assets/images/radio-normal.png");
        }
      }
      .label, .input-container {
        display: inline-block;
        /*margin-left: 5px;*/
        width: calc(100% - 24px - 15px);
      }
      .input-container {
        .text {
          float: left;
          /*background-color: #ff1d5e;*/
        }
        .input {
          padding: 0 0;
          margin-left: 10px;
          float: left;
          width: calc(100% - 4em);
        }
      }
    }
  }
</style>
  • 由于radioData是应该从父组件传递过来的，所以加在props里，为避免以后调用组件会忘记，加上required: true：
props: {
  radioData: {
  required: true
  }
},
  • 虽然子组件是可以直接修改父组件传递过来的数据类型对象或者数组的数据，但为了更优雅更独立，不应在子组件里执行修改数据，所以change函数要修改，改为$emit父组件radioData该变化了，且把要修改的值传过去：
change(data) {
  this.$emit('radioChange', data);
},
  • 由于这里我们假设有两道单选题，但改变了其中某一道选项时，另外一道应该不会被干扰，所以在change方法还应该再传回个标识，告诉父组件是其中那道题的修改了，这个标识用radioName表示，应该从父组件传递过来，则props应该再加一个：
props: {
  radioData: {
    required: true
  },
  // 新加的
  radioName: {
    required: true
  }
},

change方法：

methods: {
  change(data) {
    this.$emit('radioChange', data, this.radioName);
  },
}

4.2. 在HelloWorld组件中调用MyRadio组件

  • 在引入之前，我们先把两道单选题的数据封装一下，命名为questionData，数据格式为数组；每一个对象对应每一道题目作为问卷数组的一个元素，对象里应有个id（这道题的id），title（题目），type（类型，这里单选为radio，之后还会有多选checkbox等等），data（选项数据）。
data () {
    return {
      questionData: [
        {
          id: 1,
          title: '单选题：今年是哪一年？',
          type: 'radio',
          data: [
            {
              label: '2017年',
              value: 'a',
              status: false
            },
            {
              label: '2018年',
              value: 'b',
              status: false
            },
            {
              label: '2019年',
              value: 'c',
              status: false
            },
            {
              label: '2020年',
              value: 'd',
              status: false
            },
          ]
        },
        {
          id: 2,
          title: '单选题：广东省的冬天会下雪吗？',
          type: 'radio',
          data: [
            {
              label: '会',
              value: 'a',
              status: false
            },
            {
              label: '不会',
              value: 'b',
              status: false
            }
          ]
        },
      ]
    }
  },
  • 引用MyRadio组件
  import MyRadio from './MyRadio'

components: {
      MyRadio
    },
  • 循环渲染出questionData里的元素，加一个判断，如果type为radio才调用MyRadio组件，并传入必填的radioData和radioName属性，radioName属性把当前这题目的index传过去作为标识，方便后续修改（this.questionData[index]）就能获取到当前题目的数据；
<template>
  <div class="hello">
    <div v-for="(item, index) in questionData" class="question">
      <div class="num">{{ index + 1 }}</div>
      <div class="content">
        <div class="title">{{ item.title }}</div>
        <template v-if="item.type === 'radio'">
          <my-radio :radioData="item.data" :radioName="index"></my-radio>
        </template>
      </div>
    </div>
  </div>
</template>

可以看到界面在这个时候已经完成了，但是由于我们没做当子组件里change函数触发了父组件的radioChange方法的调用，所以怎么点选项都没有反应，补上：

methods: {
      radioChange(data, name) {
        const question = this.questionData[name];
        for (let item of question.data) {
          item.status = data.value === item.value;
        }
      }
    }
两道题互不干扰呢

二、多选

多选和单选其实差不多，就是当点击后数据的处理不一样，我们参照着单选的MyRadio组件，写一个MyCheckbox组件：

<template>
    <div class="my-checkbox">
      <div v-for="item in checkboxData" class="row" @click="change(item)">
        <div :class="['checkbox', item.status ? 'checkbox-active' :'checkbox-normal']"></div>
        <div class="label">{{ item.label }}</div>
      </div>
    </div>
</template>

<script>
  export default {
    name: 'my-checkbox',
    props: {
      checkboxData: {
        required: true
      },
      // 新加的
      checkboxName: {
        required: true
      }
    },
    data() {
      return {
      }
    },
    methods: {
      change(data) {
        this.$emit('checkboxChange', data, this.checkboxName);
      },
    }
  }
</script>

<style scoped lang="scss">
  .my-checkbox {
    text-align: left;
    .row {
      margin-bottom: 38px;
      position: relative;
      float: left;
      display: inline-block;
      width: 100%;
      line-height: 38px;
      color: #976e48;
      font-size: 30px;
      cursor: pointer;
      -webkit-tap-highlight-color: rgba(0,0,0,0);
      .checkbox {
        margin-top: 0;
        vertical-align: top;
        display: inline-block;
        width: 30px;
        height: 32px;
        background-size: 100%;
        background-repeat: no-repeat;
        &-active {
          background-image: url("../assets/images/checkbox-active.png");
        }
        &-normal {
          background-image: url("../assets/images/checkbox-normal.png");
        }
      }
      .label, .input-container {
        display: inline-block;
        /*margin-left: 5px;*/
        width: calc(100% - 24px - 15px);
      }
      .input-container {
        .text {
          float: left;
          /*background-color: #ff1d5e;*/
        }
        .input {
          padding: 0 0;
          margin-left: 10px;
          float: left;
          width: calc(100% - 4em);
        }
      }
    }
  }
</style>
  • 在HelloWorld.vue中引用：
<template>
  <div class="hello">
    <div v-for="(item, index) in questionData" class="question">
      <div class="num">{{ index + 1 }}</div>
      <div class="content">
        <div class="title">{{ item.title }}</div>
        <template v-if="item.type === 'radio'">
          <my-radio :radioData="item.data" :radioName="index" @radioChange="radioChange"></my-radio>
        </template>
        <template v-else-if="item.type === 'checkbox'">
          <my-checkbox :checkboxData="item.data" :checkboxName="index" @checkboxChange="checkboxChange"></my-checkbox>
        </template>
      </div>
    </div>
  </div>
</template>

<script>
  import MyRadio from './MyRadio';
  import MyCheckbox from './MyCheckbox'
  export default {
    name: 'HelloWorld',
    components: {
      MyRadio, MyCheckbox
    },
    data () {
      return {
        questionData: [
          {
            id: 1,
            title: '单选题：今年是哪一年？',
            type: 'radio',
            data: [
              {
                label: '2017年',
                value: 'a',
                status: false
              },
              {
                label: '2018年',
                value: 'b',
                status: false
              },
              {
                label: '2019年',
                value: 'c',
                status: false
              },
              {
                label: '2020年',
                value: 'd',
                status: false
              },
            ]
          },
          {
            id: 2,
            title: '单选题：广东省的冬天会下雪吗？',
            type: 'radio',
            data: [
              {
                label: '会',
                value: 'a',
                status: false
              },
              {
                label: '不会',
                value: 'b',
                status: false
              }
            ]
          },
          {
            id: 3,
            title: '多选题：你喜欢的季节有？',
            type: 'checkbox',
            data: [
              {
                label: '春天',
                value: 'a',
                status: false
              },
              {
                label: '夏天',
                value: 'b',
                status: false
              },
              {
                label: '秋天',
                value: 'c',
                status: false
              },
              {
                label: '冬天',
                value: 'd',
                status: false
              }
            ]
          },
        ]
      }
    },
    methods: {
      radioChange(data, name) {
        const question = this.questionData[name];
        for (let item of question.data) {
          item.status = data.value === item.value;
        }
      },
      checkboxChange(data, name) {
        console.log(data,name)
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
  .question {
    margin-bottom: 38px;
    position: relative;
    display: inline-block;
    width: 680px;
    height: auto;
    background-color: #fffcf0;
    border-radius: 20px;
    z-index: 0;
    .num {
      position: absolute;
      left: 20px;
      top: 0;
      width: 54px;
      height: 66px;
      line-height: 66px;
      font-size: 30px;
      color: #fff;
      background-color: #FCB882;
    }
    .content {
      margin-left: 20px;
      margin-top: 38px;
      display: inline-block;
      width: 520px;
      .title {
        margin-bottom: 38px;
        line-height: 1.5em;
        color: #976e48;
        font-weight: bold;
        font-size: 30px;
        text-align: left;
      }
      /*background: #ff1d5e;*/
    }
  }
</style>
页面如图所示
  • 完善checkboxChange事件，当点击的时候，应该把当前选项改为相反状态。
checkboxChange(data, name) {
        const question = this.questionData[name];
        const index = question.data.findIndex(item => item.value === data.value);
        question.data[index].status = !question.data[index].status;
}
可以多选啦

三、填空

填空的由于要实现自动换行，所以采用的是textarea而不是input，具体怎么实现自适应高度的，可参考我的另外一篇简书文章：Vue中可根据内容自适应改变高度的textarea文本框。这里我们在那篇简书的基础上，新增以下：

  • 好看的样式
  • 最多字数限制
  • placeholder内容
  • 内容改变触发父组件的changeTextarea方法

MyTextarea.vue

<template>
  <div class="my-textarea">
    <textarea ref="textarea" :style="{'height': height}" :maxlength="maxLength" v-model="value" :placeholder="placeholder" class="textarea" ></textarea>
  </div>
</template>

<script>
  import calcTextareaHeight from '../assets/calcTextareaHeight';
  export default {
    name: 'aw-textarea',
    props: {
      // 用来辨别是哪个数据调用的
      textareaName: {
        required: true
      },
      // placeholder显示的内容
      placeholder: {
        default: '请填写'
      },
      // 最多字数
      maxLength: {
        default: 200
      }
    },
    data() {
      return {
        // textarea内容
        value: '',
        // 动态高度
        height: 0
      }
    },
    watch: {
      value() {
        if (this.$refs.textarea.value.length >= this.maxLength) {
          this.$toasted.show(`最多可以填写${this.maxLength}字哦~`, {
            position: 'top-center',
            duration: 3000
          })
        }
        this.getHeight();
        this.$emit('changeTextarea', this.value, this.textareaName);
      }
    },
    mounted() {
      this.getHeight();
    },
    methods: {
      getHeight() {
        this.height = calcTextareaHeight(this.$refs.textarea, 1, null).height;
      }
    }
  }
</script>

<style scoped lang="scss">
  .my-textarea {
    .textarea {
      padding: 0;
      position: relative;
      top: -2px;
      display: inline-block;
      width: 100%;
      height: 100px;
      line-height: 38px;
      /*height: auto;*/
      font-size: 30px;
      resize: none;
      color: #976e48;
      border-radius: 0;
      border: none;
      border-bottom: 1px solid #f8bc77;
      background-color: #fffcf0;
    }
  }
</style>

HelloWorld.vue

<template>
  <div class="hello">
    <div v-for="(item, index) in questionData" class="question">
      <div class="num">{{ index + 1 }}</div>
      <div class="content">
        <div class="title">{{ item.title }}</div>
        <template v-if="item.type === 'radio'">
          <my-radio :radioData="item.data" :radioName="index" @radioChange="radioChange"></my-radio>
        </template>
        <template v-else-if="item.type === 'checkbox'">
          <my-checkbox :checkboxData="item.data" :checkboxName="index" @checkboxChange="checkboxChange"></my-checkbox>
        </template>
        <template v-else-if="item.type === 'textarea'">
          <my-textarea :textareaName="index" style="margin-bottom: 38px;" @changeTextarea="changeTextarea"></my-textarea>
        </template>
      </div>
    </div>

  </div>
</template>

<script>
  import MyRadio from './MyRadio';
  import MyCheckbox from './MyCheckbox';
  import MyTextarea from './MyTextarea';
  export default {
    name: 'HelloWorld',
    components: {
      MyRadio, MyCheckbox, MyTextarea
    },
    data () {
      return {
        questionData: [
          {
            id: 1,
            title: '单选题：今年是哪一年？',
            type: 'radio',
            data: [
              {
                label: '2017年',
                value: 'a',
                status: false
              },
              {
                label: '2018年',
                value: 'b',
                status: false
              },
              {
                label: '2019年',
                value: 'c',
                status: false
              },
              {
                label: '2020年',
                value: 'd',
                status: false
              },
            ]
          },
          {
            id: 2,
            title: '单选题：广东省的冬天会下雪吗？',
            type: 'radio',
            data: [
              {
                label: '会',
                value: 'a',
                status: false
              },
              {
                label: '不会',
                value: 'b',
                status: false
              }
            ]
          },
          {
            id: 3,
            title: '多选题：你喜欢的季节有？',
            type: 'checkbox',
            data: [
              {
                label: '春天',
                value: 'a',
                status: false
              },
              {
                label: '夏天',
                value: 'b',
                status: false
              },
              {
                label: '秋天',
                value: 'c',
                status: false
              },
              {
                label: '冬天',
                value: 'd',
                status: false
              }
            ]
          },
          {
            id: 4,
            title: '填空题：请问还有什么疑问吗？',
            type: 'textarea',
            data: ''
          },
        ]
      }
    },
    methods: {
      radioChange(data, name) {
        const question = this.questionData[name];
        for (let item of question.data) {
          item.status = data.value === item.value;
        }
      },
      checkboxChange(data, name) {
        const question = this.questionData[name];
        const index = question.data.findIndex(item => item.value === data.value);
        question.data[index].status = !question.data[index].status;
      },
      changeTextarea(data, name) {
        const question = this.questionData[name];
        question.data = data;
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
  .question {
    margin-bottom: 38px;
    position: relative;
    display: inline-block;
    width: 680px;
    height: auto;
    background-color: #fffcf0;
    border-radius: 20px;
    z-index: 0;
    .num {
      position: absolute;
      left: 20px;
      top: 0;
      width: 54px;
      height: 66px;
      line-height: 66px;
      font-size: 30px;
      color: #fff;
      background-color: #FCB882;
    }
    .content {
      margin-left: 20px;
      margin-top: 38px;
      display: inline-block;
      width: 520px;
      .title {
        margin-bottom: 38px;
        line-height: 1.5em;
        color: #976e48;
        font-weight: bold;
        font-size: 30px;
        text-align: left;
      }
      /*background: #ff1d5e;*/
    }
  }
</style>

四、在单选中引入填空

其实就是在单选中调用MyTextarea组件，然后再处理一下当选了要填空的选项、填了内容后传值给父组件的情况。

  1. 在HelloWorld.vue中的questionData数据中的单选数据的每个选项数据里都要加个type，判断是普通单选(1)，还是要填空(2)。
questionData: [
    {
      id: 1,
      title: '单选题：今年是哪一年？',
      type: 'radio',
      data: [
        {
          type: 1,
          label: '2017年',
          value: 'a',
          status: false
        },
        {
          type: 1,
          label: '2018年',
          value: 'b',
          status: false
        },
        {
          type: 1,
          label: '2019年',
          value: 'c',
          status: false
        },
        {
          type: 1,
          label: '2020年',
          value: 'd',
          status: false
        },
        {
          type: 2,
          label: '其他',
          value: '',
          status: false
        }
      ]
    },
    {
      id: 2,
      title: '单选题：广东省的冬天会下雪吗？',
      type: 'radio',
      data: [
        {
          type: 1,
          label: '会',
          value: 'a',
          status: false
        },
        {
          type: 1,
          label: '不会',
          value: 'b',
          status: false
        }
      ]
    },
    {
      id: 3,
      title: '多选题：你喜欢的季节有？',
      type: 'checkbox',
      data: [
        {
          type: 1,
          label: '春天',
          value: 'a',
          status: false
        },
        {
          type: 1,
          label: '夏天',
          value: 'b',
          status: false
        },
        {
          type: 1,
          label: '秋天',
          value: 'c',
          status: false
        },
        {
          type: 1,
          label: '冬天',
          value: 'd',
          status: false
        }
      ]
    },
    {
      id: 4,
      title: '填空题：请问还有什么疑问吗？',
      type: 'textarea',
      data: ''
    },
  ]

2.在MyRadio中加入判断，以及为填空的样式(原来之前已经加了，只是没用)，当填空内容发生改变时候被子组件MyTextarea触发的changeTextarea方法，整个代码MyRadio.vue为：

<template>
  <div class="my-radio">
    <div v-for="(item, index) in radioData" @click="change(item)" class="row">
      <div :class="['radio', item.status ? 'radio-active' :'radio-normal']"></div>
      <div v-if="item.type === 2" class="input-container">
        <div class="text">其他</div>
        <div class="input">
          <my-textarea :textareaName="index" :placeholder="'请输入年份'" :maxLength="100" @changeTextarea="changeTextarea"></my-textarea>
        </div>
      </div>
      <div v-else class="label">{{ item.label }}</div>
    </div>
  </div>
</template>

<script>
  import MyTextarea from './MyTextarea'
  export default {
    name: 'my-radio',
    components: {
      MyTextarea
    },
    props: {
      radioData: {
        required: true
      },
      // 新加的
      radioName: {
        required: true
      }
    },
    data() {
      return {
      }
    },
    methods: {
      change(data) {
        this.$emit('radioChange', data, this.radioName);
      },
      changeTextarea(value, name) {
        const data = this.radioData.concat([])[name];
        data.value = value;
        this.$emit('radioChange', data, this.radioName);
      }
    }
  }
</script>

<style scoped lang="scss">
  .my-radio {
    text-align: left;
    .row {
      margin-bottom: 38px;
      position: relative;
      float: left;
      display: inline-block;
      width: 100%;
      line-height: 38px;
      color: #976e48;
      font-size: 30px;
      cursor: pointer;
      -webkit-tap-highlight-color:rgba(0,0,0,0);
      .radio {
        margin-top: 7px;
        vertical-align: top;
        display: inline-block;
        width: 24px;
        height: 24px;
        background-size: 100%;
        background-repeat: no-repeat;
        &-active {
          background-image: url("../assets/images/radio-active.png");
        }
        &-normal {
          background-image: url("../assets/images/radio-normal.png");
        }
      }
      .label, .input-container {
        display: inline-block;
        /*margin-left: 5px;*/
        width: calc(100% - 24px - 15px);
      }
      .input-container {
        .text {
          float: left;
          /*background-color: #ff1d5e;*/
        }
        .input {
          padding: 0 0;
          margin-left: 10px;
          float: left;
          width: calc(100% - 4em);
        }
      }
    }
  }
</style>
image.png

五、在多选中引入填空

基本同理单选中引入填空，就不详讲了。

MyCheckBox.vue

<template>
    <div class="my-checkbox">
      <div v-for="(item, index) in checkboxData" class="row" @click="change(item)">
        <div :class="['checkbox', item.status ? 'checkbox-active' :'checkbox-normal']"></div>
        <div v-if="item.type === 2" class="input-container">
          <div class="text">其他</div>
          <div class="input">
            <my-textarea :textareaName="index" :maxLength="100" @changeTextarea="changeTextarea"></my-textarea>
          </div>
        </div>
        <div v-else class="label">{{ item.label }}</div>
      </div>
    </div>
</template>

<script>
  import MyTextarea from './MyTextarea';
  export default {
    name: 'my-checkbox',
    components: {
      MyTextarea
    },
    props: {
      checkboxData: {
        required: true
      },
      // 新加的
      checkboxName: {
        required: true
      }
    },
    data() {
      return {
      }
    },
    methods: {
      change(data) {
        this.$emit('checkboxChange', data, this.checkboxName);
      },
      changeTextarea(value, name) {
        const data = this.checkboxData.concat([])[name];
        data.value = value;
        this.$emit('checkboxChange', data, this.checkboxName, true);
      }
    }
  }
</script>

<style scoped lang="scss">
  .my-checkbox {
    text-align: left;
    .row {
      margin-bottom: 38px;
      position: relative;
      float: left;
      display: inline-block;
      width: 100%;
      line-height: 38px;
      color: #976e48;
      font-size: 30px;
      cursor: pointer;
      -webkit-tap-highlight-color: rgba(0,0,0,0);
      .checkbox {
        margin-top: 0;
        vertical-align: top;
        display: inline-block;
        width: 30px;
        height: 32px;
        background-size: 100%;
        background-repeat: no-repeat;
        &-active {
          background-image: url("../assets/images/checkbox-active.png");
        }
        &-normal {
          background-image: url("../assets/images/checkbox-normal.png");
        }
      }
      .label, .input-container {
        display: inline-block;
        /*margin-left: 5px;*/
        width: calc(100% - 24px - 15px);
      }
      .input-container {
        .text {
          float: left;
          /*background-color: #ff1d5e;*/
        }
        .input {
          padding: 0 0;
          margin-left: 10px;
          float: left;
          width: calc(100% - 4em);
        }
      }
    }
  }
</style>

HelloWorld.vue：

<template>
  <div class="my-textarea">
    <textarea ref="textarea" :style="{'height': height}" :maxlength="maxLength" v-model="value" :placeholder="placeholder" class="textarea" ></textarea>
  </div>
</template>

<script>
  import calcTextareaHeight from '../assets/calcTextareaHeight';
  export default {
    name: 'aw-textarea',
    props: {
      // 用来辨别是哪个数据调用的
      textareaName: {
        required: true
      },
      // placeholder显示的内容
      placeholder: {
        default: '请填写'
      },
      // 最多字数
      maxLength: {
        default: 200
      }
    },
    data() {
      return {
        // textarea内容
        value: '',
        // 动态高度
        height: 0
      }
    },
    watch: {
      value() {
        if (this.$refs.textarea.value.length >= this.maxLength) {
          this.$toasted.show(`最多可以填写${this.maxLength}字哦~`, {
            position: 'top-center',
            duration: 3000
          })
        }
        this.getHeight();
        this.$emit('changeTextarea', this.value, this.textareaName);
      }
    },
    mounted() {
      this.getHeight();
    },
    methods: {
      getHeight() {
        this.height = calcTextareaHeight(this.$refs.textarea, 1, null).height;
      }
    }
  }
</script>

<style scoped lang="scss">
  .my-textarea {
    .textarea {
      padding: 0;
      position: relative;
      top: -2px;
      display: inline-block;
      width: 100%;
      height: 100px;
      line-height: 38px;
      /*height: auto;*/
      font-size: 30px;
      resize: none;
      color: #976e48;
      border-radius: 0;
      border: none;
      border-bottom: 1px solid #f8bc77;
      background-color: #fffcf0;
    }
  }
</style>

六、获取且组装整个问卷的答案（表单数据）

这里就从简了，没有加是否为空之类的判断。以下的改动均在HelloWorld.vue页面里：

1.新增个按钮，给按钮加上点击事件handleSubmit。

<button @click="handleSubmit" class="btn">点击提交</button>

2.这里的表单有三种类型：单选、多选、填空。与后台约定好的理想的组装的格式应该为（其他格式都能组装，重点是拿到数据和判断）：

const params = {
  "第一道题目(单选题)的id": '选中的选项的value值，或者是选了填写的输入值',
  "第二道题目(单选题)的id": '选中的选项的value值，或者是选了填写的输入值',
  "第三道题目(多选题)的id": ['选中的选项的value值', '选中的选项的value值'],
  "第四道题目(填空题)的id": '填写的输入值',
  "第五道题目(多选题)的id": ['选中的选项的value值', '选中的选项的value值']
}

3.组装数据

      handleSubmit() {
        const data = this.questionData;
        const params = {};
        for (let question of data) {
          if (question.type === 'radio') {
            const index = question.data.findIndex(item => item.status);
            if (index !== -1) {
              params[question.id] = question.data[index].value;
            } else {
              params[question.id] = '';
            }
          } else if (question.type === 'checkbox') {
            const arr = [];
            for (let item of question.data) {
              if (item.status) {
                arr.push(item.value);
              }
            }
            params[question.id] = arr;
          } else if (question.type === 'textarea') {
            params[question.id] = question.data;
          }
        }
        // console.log(data[0]);
        console.log(params);
      }
    }

  1. 啥都没填，直接按提交按钮的时候


2.很认真的如图所示填了



完整项目代码

https://github.com/LiaPig/vue-survey

相关文章

  • Vue根据后台数据动态生成的调查问卷页面

    一、单选 为了更详细的描述，将先写死一个数据，再到后面抽离成组件更方便使用和数据的交互。 1. 编写基本页面 He...

  • vue给v-model动态绑定变量的问题

    先说下需求，领导想做一个问卷调查的页面为了可以重复使用需要动态根据后台的数据动态判断当前位置该使用input、te...

  • vue element-ui动态生成table表头和数据

    element-ui动态生成表头和数据；应用场景：由于业务需要根据后台返回的数据进行动态的生成表格（表头+数据）；...

  • 前端模板引擎doT.js的使用

    前言 我们在做前端开发时，经常需要根据后台返回的json数据动态生成html并插入到页面中显示。最简单的方法就是通...

  • redis字符串String使用场景

    String 字符串 有三种类型：字符串，整数，浮点。 页面动态缓存比如生成一个动态页面，首次可以将后台数据生成页...

  • 爬虫：3. selenium

    selenium 很多页面元素的生成都是通过与后台交互生成，就是常说的动态页面。使用requests抓取动态页面返...

  • Vue.js秒杀React，成最受欢迎的开源前端框架！

    近日，Jaxenter做了一项关于前端人员的问卷调查，根据最新的问卷调查结果显示：Vue.js秒杀React，成为...

  • 根据数据和模板动态生成页面

    1、根据规则去解析链接,并且获取ID或者索引值 2、根据索引获取数据 3、根据模板渲染页面 4、底层需要实现渲染函...

  • 前端开发第学习第十四天

    表单 动态页面：问卷调查、表格之类的动态页面 form标签 在html表格中，我们知道表格的行、列和单元格都放在 ...

  • 调查问卷

    1、我们将生成调查问卷的功能放到了 评估填报里面。 点击 “生成评价问卷”按钮后 就会自动生成问卷，在问卷生成完毕...

网友评论

    本文标题：Vue根据后台数据动态生成的调查问卷页面

    本文链接：https://www.haomeiwen.com/subject/rbnqyctx.html

    延伸阅读

    深度阅读

    • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

    栏目导航

    热点阅读

    Vue

    关于我们|服务条款|联系我们|Vue根据后台数据动态生成的调查问卷页面|投稿指南|网站地图|RSS订阅|排版工具|手机版

    提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

    Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

    备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

    本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

    所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！