安装

tnpm install --save @alipay/answer

组件介绍

行业小程序答题组件，支持两种答题模式。 轻量单选模式：只有单选题，没有上下一题按钮，点击答案后立即生效，并触发相关事件。 普通模式：支持单选和多选，必有下一题按钮，上一题按钮可选，答案不支持即时校验，选中后可以修改，完成答卷后发送全部答案统一校验。

参数说明

公共属性

属性 | 必填 | 参数类型 | 参数说明 | 默认值 | 示例 --|:--:|:--:|:--:|:--: | :-: mode | 否 | 'lightSingle' | 'normal' | 有两种模式：'lightSingle'轻量单选模式和'normal'普通模式 | 'lightSingle' | -- questions | 是 | Array | 题目数据。（lightSingle模式可省略multi字段） | [] | [{"id":"1", "multi": false, "title":"在晚间举行的各种正式活动的场合里，女性应该选择的服饰是","options":[{"id":"1-1","text":"小礼服"},{"id":"1-2","text":"大礼服"},{"id":"1-3","text":"职业套装"}]}] className | 否 | String | 组件容器自定义样式名 | '' | -- showIndex | 否 | Boolean | 是否显示题号索引 | true | -- showOptionPrefix | 否 | Boolean | 是否显示选项前面的字母前缀 | true | -- onNext | 是 | Function | 点击答案后的事件。params: (option: string | string[], index: number, nextFn: Function): {answer: string, next: boolean}; | null | -- onEnd | 是 | Function | 所有题目完成，并且延时也完成后发起的事件。params: (selected: (string | string[])[])。selected数组是用户选取的所有题目的选项id，它的元素，单选为string，多选为string[] | null | --

lightSingle轻量单选模式

专有属性如下：

属性 | 必填 | 参数类型 | 参数说明 | 默认值 | 示例 --|:--:|:--:|:--:|:--: | :-: showAnswer | 否 | Boolean | 是否展示正确答案 | flase | -- showAnimation | 否 | Boolean | 是否显示动画效果 | true | -- delay | 否 | Number | onNext返回正确答案后，到切入下一题的时间（向用户展示答案的时间） | 1500 | --

onNext详解

入参

option: 选中答案选项的id index: 题目索引 nextFn: 进入下一题的函数

返回值

{ answer: 正确答案选项的id next: 是否进入下一题 }

当返回的next为true时，会在设定的delay时间后，自动进入到下一题。 当返回的next为false时，不会自动进入到下一题。是否进入到下一题，由使用方调用nextFn方法控制。 onNext同步和异步函数都支持，如

async onNext(option, index, nextFn) {
  await something();
  return {
    answer: 'xxx',
    next: false,
  };
  await something();
  nextFn();// 手动控制进入下一题
}

onNext(option, index, nextFn) {
  return {
    answer: 'xxx',
    next: true,
  };
}

normal普通模式

专有属性如下：

属性 | 必填 | 参数类型 | 参数说明 | 默认值 | 示例 --|:--:|:--:|:--:|:--: | :-: showPrevBtn | 否 | Boolean | 是否显示上一题按钮 | true | -- nextBtnText | 否 | Array | 按钮文本 | ['上一题', '下一题', '提交答题'] | --

onNext详解

普通模式的onNext并不是必须的，大多数情况都可以不写。 如果要使用，除了返回值不用带answer以外，其他和lightSingle模式一致。

Slot

属性 | 说明 | 是否必传 --|:--:|:--: header | 头部插槽 | 否 title | 自定义题目展示插槽。slot-scope可接收当前的题目数据：question | 否 option | 自定义选项展示插槽。slot-scope可接收当前的选项数据：option | 否 footer | 底部插槽 | 否

在小程序中使用

{
  "usingComponents": {
    "adc-answer": "@alipay/answer/es/index"
  }
}

在 page.axml 中引用组件

<!-- 页面使用方式 -->
<adc-answer questions="{{questions}}"
  onNext="onNext"
  onEnd="onEnd">
</adc-answer>

Badges

[![install size][install-size-image]][install-size-url]