vue实现问卷星

Vue实现问卷星功能

使用Vue可以快速构建类似问卷星的在线问卷系统，主要功能包括题目编辑、表单提交和数据统计。

安装Vue和相关依赖

需要安装Vue核心库和UI组件库：

npm install vue vue-router element-ui

创建问卷组件结构

<template>
  <div class="survey-container">
    <h2>{{ surveyTitle }}</h2>
    <div v-for="(question, index) in questions" :key="index">
      <question-item 
        :question="question"
        @update="updateQuestion(index, $event)"
      />
    </div>
    <button @click="addQuestion">添加问题</button>
    <button @click="submitSurvey">提交问卷</button>
  </div>
</template>

实现问题组件

<template>
  <div class="question-item">
    <el-input v-model="localQuestion.title" placeholder="输入问题标题"/>
    <el-select v-model="localQuestion.type" placeholder="选择问题类型">
      <el-option label="单选" value="radio"/>
      <el-option label="多选" value="checkbox"/>
      <el-option label="文本" value="text"/>
    </el-select>

    <div v-if="localQuestion.type !== 'text'">
      <div v-for="(option, idx) in localQuestion.options" :key="idx">
        <el-input v-model="localQuestion.options[idx]" placeholder="输入选项"/>
        <el-button @click="removeOption(idx)">删除</el-button>
      </div>
      <el-button @click="addOption">添加选项</el-button>
    </div>
  </div>
</template>

表单数据管理

export default {
  data() {
    return {
      surveyTitle: '问卷标题',
      questions: [
        {
          title: '',
          type: 'radio',
          options: ['选项1', '选项2'],
          required: false
        }
      ]
    }
  },
  methods: {
    addQuestion() {
      this.questions.push({
        title: '',
        type: 'radio',
        options: ['新选项'],
        required: false
      })
    },
    updateQuestion(index, question) {
      this.questions.splice(index, 1, question)
    },
    submitSurvey() {
      // 提交逻辑
    }
  }
}

实现表单验证

methods: {
  validateForm() {
    return this.questions.every(q => {
      if (q.required && !q.title.trim()) return false
      if (q.type !== 'text' && q.options.some(opt => !opt.trim())) return false
      return true
    })
  },
  submitSurvey() {
    if (!this.validateForm()) {
      this.$message.error('请完善所有必填项')
      return
    }
    // 提交数据
  }
}

添加路由功能

const routes = [
  { path: '/create', component: SurveyCreator },
  { path: '/answer/:id', component: SurveyAnswer },
  { path: '/stats/:id', component: SurveyStats }
]

存储问卷数据

可以使用Vuex管理全局状态或直接对接后端API：

// 使用axios提交数据
axios.post('/api/surveys', {
  title: this.surveyTitle,
  questions: this.questions
})

响应式设计

添加CSS媒体查询确保移动端适配：

@media (max-width: 768px) {
  .survey-container {
    padding: 10px;
  }
  .question-item {
    margin-bottom: 20px;
  }
}

这个实现包含了问卷系统的基本功能，可以根据需求进一步扩展如逻辑跳题、问卷模板、数据分析等功能。