Skip to content

Commit

Permalink
feat: check list 适配微信
Browse files Browse the repository at this point in the history
  • Loading branch information
DiamondYuan committed Jan 18, 2024
1 parent 1b5dd14 commit 9da6be7
Show file tree
Hide file tree
Showing 27 changed files with 608 additions and 152 deletions.
33 changes: 18 additions & 15 deletions compiled/alipay/demo/pages/Checklist/index.axml
View file
Original file line number Diff line number Diff line change
@@ -1,56 +1,59 @@
<container title="简单布局-单选">
<checklist
defaultValue="{{1}}"
options="{{options_1}}"
data-options="{{options_1}}"
defaultValue="{{ defaultValue }}"
options="{{ options_1 }}"
data-options="{{ options_1 }}"
onChange="onChange" />
</container>

<container title="复杂布局-多选">
<checklist
defaultValue="{{[1,2]}}"
options="{{options_2}}"
defaultValue="{{ [1, 2] }}"
options="{{ options_2 }}"
multiple
onChange="onChange" />
</container>

<container title="受控模式">
<checklist
value="{{value}}"
options="{{options_2}}"
value="{{ value }}"
options="{{ options_2 }}"
multiple
onChange="onChangeControlled" />
</container>

<container title="禁用状态">
<checklist
defaultValue="{{[2]}}"
options="{{options_3}}"
defaultValue="{{ [2] }}"
options="{{ options_3 }}"
multiple
onChange="onChange" />
</container>

<container title="只读状态">
<checklist
defaultValue="{{[2]}}"
options="{{options_4}}"
defaultValue="{{ [2] }}"
options="{{ options_4 }}"
multiple
onChange="onChange" />
</container>

<container title="自定义勾选图标&&组件内容">
<checklist
defaultValue="{{[2]}}"
options="{{options_3}}"
defaultValue="{{ [2] }}"
options="{{ options_3 }}"
multiple
onChange="onChange">
<view slot="icon">
<icon
style="color: red"
type="LikeOutline"
class="demo-checklist-checked-icon" />
className="demo-checklist-checked-icon" />
</view>
<view
slot="content"
slot-scope="props">
title: {{props.item.title}}
title: {{ item.title }}
</view>
</checklist>
</container>
149 changes: 73 additions & 76 deletions compiled/alipay/demo/pages/Checklist/index.js
View file
Original file line number Diff line number Diff line change
@@ -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 });
},
});
0 ...ed/alipay/demo/pages/Checklist/index.acss → ...ed/alipay/demo/pages/Checklist/index.less
View file
File renamed without changes.
1 change: 1 addition & 0 deletions compiled/wechat/app.json
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
{
"pages": [
"demo/pages/Checklist/index",
"demo/pages/Modal/index",
"demo/pages/GuideTour/index",
"demo/pages/Skeleton/index",
Expand Down
75 changes: 75 additions & 0 deletions compiled/wechat/demo/pages/Checklist/index.js
View file
Original file line number Diff line number Diff line change
@@ -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] });
},
});
8 changes: 8 additions & 0 deletions compiled/wechat/demo/pages/Checklist/index.json
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
{
"defaultTitle": "Checklist",
"usingComponents": {
"checklist": "../../../src/Checklist/index",
"icon": "../../../src/Icon/index",
"container": "../../../src/Container/index"
}
}
39 changes: 39 additions & 0 deletions compiled/wechat/demo/pages/Checklist/index.wxml
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
<container title="简单布局-单选">
<checklist
defaultValue="{{ defaultValue }}"
options="{{ options_1 }}"
data-options="{{ options_1 }}"
bind:change="onChange" />
</container>

<container title="复杂布局-多选">
<checklist
defaultValue="{{ [1, 2] }}"
options="{{ options_2 }}"
multiple
bind:change="onChange" />
</container>

<container title="受控模式">
<checklist
value="{{ value }}"
options="{{ options_2 }}"
multiple
bind:change="onChangeControlled" />
</container>

<container title="禁用状态">
<checklist
defaultValue="{{ [2] }}"
options="{{ options_3 }}"
multiple
bind:change="onChange" />
</container>

<container title="只读状态">
<checklist
defaultValue="{{ [2] }}"
options="{{ options_4 }}"
multiple
bind:change="onChange" />
</container>
7 changes: 7 additions & 0 deletions compiled/wechat/demo/pages/Checklist/index.wxss
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
.demo-checklist-label {
font-size: 32rpx;
padding: 36rpx 0 16rpx 16rpx;
}
.demo-checklist-checked-icon {
font-size: 36rpx;
}
11 changes: 11 additions & 0 deletions compiled/wechat/src/Checklist/ChecklistItem/index.js
View file
Original file line number Diff line number Diff line change
@@ -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);
6 changes: 6 additions & 0 deletions compiled/wechat/src/Checklist/ChecklistItem/index.json
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
{
"component": true,
"usingComponents": {
"icon": "../../Icon/index"
}
}
Loading

0 comments on commit 9da6be7

Please sign in to comment.