diff --git a/compiled/alipay/demo/pages/Checklist/index.axml b/compiled/alipay/demo/pages/Checklist/index.axml
index 579b5778c..a67bb1b9c 100644
--- a/compiled/alipay/demo/pages/Checklist/index.axml
+++ b/compiled/alipay/demo/pages/Checklist/index.axml
@@ -1,56 +1,59 @@
+
+
+
+ className="demo-checklist-checked-icon" />
- title: {{props.item.title}}
+ title: {{ item.title }}
diff --git a/compiled/alipay/demo/pages/Checklist/index.js b/compiled/alipay/demo/pages/Checklist/index.js
index f77eb2398..01e7c6d37 100644
--- a/compiled/alipay/demo/pages/Checklist/index.js
+++ b/compiled/alipay/demo/pages/Checklist/index.js
@@ -1,78 +1,75 @@
Page({
- data: {
- value: [1, 2],
- options_1: [
- {
- value: 1,
- title: '可勾选列表项1',
- },
- {
- value: 2,
- title: '可勾选列表项2',
- },
- {
- value: 3,
- title: '可勾选列表项3',
- },
- ],
- options_2: [
- {
- value: 1,
- image:
- 'https://gw.alipayobjects.com/mdn/rms_226d75/afts/img/A*5m0ZQYhxhjEAAAAAAAAAAAAAARQnAQ',
- description: '这里是描述信息',
- title: '可勾选列表项1',
- },
- {
- value: 2,
- image:
- 'https://gw.alipayobjects.com/mdn/rms_226d75/afts/img/A*5m0ZQYhxhjEAAAAAAAAAAAAAARQnAQ',
- description: '这里是描述信息',
- title: '可勾选列表项2',
- },
- {
- value: 3,
- image:
- 'https://gw.alipayobjects.com/mdn/rms_226d75/afts/img/A*5m0ZQYhxhjEAAAAAAAAAAAAAARQnAQ',
- description: '这里是描述信息',
- title: '可勾选列表项3',
- },
- ],
- options_3: [
- {
- value: 1,
- title: '可勾选列表项1',
- },
- {
- value: 2,
- title: '禁用列表项2',
- disabled: true,
- },
- {
- value: 3,
- title: '可勾选列表项3',
- },
- ],
- options_4: [
- {
- value: 1,
- title: '可勾选列表项1',
- },
- {
- value: 2,
- title: '只读列表项2',
- readonly: true,
- },
- {
- value: 3,
- title: '可勾选列表项3',
- },
- ],
- },
- onChange(v, items, e) {
- console.log('当前选中的值为:', v, items, e);
- },
- onChangeControlled(value) {
- this.setData({ value });
- },
+ data: {
+ value: [1, 2],
+ options_1: [
+ {
+ value: 1,
+ title: '可勾选列表项1',
+ },
+ {
+ value: 2,
+ title: '可勾选列表项2',
+ },
+ {
+ value: 3,
+ title: '可勾选列表项3',
+ },
+ ],
+ options_2: [
+ {
+ value: 1,
+ image: 'https://gw.alipayobjects.com/mdn/rms_226d75/afts/img/A*5m0ZQYhxhjEAAAAAAAAAAAAAARQnAQ',
+ description: '这里是描述信息',
+ title: '可勾选列表项1',
+ },
+ {
+ value: 2,
+ image: 'https://gw.alipayobjects.com/mdn/rms_226d75/afts/img/A*5m0ZQYhxhjEAAAAAAAAAAAAAARQnAQ',
+ description: '这里是描述信息',
+ title: '可勾选列表项2',
+ },
+ {
+ value: 3,
+ image: 'https://gw.alipayobjects.com/mdn/rms_226d75/afts/img/A*5m0ZQYhxhjEAAAAAAAAAAAAAARQnAQ',
+ description: '这里是描述信息',
+ title: '可勾选列表项3',
+ },
+ ],
+ options_3: [
+ {
+ value: 1,
+ title: '可勾选列表项1',
+ },
+ {
+ value: 2,
+ title: '禁用列表项2',
+ disabled: true,
+ },
+ {
+ value: 3,
+ title: '可勾选列表项3',
+ },
+ ],
+ options_4: [
+ {
+ value: 1,
+ title: '可勾选列表项1',
+ },
+ {
+ value: 2,
+ title: '只读列表项2',
+ readonly: true,
+ },
+ {
+ value: 3,
+ title: '可勾选列表项3',
+ },
+ ],
+ },
+ onChange(v, items, e) {
+ console.log('当前选中的值为:', v, items, e);
+ },
+ onChangeControlled(value) {
+ this.setData({ value });
+ },
});
diff --git a/compiled/alipay/demo/pages/Checklist/index.acss b/compiled/alipay/demo/pages/Checklist/index.less
similarity index 100%
rename from compiled/alipay/demo/pages/Checklist/index.acss
rename to compiled/alipay/demo/pages/Checklist/index.less
diff --git a/compiled/wechat/app.json b/compiled/wechat/app.json
index 2ce08fee1..18957ed63 100644
--- a/compiled/wechat/app.json
+++ b/compiled/wechat/app.json
@@ -1,5 +1,6 @@
{
"pages": [
+ "demo/pages/Checklist/index",
"demo/pages/Modal/index",
"demo/pages/GuideTour/index",
"demo/pages/Skeleton/index",
diff --git a/compiled/wechat/demo/pages/Checklist/index.js b/compiled/wechat/demo/pages/Checklist/index.js
new file mode 100644
index 000000000..09f7afb24
--- /dev/null
+++ b/compiled/wechat/demo/pages/Checklist/index.js
@@ -0,0 +1,75 @@
+Page({
+ data: {
+ value: [1, 2],
+ options_1: [
+ {
+ value: 1,
+ title: '可勾选列表项1',
+ },
+ {
+ value: 2,
+ title: '可勾选列表项2',
+ },
+ {
+ value: 3,
+ title: '可勾选列表项3',
+ },
+ ],
+ options_2: [
+ {
+ value: 1,
+ image: 'https://gw.alipayobjects.com/mdn/rms_226d75/afts/img/A*5m0ZQYhxhjEAAAAAAAAAAAAAARQnAQ',
+ description: '这里是描述信息',
+ title: '可勾选列表项1',
+ },
+ {
+ value: 2,
+ image: 'https://gw.alipayobjects.com/mdn/rms_226d75/afts/img/A*5m0ZQYhxhjEAAAAAAAAAAAAAARQnAQ',
+ description: '这里是描述信息',
+ title: '可勾选列表项2',
+ },
+ {
+ value: 3,
+ image: 'https://gw.alipayobjects.com/mdn/rms_226d75/afts/img/A*5m0ZQYhxhjEAAAAAAAAAAAAAARQnAQ',
+ description: '这里是描述信息',
+ title: '可勾选列表项3',
+ },
+ ],
+ options_3: [
+ {
+ value: 1,
+ title: '可勾选列表项1',
+ },
+ {
+ value: 2,
+ title: '禁用列表项2',
+ disabled: true,
+ },
+ {
+ value: 3,
+ title: '可勾选列表项3',
+ },
+ ],
+ options_4: [
+ {
+ value: 1,
+ title: '可勾选列表项1',
+ },
+ {
+ value: 2,
+ title: '只读列表项2',
+ readonly: true,
+ },
+ {
+ value: 3,
+ title: '可勾选列表项3',
+ },
+ ],
+ },
+ onChange: function (v, items, e) {
+ console.log('当前选中的值为:', v, items, e);
+ },
+ onChangeControlled: function (value) {
+ this.setData({ value: value.detail[0] });
+ },
+});
diff --git a/compiled/wechat/demo/pages/Checklist/index.json b/compiled/wechat/demo/pages/Checklist/index.json
new file mode 100644
index 000000000..c7d1d61b6
--- /dev/null
+++ b/compiled/wechat/demo/pages/Checklist/index.json
@@ -0,0 +1,8 @@
+{
+ "defaultTitle": "Checklist",
+ "usingComponents": {
+ "checklist": "../../../src/Checklist/index",
+ "icon": "../../../src/Icon/index",
+ "container": "../../../src/Container/index"
+ }
+}
diff --git a/compiled/wechat/demo/pages/Checklist/index.wxml b/compiled/wechat/demo/pages/Checklist/index.wxml
new file mode 100644
index 000000000..8f05f220a
--- /dev/null
+++ b/compiled/wechat/demo/pages/Checklist/index.wxml
@@ -0,0 +1,39 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/compiled/wechat/demo/pages/Checklist/index.wxss b/compiled/wechat/demo/pages/Checklist/index.wxss
new file mode 100644
index 000000000..6a67e0cbb
--- /dev/null
+++ b/compiled/wechat/demo/pages/Checklist/index.wxss
@@ -0,0 +1,7 @@
+.demo-checklist-label {
+ font-size: 32rpx;
+ padding: 36rpx 0 16rpx 16rpx;
+}
+.demo-checklist-checked-icon {
+ font-size: 36rpx;
+}
diff --git a/compiled/wechat/src/Checklist/ChecklistItem/index.js b/compiled/wechat/src/Checklist/ChecklistItem/index.js
new file mode 100644
index 000000000..e9dc19dce
--- /dev/null
+++ b/compiled/wechat/src/Checklist/ChecklistItem/index.js
@@ -0,0 +1,11 @@
+import { useEvent } from 'functional-mini/component';
+import { mountComponent } from '../../_util/component';
+import { useComponentEvent } from '../../_util/hooks/useComponentEvent';
+import { ChecklistItemDefaultProps } from './props';
+var CheckListItem = function (props) {
+ var triggerEvent = useComponentEvent(props).triggerEvent;
+ useEvent('onChecklistItemClick', function () {
+ triggerEvent('change', props.item);
+ });
+};
+mountComponent(CheckListItem, ChecklistItemDefaultProps);
diff --git a/compiled/wechat/src/Checklist/ChecklistItem/index.json b/compiled/wechat/src/Checklist/ChecklistItem/index.json
new file mode 100644
index 000000000..3a037cbf8
--- /dev/null
+++ b/compiled/wechat/src/Checklist/ChecklistItem/index.json
@@ -0,0 +1,6 @@
+{
+ "component": true,
+ "usingComponents": {
+ "icon": "../../Icon/index"
+ }
+}
diff --git a/compiled/wechat/src/Checklist/ChecklistItem/index.wxml b/compiled/wechat/src/Checklist/ChecklistItem/index.wxml
new file mode 100644
index 000000000..58ecfa559
--- /dev/null
+++ b/compiled/wechat/src/Checklist/ChecklistItem/index.wxml
@@ -0,0 +1,21 @@
+
+
+
+
+
+
+
+
+
+
+
diff --git a/compiled/wechat/src/Checklist/ChecklistItem/index.wxss b/compiled/wechat/src/Checklist/ChecklistItem/index.wxss
new file mode 100644
index 000000000..9046ac445
--- /dev/null
+++ b/compiled/wechat/src/Checklist/ChecklistItem/index.wxss
@@ -0,0 +1,67 @@
+.ant-checklist-item {
+ background-color: #ffffff;
+}
+.ant-checklist-item-hover {
+ background-color: #eeeeee;
+}
+.ant-checklist-item-content {
+ display: flex;
+ align-items: center;
+ padding: 12px 12px;
+ color: #333333;
+}
+.ant-checklist-item-content-disabled {
+ opacity: 0.4;
+}
+.ant-checklist-item-content-box {
+ flex: 1;
+}
+.ant-checklist-item-content-box-nut {
+ display: flex;
+ align-items: center;
+}
+.ant-checklist-item-image {
+ width: 36px;
+ height: 36px;
+ border-radius: 4px;
+}
+.ant-checklist-item-text {
+ flex: 1;
+ margin-left: 12px;
+}
+.ant-checklist-item-text-no-image {
+ margin-left: 0;
+}
+.ant-checklist-item-text-title {
+ color: #333333;
+ font-size: 17px;
+ line-height: 24px;
+}
+.ant-checklist-item-text-description {
+ font-size: 13px;
+ color: #999999;
+ margin-top: 1px;
+ line-height: 18px;
+}
+.ant-checklist-item-checked-disabled {
+ opacity: 0.4;
+}
+.ant-checklist-item:last-child .ant-checklist-item-line {
+ display: none;
+}
+.ant-checklist-item-line {
+ margin-left: 12px;
+ position: relative;
+}
+.ant-checklist-item-line::after {
+ content: '';
+ position: absolute;
+ background-color: #eeeeee;
+ display: block;
+ top: auto;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ height: 1px;
+ transform: scaleY(0.5);
+}
diff --git a/compiled/wechat/src/Checklist/ChecklistItem/props.js b/compiled/wechat/src/Checklist/ChecklistItem/props.js
new file mode 100644
index 000000000..13c2ffe73
--- /dev/null
+++ b/compiled/wechat/src/Checklist/ChecklistItem/props.js
@@ -0,0 +1,4 @@
+export var ChecklistItemDefaultProps = {
+ item: null,
+ checked: false,
+};
diff --git a/compiled/wechat/src/Checklist/index.js b/compiled/wechat/src/Checklist/index.js
new file mode 100644
index 000000000..5684ae543
--- /dev/null
+++ b/compiled/wechat/src/Checklist/index.js
@@ -0,0 +1,62 @@
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+ if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+ if (ar || !(i in from)) {
+ if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+ ar[i] = from[i];
+ }
+ }
+ return to.concat(ar || Array.prototype.slice.call(from));
+};
+import { mountComponent } from '../_util/component';
+import { useComponentEvent } from '../_util/hooks/useComponentEvent';
+import { useHandleCustomEvent } from '../_util/hooks/useHandleCustomEvent';
+import { useMixState } from '../_util/hooks/useMixState';
+import { ChecklistFunctionalProps, } from './props';
+var Checkbox = function (props) {
+ var _a = useMixState(props.defaultValue, {
+ value: props.value,
+ postState: function (val) {
+ var value = val || [];
+ return {
+ valid: true,
+ value: value,
+ };
+ },
+ }), state = _a[0], _b = _a[1], isControlled = _b.isControlled, update = _b.update;
+ var triggerEventValues = useComponentEvent(props).triggerEventValues;
+ useHandleCustomEvent('onChange', function (item) {
+ var multiple = props.multiple, options = props.options;
+ var value = item.value;
+ if (multiple) {
+ var currentValue_1 = state;
+ if (currentValue_1.indexOf(value) > -1) {
+ currentValue_1 = currentValue_1.filter(function (v) { return v !== value; });
+ }
+ else {
+ currentValue_1 = __spreadArray(__spreadArray([], currentValue_1, true), [value], false);
+ }
+ if (!isControlled) {
+ update(currentValue_1);
+ }
+ triggerEventValues('change', [
+ currentValue_1,
+ options.filter(function (v) { return currentValue_1.indexOf(v.value) > -1; }),
+ ]);
+ }
+ else {
+ if (!isControlled) {
+ update(value);
+ }
+ triggerEventValues('change', [
+ value,
+ options.find(function (v) { return v.value === value; }),
+ ]);
+ }
+ });
+ return {
+ mixin: {
+ value: state,
+ },
+ };
+};
+mountComponent(Checkbox, ChecklistFunctionalProps);
diff --git a/compiled/wechat/src/Checklist/index.json b/compiled/wechat/src/Checklist/index.json
new file mode 100644
index 000000000..402e290e9
--- /dev/null
+++ b/compiled/wechat/src/Checklist/index.json
@@ -0,0 +1,7 @@
+{
+ "component": true,
+ "usingComponents": {
+ "ant-checklist-item": "./ChecklistItem/index",
+ "ant-icon": "../Icon/index"
+ }
+}
diff --git a/compiled/wechat/src/Checklist/index.md b/compiled/wechat/src/Checklist/index.md
new file mode 100644
index 000000000..6b0bbca9b
--- /dev/null
+++ b/compiled/wechat/src/Checklist/index.md
@@ -0,0 +1,45 @@
+---
+nav:
+ path: /components
+group:
+ title: 信息输入
+ order: 10
+toc: 'content'
+---
+# Checklist 可勾选列表
+
+
+
+列表的勾选操作
+## 何时使用
+- 在一组列表项中选择一个或多个
+- 可勾选列表的使用需要默认至少勾选一项,方便用户了解列表是可以勾选的
+
+## 代码示例
+
+
+## API
+| 属性 | 说明 | 类型 | 默认值 |
+| -----|-----|-----|-----|
+| className | 类名| string | - |
+| content | CheckListItem自定义内容区作用域插槽,接收item参数 | slot | - |
+| defaultValue | 默认选中数据 | string \| number \| (string \| number)[] | - |
+| icon | 自定义选中Icon插槽 | slot | - |
+| multiple | 是否支持多选 | boolean | false |
+| options | 配置每一列的选项 | [ChecklistItem](#checklistitem)[] | [] |
+| style | 样式| string | - |
+| value | 选中数据 | string \| number \| (string \| number)[] | - |
+| onChange | 选中项发生变化,触发回调 | (value: string \| number \| (string \| number)[], column: [ChecklistItem](#checklistitem) \| [ChecklistItem](#checklistitem)[], event: [Event](https://opendocs.alipay.com/mini/framework/event-object)) => void |
+
+### ChecklistItem
+
+| 参数 | 说明 | 类型 | 默认值 |
+| -----|-----|-----|-----|
+| description | 描述 | string | - |
+| disabled | 是否禁用 | boolean | false |
+| image | 图片 | string | - |
+| readonly | 是否只读 | boolean | false |
+| title | 标题 | string | - |
+| value | 值 | string | - |
+
+
diff --git a/compiled/wechat/src/Checklist/index.wxml b/compiled/wechat/src/Checklist/index.wxml
new file mode 100644
index 000000000..d3a8b7cbf
--- /dev/null
+++ b/compiled/wechat/src/Checklist/index.wxml
@@ -0,0 +1,45 @@
+
+
+
+
+
+
+
+
+
+
+ {{ item.title }}
+
+
+ {{ item.description }}
+
+
+
+
+
+
+
+
+
+
diff --git a/compiled/wechat/src/Checklist/index.wxs b/compiled/wechat/src/Checklist/index.wxs
new file mode 100644
index 000000000..983f852de
--- /dev/null
+++ b/compiled/wechat/src/Checklist/index.wxs
@@ -0,0 +1,9 @@
+function getChecked(value, values, multiple) {
+ if (!multiple) {
+ return value === values;
+ }
+ return (values || []).indexOf(value) > -1;
+}
+module.exports = {
+ getChecked: getChecked
+};
\ No newline at end of file
diff --git a/compiled/wechat/src/Checklist/index.wxss b/compiled/wechat/src/Checklist/index.wxss
new file mode 100644
index 000000000..2f000f4b5
--- /dev/null
+++ b/compiled/wechat/src/Checklist/index.wxss
@@ -0,0 +1,8 @@
+.ant-checklist-body {
+ position: relative;
+ overflow: hidden;
+}
+.ant-checklist-item-check-icon {
+ font-size: 18px;
+ color: #1677ff;
+}
diff --git a/compiled/wechat/src/Checklist/props.js b/compiled/wechat/src/Checklist/props.js
new file mode 100644
index 000000000..edb0ea72e
--- /dev/null
+++ b/compiled/wechat/src/Checklist/props.js
@@ -0,0 +1,10 @@
+export var ChecklistDefaultProps = {
+ multiple: false,
+ options: [],
+};
+export var ChecklistFunctionalProps = {
+ value: null,
+ defaultValue: null,
+ multiple: false,
+ options: [],
+};
diff --git a/compiled/wechat/src/Checklist/variable.wxss b/compiled/wechat/src/Checklist/variable.wxss
new file mode 100644
index 000000000..e69de29bb
diff --git a/config/wechat.json b/config/wechat.json
index 83a02d8e5..223b5d964 100644
--- a/config/wechat.json
+++ b/config/wechat.json
@@ -1,5 +1,6 @@
{
"pages": [
+ "pages/Checklist",
"pages/Modal",
"pages/GuideTour",
"pages/Divider",
@@ -86,6 +87,7 @@
"Avatar",
"Skeleton",
"GuideTour",
- "Modal"
+ "Modal",
+ "Checklist"
]
}
diff --git a/demo/pages/Checklist/index.axml b/demo/pages/Checklist/index.axml
deleted file mode 100644
index 579b5778c..000000000
--- a/demo/pages/Checklist/index.axml
+++ /dev/null
@@ -1,56 +0,0 @@
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- title: {{props.item.title}}
-
-
-
diff --git a/demo/pages/Checklist/index.axml.tsx b/demo/pages/Checklist/index.axml.tsx
new file mode 100644
index 000000000..2a64403cb
--- /dev/null
+++ b/demo/pages/Checklist/index.axml.tsx
@@ -0,0 +1,83 @@
+import { Page, InternalData, View } from 'tsxml';
+import Checklist from '../../../src/Checklist/index.axml';
+import Icon from '../../../src/Icon/index.axml';
+import Container from '../../../src/Container/index.axml';
+
+export default ({
+ defaultValue,
+ options_1,
+ options_2,
+ options_3,
+ options_4,
+ value,
+ item,
+}: InternalData) => (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {/* #if ALIPAY */}
+
+
+
+
+
+
+ title: {item.title}
+
+
+
+ {/* #endif */}
+
+);
diff --git a/demo/pages/Checklist/index.acss b/demo/pages/Checklist/index.less
similarity index 100%
rename from demo/pages/Checklist/index.acss
rename to demo/pages/Checklist/index.less
diff --git a/demo/pages/Checklist/index.js b/demo/pages/Checklist/index.ts
similarity index 93%
rename from demo/pages/Checklist/index.js
rename to demo/pages/Checklist/index.ts
index f77eb2398..3f7c1d890 100644
--- a/demo/pages/Checklist/index.js
+++ b/demo/pages/Checklist/index.ts
@@ -73,6 +73,12 @@ Page({
console.log('当前选中的值为:', v, items, e);
},
onChangeControlled(value) {
+ /// #if ALIPAY
this.setData({ value });
+ /// #endif
+
+ /// #if WECHAT
+ this.setData({ value: value.detail[0] });
+ /// #endif
},
});
diff --git a/src/Checklist/ChecklistItem/index.axml.tsx b/src/Checklist/ChecklistItem/index.axml.tsx
index b04868247..abfeaa79b 100644
--- a/src/Checklist/ChecklistItem/index.axml.tsx
+++ b/src/Checklist/ChecklistItem/index.axml.tsx
@@ -18,15 +18,11 @@ export default ({ item, checked }: TSXMLProps) => (
}`}
>
- {/* #if ALIPAY */}
- {/* #endif */}
{checked && (
- {/* #if ALIPAY */}
- {/* #endif */}
)}