1.0.3 • Published 3 years ago
@mas.io/answer v1.0.3
安装
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
