add file
This commit is contained in:
haomingming
+36
@@ -0,0 +1,36 @@
|
||||
:: BASE_DOC ::
|
||||
|
||||
## API
|
||||
### DropdownMenu Props
|
||||
|
||||
name | type | default | description | required
|
||||
-- | -- | -- | -- | --
|
||||
close-on-click-overlay | Boolean | true | \- | N
|
||||
custom-style | String | - | `0.25.0` | N
|
||||
duration | String / Number | 200 | \- | N
|
||||
external-classes | Array | - | `['t-class', 't-class-item', 't-class-label', 't-class-icon']` | N
|
||||
show-overlay | Boolean | true | \- | N
|
||||
z-index | Number | 11600 | \- | N
|
||||
|
||||
### DropdownItem Props
|
||||
|
||||
name | type | default | description | required
|
||||
-- | -- | -- | -- | --
|
||||
custom-style | String | - | `0.25.0` | N
|
||||
disabled | Boolean | false | \- | N
|
||||
external-classes | Array | - | `['t-class','t-class-content', 't-class-column', 't-class-column-item', 't-class-column-item-label', 't-class-footer']` | N
|
||||
keys | Object | - | Typescript：`KeysType` | N
|
||||
label | String | - | \- | N
|
||||
multiple | Boolean | false | \- | N
|
||||
options | Array | [] | Typescript：`Array<DropdownOption>` `interface DropdownOption { label: string; disabled: boolean; value: DropdownValue; }`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/dropdown-item/type.ts) | N
|
||||
options-columns | String / Number | 1 | \- | N
|
||||
options-layout | String | columns | `deprecated` | N
|
||||
value | String / Number / Array | undefined | Typescript：`DropdownValue ` `type DropdownValue = string \| number \| Array<DropdownValue>;`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/dropdown-item/type.ts) | N
|
||||
default-value | String / Number / Array | undefined | uncontrolled property。Typescript：`DropdownValue ` `type DropdownValue = string \| number \| Array<DropdownValue>;`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/dropdown-item/type.ts) | N
|
||||
|
||||
### DropdownItem Events
|
||||
|
||||
name | params | description
|
||||
-- | -- | --
|
||||
change | `(value: DropdownValue)` | \-
|
||||
confirm | `(value: DropdownValue)` | \-
|
||||
+77
@@ -0,0 +1,77 @@
|
||||
---
|
||||
title: DropdownMenu 下拉菜单
|
||||
description: 菜单呈现数个并列的选项类目，用于整个页面的内容筛选，由菜单面板和菜单选项组成。
|
||||
spline: message
|
||||
isComponent: true
|
||||
---
|
||||
|
||||
<span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20lines-95%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20functions-100%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20statements-94%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20branches-83%25-blue" /></span>
|
||||
|
||||
<div style="background: #ecf2fe; display: flex; align-items: center; line-height: 20px; padding: 14px 24px; border-radius: 3px; color: #555a65">
|
||||
<svg fill="none" viewBox="0 0 16 16" width="16px" height="16px" style="margin-right: 5px">
|
||||
<path fill="#0052d9" d="M8 15A7 7 0 108 1a7 7 0 000 14zM7.4 4h1.2v1.2H7.4V4zm.1 2.5h1V12h-1V6.5z" fillOpacity="0.9"></path>
|
||||
</svg>
|
||||
该组件于 0.8.0 版本上线，请留意版本。
|
||||
</div>
|
||||
|
||||
## 引入
|
||||
|
||||
### 引入组件
|
||||
|
||||
在 `app.json` 或 `page.json` 中引入组件：
|
||||
|
||||
```json
|
||||
"usingComponents": {
|
||||
"t-dropdown-menu": "tdesign-miniprogram/dropdown-menu/dropdown-menu",
|
||||
"t-dropdown-item": "tdesign-miniprogram/dropdown-item/dropdown-item"
|
||||
}
|
||||
```
|
||||
|
||||
## 用法
|
||||
|
||||
### 单选下拉菜单
|
||||
|
||||
{{ single }}
|
||||
|
||||
### 多列下拉菜单
|
||||
|
||||
{{ multi }}
|
||||
|
||||
### 树形下拉菜单
|
||||
|
||||
{{ tree }}
|
||||
|
||||
## API
|
||||
### DropdownMenu Props
|
||||
|
||||
名称 | 类型 | 默认值 | 说明 | 必传
|
||||
-- | -- | -- | -- | --
|
||||
close-on-click-overlay | Boolean | true | 是否在点击遮罩层后关闭菜单 | N
|
||||
custom-style | String | - | `0.25.0`。自定义组件样式 | N
|
||||
duration | String / Number | 200 | 动画时长 | N
|
||||
external-classes | Array | - | 组件类名，分别用于设置 组件外层类名、菜单标签、菜单图标类名 等。`['t-class', 't-class-item', 't-class-label', 't-class-icon']` | N
|
||||
show-overlay | Boolean | true | 是否显示遮罩层 | N
|
||||
z-index | Number | 11600 | 菜单栏 z-index 层级 | N
|
||||
|
||||
### DropdownItem Props
|
||||
|
||||
名称 | 类型 | 默认值 | 说明 | 必传
|
||||
-- | -- | -- | -- | --
|
||||
custom-style | String | - | `0.25.0`。自定义组件样式 | N
|
||||
disabled | Boolean | false | 是否禁用 | N
|
||||
external-classes | Array | - | 组件类名，分别用于设置 组件外层类名、菜单列、菜单列选项、菜单列选项标签、树形菜单、树形菜单列等类名。`['t-class','t-class-content', 't-class-column', 't-class-column-item', 't-class-column-item-label', 't-class-footer']` | N
|
||||
keys | Object | - | 用来定义 value / label 在 `options` 中对应的字段别名。TS 类型：`KeysType` | N
|
||||
label | String | - | 标题 | N
|
||||
multiple | Boolean | false | 是否多选 | N
|
||||
options | Array | [] | 选项数据。TS 类型：`Array<DropdownOption>` `interface DropdownOption { label: string; disabled: boolean; value: DropdownValue; }`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/dropdown-item/type.ts) | N
|
||||
options-columns | String / Number | 1 | 选项分栏（1-3） | N
|
||||
options-layout | String | columns | 已废弃。选项排列；不再支持 tree 布局，可与 treeSelect 配合使用 | N
|
||||
value | String / Number / Array | undefined | 选中值。TS 类型：`DropdownValue ` `type DropdownValue = string \| number \| Array<DropdownValue>;`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/dropdown-item/type.ts) | N
|
||||
default-value | String / Number / Array | undefined | 选中值。非受控属性。TS 类型：`DropdownValue ` `type DropdownValue = string \| number \| Array<DropdownValue>;`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/dropdown-item/type.ts) | N
|
||||
|
||||
### DropdownItem Events
|
||||
|
||||
名称 | 参数 | 描述
|
||||
-- | -- | --
|
||||
change | `(value: DropdownValue)` | 值改变时触发
|
||||
confirm | `(value: DropdownValue)` | 点击确认时触发
|
||||
Generated
Vendored
+25
@@ -0,0 +1,25 @@
|
||||
import { RelationsOptions, SuperComponent } from '../common/src/index';
|
||||
import type { TdDropdownMenuProps } from './type';
|
||||
export interface DropdownMenuProps extends TdDropdownMenuProps {
|
||||
}
|
||||
export default class DropdownMenu extends SuperComponent {
|
||||
externalClasses: string[];
|
||||
properties: TdDropdownMenuProps;
|
||||
nodes: any;
|
||||
data: {
|
||||
prefix: string;
|
||||
classPrefix: string;
|
||||
menus: any;
|
||||
activeIdx: number;
|
||||
bottom: number;
|
||||
};
|
||||
relations: RelationsOptions;
|
||||
lifetimes: {
|
||||
ready(): void;
|
||||
};
|
||||
methods: {
|
||||
toggle(index: number): void;
|
||||
getAllItems(): void;
|
||||
handleToggle(e: WechatMiniprogram.BaseEvent): void;
|
||||
};
|
||||
}
|
||||
+87
@@ -0,0 +1,87 @@
|
||||
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
|
||||
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
||||
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
|
||||
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
|
||||
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
||||
};
|
||||
import { SuperComponent, wxComponent } from '../common/src/index';
|
||||
import config from '../common/config';
|
||||
import props from './props';
|
||||
const { prefix } = config;
|
||||
const name = `${prefix}-dropdown-menu`;
|
||||
let DropdownMenu = class DropdownMenu extends SuperComponent {
|
||||
constructor() {
|
||||
super(...arguments);
|
||||
this.externalClasses = [`${prefix}-class`, `${prefix}-class-item`, `${prefix}-class-label`, `${prefix}-class-icon`];
|
||||
this.properties = props;
|
||||
this.nodes = null;
|
||||
this.data = {
|
||||
prefix,
|
||||
classPrefix: name,
|
||||
menus: null,
|
||||
activeIdx: -1,
|
||||
bottom: 0,
|
||||
};
|
||||
this.relations = {
|
||||
'../dropdown-item/dropdown-item': {
|
||||
type: 'child',
|
||||
},
|
||||
};
|
||||
this.lifetimes = {
|
||||
ready() {
|
||||
this.getAllItems();
|
||||
},
|
||||
};
|
||||
this.methods = {
|
||||
toggle(index) {
|
||||
const { activeIdx, duration } = this.data;
|
||||
const prevItem = this.$children[activeIdx];
|
||||
const currItem = this.$children[index];
|
||||
if (currItem === null || currItem === void 0 ? void 0 : currItem.data.disabled)
|
||||
return;
|
||||
if (activeIdx !== -1) {
|
||||
prevItem.triggerEvent('close');
|
||||
prevItem.setData({
|
||||
show: false,
|
||||
}, () => {
|
||||
setTimeout(() => {
|
||||
prevItem.triggerEvent('closed');
|
||||
}, duration);
|
||||
});
|
||||
}
|
||||
if (index == null || activeIdx === index) {
|
||||
this.setData({
|
||||
activeIdx: -1,
|
||||
});
|
||||
}
|
||||
else {
|
||||
currItem.triggerEvent('open');
|
||||
this.setData({
|
||||
activeIdx: index,
|
||||
});
|
||||
currItem.setData({
|
||||
show: true,
|
||||
}, () => {
|
||||
setTimeout(() => {
|
||||
currItem.triggerEvent('opened');
|
||||
}, duration);
|
||||
});
|
||||
}
|
||||
},
|
||||
getAllItems() {
|
||||
const menus = this.$children.map(({ data }) => ({ label: data.label, disabled: data.disabled }));
|
||||
this.setData({
|
||||
menus,
|
||||
});
|
||||
},
|
||||
handleToggle(e) {
|
||||
const { index } = e.currentTarget.dataset;
|
||||
this.toggle(index);
|
||||
},
|
||||
};
|
||||
}
|
||||
};
|
||||
DropdownMenu = __decorate([
|
||||
wxComponent()
|
||||
], DropdownMenu);
|
||||
export default DropdownMenu;
|
||||
Generated
Vendored
+6
@@ -0,0 +1,6 @@
|
||||
{
|
||||
"component": true,
|
||||
"usingComponents": {
|
||||
"t-icon": "../icon/icon"
|
||||
}
|
||||
}
|
||||
Generated
Vendored
+24
@@ -0,0 +1,24 @@
|
||||
<wxs src="../common/utils.wxs" module="_" />
|
||||
|
||||
<view style="{{ customStyle }}" class="{{ classPrefix }} {{prefix}}-class" id="t-bar">
|
||||
<view
|
||||
wx:for="{{menus}}"
|
||||
wx:key="index"
|
||||
bindtap="handleToggle"
|
||||
data-index="{{index}}"
|
||||
class="{{_.cls(classPrefix + '__item', [['active', activeIdx == index], ['disabled', item.disabled]])}} {{prefix}}-class-item"
|
||||
aria-disabled="{{item.disabled}}"
|
||||
aria-role="button"
|
||||
aria-expanded="{{activeIdx === index}}"
|
||||
aria-haspopup="menu"
|
||||
>
|
||||
<view class="{{classPrefix}}__title {{prefix}}-class-label">{{item.label}}</view>
|
||||
<t-icon
|
||||
name="caret-down-small"
|
||||
t-class="{{prefix}}-class-icon"
|
||||
class="{{classPrefix}}__icon {{classPrefix}}__icon--{{activeIdx == index ? 'active' : ''}}"
|
||||
aria-hidden="{{true}}"
|
||||
/>
|
||||
</view>
|
||||
<slot />
|
||||
</view>
|
||||
Generated
Vendored
+73
@@ -0,0 +1,73 @@
|
||||
.t-float-left {
|
||||
float: left;
|
||||
}
|
||||
.t-float-right {
|
||||
float: right;
|
||||
}
|
||||
@keyframes tdesign-fade-out {
|
||||
from {
|
||||
opacity: 1;
|
||||
}
|
||||
to {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
.hotspot-expanded.relative {
|
||||
position: relative;
|
||||
}
|
||||
.hotspot-expanded::after {
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
transform: scale(1.5);
|
||||
}
|
||||
.t-dropdown-menu {
|
||||
position: relative;
|
||||
display: flex;
|
||||
height: 48px;
|
||||
background: var(--td-dropdown-menu-bg-colorm, var(--td-bg-color-block, #fff));
|
||||
}
|
||||
.t-dropdown-menu::after {
|
||||
position: absolute;
|
||||
box-sizing: border-box;
|
||||
content: ' ';
|
||||
pointer-events: none;
|
||||
right: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
border-bottom: 1px solid var(--td-border-level-1-color, #e6e6e6);
|
||||
transform: scaleY(0.5);
|
||||
}
|
||||
.t-dropdown-menu__item {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0 var(--td-spacer, 16rpx);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
color: var(--td-dropdown-menu-colorm, var(--td-font-gray-1, rgba(0, 0, 0, 0.9)));
|
||||
}
|
||||
.t-dropdown-menu__item--active {
|
||||
color: var(--td-dropdown-menu-active-colorm, var(--td-primary-color, #0052d9));
|
||||
}
|
||||
.t-dropdown-menu__item--disabled {
|
||||
color: var(--td-dropdown-menu-disabled-colorm, var(--td-font-gray-4, rgba(0, 0, 0, 0.26)));
|
||||
}
|
||||
.t-dropdown-menu__icon {
|
||||
font-size: var(--td-dropdown-menu-icon-sizem, 48rpx);
|
||||
transition: transform 240ms ease;
|
||||
}
|
||||
.t-dropdown-menu__icon--active {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
.t-dropdown-menu__title {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
font-size: var(--td-dropdown-menu-font-sizem, 28rpx);
|
||||
}
|
||||
+3
@@ -0,0 +1,3 @@
|
||||
export * from './type';
|
||||
export * from './props';
|
||||
export * from './dropdown-menu';
|
||||
+3
@@ -0,0 +1,3 @@
|
||||
export * from './type';
|
||||
export * from './props';
|
||||
export * from './dropdown-menu';
|
||||
+3
@@ -0,0 +1,3 @@
|
||||
import { TdDropdownMenuProps } from './type';
|
||||
declare const props: TdDropdownMenuProps;
|
||||
export default props;
|
||||
+26
@@ -0,0 +1,26 @@
|
||||
const props = {
|
||||
closeOnClickOverlay: {
|
||||
type: Boolean,
|
||||
value: true,
|
||||
},
|
||||
customStyle: {
|
||||
type: String,
|
||||
value: '',
|
||||
},
|
||||
duration: {
|
||||
type: null,
|
||||
value: 200,
|
||||
},
|
||||
externalClasses: {
|
||||
type: Array,
|
||||
},
|
||||
showOverlay: {
|
||||
type: Boolean,
|
||||
value: true,
|
||||
},
|
||||
zIndex: {
|
||||
type: Number,
|
||||
value: 11600,
|
||||
},
|
||||
};
|
||||
export default props;
|
||||
+26
@@ -0,0 +1,26 @@
|
||||
export interface TdDropdownMenuProps {
|
||||
closeOnClickOverlay?: {
|
||||
type: BooleanConstructor;
|
||||
value?: boolean;
|
||||
};
|
||||
customStyle?: {
|
||||
type: StringConstructor;
|
||||
value?: string;
|
||||
};
|
||||
duration?: {
|
||||
type: null;
|
||||
value?: string | number;
|
||||
};
|
||||
externalClasses?: {
|
||||
type: ArrayConstructor;
|
||||
value?: ['t-class', 't-class-item', 't-class-label', 't-class-icon'];
|
||||
};
|
||||
showOverlay?: {
|
||||
type: BooleanConstructor;
|
||||
value?: boolean;
|
||||
};
|
||||
zIndex?: {
|
||||
type: NumberConstructor;
|
||||
value?: number;
|
||||
};
|
||||
}
|
||||
+1
@@ -0,0 +1 @@
|
||||
export {};
|
||||
Reference in New Issue
Block a user