@mas.io/answer

安装

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]

---