更新记录

2022.0608.0000（2022-06-08） 下载此版本

1. 新增 props.selectedColor，选中时颜色配置
2. 新增 props.onExceed，多选超出时钩子（默认会 toast 提示）

2022.0520.0000（2022-05-20） 下载此版本

• 初建

平台兼容性

zy-questionnaire

问卷生成

属性

interface IItemOption {
    label: string;
    value: string;
}

interface IItem {
    question: string;
    options: IItemOption[];
    multiple?: boolean;
    multipleLimit?: number;
}

插槽 slots

事件

样式说明

未使用 scoped, 通过顶层样式名.zy-questionnaire就可以进行调整。

使用案例

例1

<script setup lang="ts">
import ZyQuestionnaire from '@/uni_modules/zy-questionnaire/components/zy-questionnaire/zy-questionnaire.vue';
const props = {
    items: [
        {
            question: '问题1？（单选）',
            options: [{ label: '问1答1', value: '1-1' }, { label: '问1答2', value: '1-2' }, { label: '问1答3', value: '1-3' }, { label: '问1答4', value: '1-4' }]
        },
        {
            question: '问题2？（多选）',
            options: [
                { label: '问2答1', value: '2-1' },
                { label: '问2答2', value: '2-2' },
                { label: '问2答3', value: '2-3' },
                { label: '问2答4', value: '2-4' },
                { label: '问2答5', value: '2-5' },
                { label: '问2答6', value: '2-6' },
                { label: '问2答7', value: '2-7' }
            ],
            multiple: true
        },
        {
            question: '问题3？（多选：最多3项）',
            options: [
                { label: '问3答1', value: '3-1' },
                { label: '问3答2', value: '3-2' },
                { label: '问3答3', value: '3-3' },
                { label: '问3答4', value: '3-4' },
                { label: '问3答5', value: '3-5' },
                { label: '问3答6', value: '3-6' },
                { label: '问3答7', value: '3-7' }
            ],
            multipleLimit: 3
        }
    ]
};
const handleSubmit = (answers: string[]) => {
    console.log(answers)
}
</script>

<template>
    <ZyQuestionnaire v-bind="props" @submit="handleSubmit" />
</template>

例2 (default)

默认插槽替换后，选项操作就需要自行处理了

<ZyQuestionnaire v-bind="props" @submit="handleSubmit">
    <template #default="scope">
        <view>问题: {{ scope.question }}</view>
        <view>选项: {{ scope.options }}</view>
        <hr />
    </template>
</ZyQuestionnaire>

例3 (question)

<ZyQuestionnaire v-bind="props" @submit="handleSubmit">
    <template #question="scope">
        <view>问题插槽: {{ scope.index }} - {{ scope.question }}</view>
    </template>
</ZyQuestionnaire>

例4 (option)

<ZyQuestionnaire v-bind="props" @submit="handleSubmit">
    <template #option="scope">
        {{ scope.selected }}
        <view>选项插槽: {{ scope.index }} - {{ scope.option }}</view>
    </template>
</ZyQuestionnaire>

例5 (action)

<ZyQuestionnaire v-bind="props" @submit="handleSubmit">
    <template #action="scope">
        action 插槽：{{ scope.answers }}
    </template>
</ZyQuestionnaire>

意见反馈

有任何问题和建议，请通过评论进行留言。