Skip to content

Commit

Permalink
Merge pull request #347 from Tencent/feat/dropdown-menu
Browse files Browse the repository at this point in the history 
Feat/dropdown menu
  • Loading branch information
@jin0209
jin0209 authored Apr 15, 2022
2 parents 130f1eb + c6572f3 commit a72f5b3
Show file tree
Hide file tree
Showing 29 changed files with 1,452 additions and 584 deletions.
1 change: 1 addition & 0 deletions example/app.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -104,6 +104,7 @@
"t-steps": "tdesign-miniprogram/steps/steps",
"t-step": "tdesign-miniprogram/steps/step-item",
"t-dropdown-menu": "tdesign-miniprogram/dropdown-menu/dropdown-menu",
"t-dropdown-item": "tdesign-miniprogram/dropdown-menu/dropdown-item",
"t-drawer": "tdesign-miniprogram/drawer/drawer",
"t-pull-down-refresh": "tdesign-miniprogram/pull-down-refresh/pull-down-refresh",
"t-skeleton": "tdesign-miniprogram/skeleton/skeleton",
Expand Down
5 changes: 2 additions & 3 deletions example/components/demo-block/index.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,6 @@
margin: @spacer-3 0 0;
line-height: @text-line-height;
font-size: @font-size-m;
opacity: .9;

&__heander {
color: @text-level-1-color;
Expand All @@ -18,7 +17,7 @@
margin: @spacer 0 @spacer-2;
font-size: @font-size-s;
white-space: pre-line;
opacity: .4;
opacity: 0.4;
}
}

Expand All @@ -28,7 +27,7 @@
&-subtitle {
font-size: @font-size-s;
margin-bottom: @spacer-2;
opacity: .4;
opacity: 0.4;
}

&-btn {
Expand Down
175 changes: 73 additions & 102 deletions example/pages/dropdown-menu/dropdown-menu.ts
View file
Original file line number Diff line number Diff line change
@@ -1,126 +1,97 @@
const emptyArr = new Array(20).fill(null);
const numberArr = [...emptyArr].map((_, i) => ({
title: `选项 ${i + 1}`,
value: `option_${i + 1}`,
}));
const chineseNumber = '一二三四五六七八九十'.split('');

const disabledArr = [...emptyArr].map((_, i) => ({
title: `选项 ${i + 1}`,
const singleSelectOptions = new Array(8).fill(null).map((_, i) => ({
label: `选项${chineseNumber[i]}`,
value: `option_${i + 1}`,
disabled: (i + 1) % 3 === 0,
disabled: false,
}));

const treeOption = [
{
title: '北京市',
value: 'beijing',
options: [
{
title: '北京市',
value: 'beijing',
options: [
{ title: '东城区', value: 'dongcheng' },
{ title: '西城区', value: 'xicheng' },
{ title: '朝阳区', value: 'chaoyang' },
{ title: '丰台区', value: 'fengtai' },
{ title: '石景山区', value: 'shijingshan' },
{ title: '海淀区', value: 'haidian' },
{ title: '门头沟区', value: 'mentougou' },
{ title: '房山区', value: 'fangshan' },
{ title: '通州区', value: 'tongzhou' },
{ title: '顺义区', value: 'shunyi' },
],
},
],
},
singleSelectOptions.push({
label: '禁用选项',
value: 'disabled',
disabled: true,
});

const doubleColumnsOptions = [
...singleSelectOptions,
{
title: '天津市',
value: 'tianjin',
options: [
{
title: '天津市',
value: 'tianjin',
options: [
{ title: '和平区', value: 'heping' },
{ title: '河东区', value: 'hedong' },
{ title: '河西区', value: 'hexi' },
],
},
],
label: '禁用选项',
value: 'disabled',
disabled: true,
},
];

const tripleColumnsOptions = [
...doubleColumnsOptions,
{
title: '河北省',
value: 'hebei',
options: [
{
title: '石家庄市',
value: 'shijiazhuang',
options: [
{ title: '长安区', value: 'changan' },
{ title: '桥西区', value: 'qiaoxi' },
{ title: '新华区', value: 'xinhua' },
{ title: '井陉矿区', value: 'jingjingkuang' },
{ title: '裕华区', value: 'yuhua' },
{ title: '藁城区', value: 'gaocheng' },
],
},
{
title: '唐山市',
value: 'tangshan',
options: [
{ title: '曹妃甸区', value: 'caofeidian' },
{ title: '丰南区', value: 'fengnan' },
{ title: '丰润区', value: 'fengrun' },
{ title: '古冶区', value: 'guye' },
{ title: '开平区', value: 'kaiping' },
{ title: '乐亭区', value: 'laoting' },
],
},
],
label: '禁用选项',
value: 'disabled',
disabled: true,
},
];

// const treeValue1 = ['tianjin', 'tianjin', 'heping'];
// const treeValue2 = ['tianjin', 'tianjin', ['hedong', 'hexi']];
const treeValue1 = [];
const treeValue2 = [];
tripleColumnsOptions.splice(8, 0, {
label: `选项${chineseNumber[8]}`,
value: `option_${9}`,
disabled: false,
});

const generateTree = function (deep = 0, count = 10, prefix?: string) {
const ans = [];

for (let i = 0; i < count; i += 1) {
const value = prefix ? `${prefix}-${i}` : `${i}`;
const rect: any = {
label: `选项${chineseNumber[i]}`,
value,
};

if (deep > 0) {
rect.options = generateTree(deep - 1, 10, value);
}
ans.push(rect);
}

return ans;
};

Page({
data: {
tab: 0,
optionsS: numberArr,
selectedS: 'option_2',
optionsM: numberArr,
selectedM: ['option_1', 'option_3'],
optionsD: disabledArr,
selectedD: 'option_1',
treeOption,
treeValue1,
treeValue2,
},
singleSelected(e) {
this.setData({
selectedS: e.detail,
});
singleSelect: {
value: 'option_3',
options: singleSelectOptions,
},
multipleSelect: {
value: ['option_1'],
options: singleSelectOptions,
},
doubleColumnsOptions,
tripleColumnsOptions,
doubleColumnsTree: {
options: generateTree(1),
value: ['0', '0-0'],
},
tripleColumnsTree: {
options: generateTree(2),
value: ['0', '0-0', ['0-0-0', '0-0-1']],
},
},
multiSelected(e) {
this.setData({
selectedM: e.detail,
});
},
tree1Selected(e) {

handleSingleSelect(e) {
this.setData({
treeValue1: e.detail,
'singleSelect.value': e.detail.value,
});
},
tree2Selected(e) {

handleMultipleSelect(e) {
this.setData({
treeValue2: e.detail,
'multipleSelect.value': e.detail.value,
});
},
switchTab(e) {

handleTreeSelect(e) {
this.setData({
tab: e.currentTarget.dataset.tab,
'doubleColumnsTree.value': e.detail.value,
});
},
});
133 changes: 63 additions & 70 deletions example/pages/dropdown-menu/dropdown-menu.wxml
View file
Original file line number Diff line number Diff line change
@@ -1,93 +1,86 @@
<view class="wrapper">
<view wx:if="{{tab==0}}">
<view class="demo">
<view class="demo-title">DropdownMenu 下拉菜单</view>
<view class="demo-desc">菜单呈现数个并列的选项类目，用于整个页面的内容筛选，由菜单面板和菜单选项组成。</view>
<t-demo title="01 类型" desc="单选下拉菜单">
<t-dropdown-menu>
<t-dropdown-item
title="单选菜单"
options="{{optionsS}}"
value="{{selectedS}}"
bindchange="singleSelected"
></t-dropdown-item>
<t-dropdown-item
title="多选菜单"
options="{{optionsM}}"
value="{{selectedM}}"
bindchange="multiSelected"
selectMode="multi"
></t-dropdown-item>
label="菜单"
options="{{singleSelect.options}}"
value="{{singleSelect.value}}"
bindchange="handleSingleSelect"
/>
<t-dropdown-item label="菜单" options="{{singleSelect.options}}" defaultValue="option_3" />
<t-dropdown-item label="菜单" options="{{singleSelect.options}}" defaultValue="option_3" />
<t-dropdown-item label="两字溢出" options="{{singleSelect.options}}" defaultValue="option_3" />
</t-dropdown-menu>
<view>单项选择选中项：{{selectedS}}</view>
<view>多项选择选中项：{{selectedM}}</view>
</view>
</t-demo>

<view wx:if="{{tab==1}}">
<t-demo desc="多选下拉菜单">
<t-dropdown-menu>
<t-dropdown-item title="禁用菜单" disabled="{{true}}"></t-dropdown-item>
<t-dropdown-item
title="禁用选项"
options="{{optionsD}}"
value="{{selectedD}}"
></t-dropdown-item>
</t-dropdown-menu>
<view>禁用了序号为3的倍数的选项。</view>
</view>

<view wx:if="{{tab==2}}">
<t-dropdown-menu>
label="单列多选"
options="{{multipleSelect.options}}"
value="{{multipleSelect.value}}"
bindchange="handleMultipleSelect"
multiple
/>
<t-dropdown-item
title="两列菜单"
label="双列多选"
optionsColumns="2"
options="{{optionsM}}"
value="{{selectedM}}"
bindchange="multiSelected"
selectMode="multi"
></t-dropdown-item>
options="{{doubleColumnsOptions}}"
defaultValue="{{['option_1', 'option_2']}}"
multiple
/>
<t-dropdown-item
title="三列菜单"
label="最多四字三列"
optionsColumns="3"
options="{{optionsM}}"
value="{{selectedM}}"
bindchange="multiSelected"
selectMode="multi"
></t-dropdown-item>
options="{{tripleColumnsOptions}}"
defaultValue="{{['option_1', 'option_2', 'option_3']}}"
multiple
/>
</t-dropdown-menu>
<view>选中项：{{selectedM}}</view>
</view>
</t-demo>

<view wx:if="{{tab==3}}">
<t-demo desc="树形下拉菜单">
<t-dropdown-menu>
<t-dropdown-item
title="单选树形选单"
label="树形双列"
optionsLayout="tree"
options="{{treeOption}}"
value="{{treeValue1}}"
bindchange="tree1Selected"
></t-dropdown-item>
options="{{doubleColumnsTree.options}}"
value="{{doubleColumnsTree.value}}"
bindchange="handleTreeSelect"
/>
<t-dropdown-item
title="多选树形选单"
label="选项最多八字树形三列"
optionsLayout="tree"
options="{{treeOption}}"
value="{{treeValue2}}"
bindchange="tree2Selected"
selectMode="multi"
></t-dropdown-item>
options="{{tripleColumnsTree.options}}"
defaultValue="{{tripleColumnsTree.value}}"
multiple
/>
</t-dropdown-menu>
<view>选中项：{{treeValue1}}</view>
<view>选中项：{{treeValue2}}</view>
</view>
</t-demo>

<view wx:if="{{tab==4}}">
<t-demo title="02 状态" desc="下拉菜单状态">
<t-dropdown-menu>
<t-dropdown-item title="自定义选单" optionsLayout="slot">
自定义内容（如按钮等）
</t-dropdown-item>
<t-dropdown-item disabled label="禁用" />
<t-dropdown-item disabled label="禁用" />
<t-dropdown-item disabled label="禁用" />
<t-dropdown-item disabled label="禁用" />
</t-dropdown-menu>
</view>
</view>

<view class="buttons">
<button class="t-button" bindtap="switchTab" data-tab="0">基础用法</button>
<button class="t-button" bindtap="switchTab" data-tab="1">禁用菜单及选项</button>
<button class="t-button" bindtap="switchTab" data-tab="2">菜单选项多列</button>
<button class="t-button" bindtap="switchTab" data-tab="3">树形选单</button>
<button class="t-button" bindtap="switchTab" data-tab="4">自定义选单</button>
<view class="spacer" style="height: 32rpx"></view>

<t-dropdown-menu>
<t-dropdown-item disabled label="禁用菜单" />
<t-dropdown-item disabled label="禁用菜单" />
<t-dropdown-item disabled label="禁用菜单" />
</t-dropdown-menu>

<view class="spacer" style="height: 32rpx"></view>

<t-dropdown-menu>
<t-dropdown-item disabled label="禁用菜单" />
<t-dropdown-item disabled label="禁用菜单" />
</t-dropdown-menu>
</t-demo>
</view>
Loading

0 comments on commit a72f5b3

Please sign in to comment.