更新记录

1.0.0（2026-09-02） 下载此版本

• 首个版本发布
• 支持六种题型：单选 single、多选 multiple、填空 fill、评分 score、下拉选择 select、日期 date
• 支持两种模式：单页 page（全部题目平铺）与分步 step（一次一题 + 进度条）
• 必答校验、答案变化即时消错、一键重置、v-model 双向绑定
• 兼容微信 / 支付宝 / 百度 / 抖音 / 快手 / QQ 小程序、H5、App（vue），纯组件零依赖

平台兼容性

uni-app(4.87)

其他

fg-questionnaire 问卷调查组件

组件名：fg-questionnaire（uni_modules easycom 自动引入，也可手动引入） 版本：1.0.0

配置驱动的问卷调查 / 问卷表单组件：传入题目配置即可渲染，v-model 双向绑定答案对象。支持单选、多选、填空、评分、下拉选择、日期六种题型，单页与分步两种模式，内置必答校验、进度条、一键重置。纯组件零依赖，兼容微信 / 支付宝 / 百度 / 抖音 / 快手 / QQ 小程序、H5、App（vue）。

特性

• 六种题型：单选 single、多选 multiple、填空 fill（单行 / 多行）、评分 score（星星）、下拉选择 select、日期 date
• 两种模式：page 单页平铺（适合短问卷）、step 分步（一次一题 + 进度条，适合长问卷）
• 必答校验：required 题目未作答时高亮标红并提示，提交时统一校验；已答即自动消除错误提示
• v-model 双向绑定：答案对象 { [questionId]: value }，可初始化回显、实时获取
• 纯 view / text / input / textarea / picker 实现：自定义勾选样式，各端渲染一致，不依赖原生 radio / checkbox 的样式差异
• 主题色可配：选中项、评分星、主按钮一键换色
• 支持 disabled 整体禁用、答案回显（setAnswers / 初始 modelValue）、一键重置

快速使用

uni_modules 插件默认开启 easycom，页面中直接使用即可，无需注册：

<template>
    <view class="page">
        <fg-questionnaire
            v-model="answers"
            :questions="questions"
            @submit="onSubmit"
        />
    </view>
</template>

<script>
export default {
    data() {
        return {
            answers: {},
            questions: [
                {
                    id: 'gender',
                    type: 'single',
                    title: '您的性别是？',
                    required: true,
                    optionLayout: 'wrap',
                    options: ['男', '女']
                },
                {
                    id: 'like',
                    type: 'multiple',
                    title: '您喜欢哪些水果？（多选）',
                    required: true,
                    options: ['苹果', '香蕉', '橘子', '葡萄']
                },
                {
                    id: 'score',
                    type: 'score',
                    title: '请为本次服务打分',
                    required: true,
                    scoreMax: 5,
                    scoreTexts: ['非常不满意', '非常满意']
                },
                {
                    id: 'city',
                    type: 'select',
                    title: '您所在的城市？',
                    required: true,
                    options: ['北京', '上海', '广州', '深圳']
                },
                {
                    id: 'birthday',
                    type: 'date',
                    title: '您的生日？',
                    options: []
                },
                {
                    id: 'suggest',
                    type: 'fill',
                    title: '您有什么建议？',
                    rows: 3,
                    maxlength: 200,
                    placeholder: '选填，最多 200 字'
                }
            ]
        }
    },
    methods: {
        onSubmit(answers) {
            console.log('问卷答案：', answers)
            uni.showToast({ title: '提交成功', icon: 'success' })
        }
    }
}
</script>

手动引入

import FgQuestionnaire from '@/uni_modules/fg-questionnaire/components/fg-questionnaire/fg-questionnaire.vue'
export default {
    components: { FgQuestionnaire }
}

题目配置（questions 数组每一项）

属性说明

事件说明

方法说明（ref 调用）

分步模式示例

<fg-questionnaire
    v-model="answers"
    mode="step"
    :questions="questions"
    @submit="onSubmit"
/>

分步模式下：顶部显示进度条与题号，每题答完点"下一题"（必答题未作答会拦截），上一题可回改，最后一题按钮变为"提交问卷"，提交时统一校验全部必答题。

答案数据结构

{
    gender: '男',              // single：选项 value
    like: ['苹果', '香蕉'],     // multiple：选项 value 数组
    score: 5,                  // score：数字
    city: '北京',              // select：选项 value
    birthday: '2000-01-01',    // date：YYYY-MM-DD
    suggest: '希望增加夜间模式'  // fill：字符串
}

注意事项

• 组件内部使用 view / text / input / textarea / picker 等 uni-app 通用组件实现，不使用原生 radio / checkbox，保证各端渲染样式一致；请勿在 nvue 页面中使用
• picker 在 App / 小程序端为系统级选择器，H5 端为浏览器原生控件，交互体验以各端为准
• 校验与 uni.showToast 的提示文案均可通过 requiredText / toastText / toastError 定制；需要更精细的定位提示时，可监听 fail 事件自行处理
• 单选 / 多选 / 下拉选项为字符串数组时，答案即选项文本；为对象数组时取 valueKey 字段值，缺省 value 时取 labelKey 字段文本
• modelValue 与 questions 均为响应式：外部修改 modelValue 会回显；新增题目会自动补默认答案，已有答案保留