问卷组件库

一个基于 Vue 3 的问卷系统组件库，提供完整的问卷设计、填写和展示功能。

特性

• 🎨 可视化问卷设计器
• 📝 多种题型支持（单选、多选、填空、评分等）
• 📱 响应式设计，支持移动端
• 🔧 高度可定制化
• 🚀 开箱即用

安装

npm install questionnaire-vue-components
# 或
yarn add questionnaire-vue-components
# 或
pnpm add questionnaire-vue-components

快速开始

1. 引入组件

import { QuestionnaireDesigner, QuestionnaireRenderer, QuestionnaireViewer } from 'questionnaire-vue-components'
import 'questionnaire-vue-components/dist/style.css'

// 在 Vue 应用中注册
app.component('QuestionnaireDesigner', QuestionnaireDesigner)
app.component('QuestionnaireRenderer', QuestionnaireRenderer)
app.component('QuestionnaireViewer', QuestionnaireViewer)

2. 使用组件

问卷设计器

<template>
  <QuestionnaireDesigner 
    v-model="questionnaireData"
    @save="handleSave"
  />
</template>

<script setup>
import { ref } from 'vue'

const questionnaireData = ref({
  title: '我的问卷',
  questions: []
})

const handleSave = (data) => {
  console.log('保存问卷数据:', data)
}
</script>

问卷填写器

<template>
  <QuestionnaireRenderer 
    :questionnaire="questionnaireData"
    @submit="handleSubmit"
  />
</template>

<script setup>
const questionnaireData = {
  title: '用户调研问卷',
  questions: [
    {
      id: '1',
      type: 'radio',
      title: '您的年龄段？',
      options: ['18-25', '26-35', '36-45', '46岁以上']
    }
  ]
}

const handleSubmit = (answers) => {
  console.log('用户答案:', answers)
}
</script>

问卷查看器（只读）

<template>
  <QuestionnaireViewer 
    :questionnaire="questionnaireData"
    :answers="userAnswers"
  />
</template>

<script setup>
const questionnaireData = { /* 问卷数据 */ }
const userAnswers = { /* 用户答案 */ }
</script>

组件 API

QuestionnaireDesigner

问卷设计器组件，用于创建和编辑问卷。

Props

| 参数 | 类型 | 默认值 | 说明 | |------|------|--------|------| | modelValue | Object | {} | 问卷数据（双向绑定） | | readonly | Boolean | false | 是否只读模式 |

Events

| 事件名 | 参数 | 说明 | |--------|------|------| | update:modelValue | (data: Object) | 问卷数据更新 | | save | (data: Object) | 保存问卷 | | preview | (data: Object) | 预览问卷 |

QuestionnaireRenderer

问卷填写器组件，用于用户填写问卷。

Props

| 参数 | 类型 | 默认值 | 说明 | |------|------|--------|------| | questionnaire | Object | {} | 问卷数据 | | answers | Object | {} | 初始答案 | | readonly | Boolean | false | 是否只读模式 |

Events

| 事件名 | 参数 | 说明 | |--------|------|------| | submit | (answers: Object) | 提交答案 | | change | (answers: Object) | 答案变化 |

QuestionnaireViewer

问卷查看器组件，用于展示问卷和答案（只读）。

Props

| 参数 | 类型 | 默认值 | 说明 | |------|------|--------|------| | questionnaire | Object | {} | 问卷数据 | | answers | Object | {} | 用户答案 | | showStatistics | Boolean | false | 是否显示统计信息 |

支持的题型

• 单选题 (radio) - 单项选择
• 多选题 (checkbox) - 多项选择
• 填空题 (input) - 文本输入
• 多行文本 (textarea) - 长文本输入
• 评分题 (rate) - 星级评分
• 量表题 (scale) - 数值量表
• 排序题 (sort) - 选项排序
• 矩阵题 (matrix) - 矩阵选择
• 文件上传 (upload) - 文件上传
• 日期选择 (date) - 日期时间
• 地址选择 (address) - 地区选择
• 手机号 (phone) - 手机号输入
• 身份证 (idcard) - 身份证输入

许可证

MIT License