limqsh/quinn-accounts
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

project init & fix ui

Browse Source
This commit is contained in:
limqhz
2023-01-06 14:24:11 +08:00
parent abc4f65a8e
commit ac9b479805
866 changed files with 39916 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
miniprogram_npm/tdesign-miniprogram/dropdown-menu/README.en-US.md Normal file
View File

@@ -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-menu/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-menu/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-menu/type.ts) | N
### DropdownItem Events
name | params | description
-- | -- | --
change | `(value: DropdownValue)` | \-
confirm | `(value: DropdownValue)` | \-

85
miniprogram_npm/tdesign-miniprogram/dropdown-menu/README.md Normal file
View File

@@ -0,0 +1,85 @@
---
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-menu/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
### DropdownMenu Function
方法名 | 说明 | 参数 | 返回值
--|--|--|--
toggle | 切换下拉菜单的展示状态，传入索引值则切换对应菜单，不传值则关闭当前菜单 | index?: number | `void`
> 通过 `this.selectComponent` 获取组件示例，调用即可
### 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-menu/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-menu/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-menu/type.ts) | N
### DropdownItem Events
名称 | 参数 | 描述
-- | -- | --
change | `(value: DropdownValue)` | 值改变时触发
confirm | `(value: DropdownValue)` | 点击确认时触发

3
miniprogram_npm/tdesign-miniprogram/dropdown-menu/dropdown-item-props.d.ts vendored Normal file
View File

@@ -0,0 +1,3 @@
import { TdDropdownItemProps } from './type';
declare const props: TdDropdownItemProps;
export default props;

45
miniprogram_npm/tdesign-miniprogram/dropdown-menu/dropdown-item-props.js Normal file
View File

@@ -0,0 +1,45 @@
const props = {
customStyle: {
type: String,
value: '',
},
disabled: {
type: Boolean,
value: false,
},
externalClasses: {
type: Array,
},
keys: {
type: Object,
},
label: {
type: String,
value: '',
},
multiple: {
type: Boolean,
value: false,
},
options: {
type: Array,
value: [],
},
optionsColumns: {
type: null,
value: 1,
},
optionsLayout: {
type: String,
value: 'columns',
},
value: {
type: null,
value: undefined,
},
defaultValue: {
type: null,
value: undefined,
},
};
export default props;

89
miniprogram_npm/tdesign-miniprogram/dropdown-menu/dropdown-item.d.ts vendored Normal file
View File

@@ -0,0 +1,89 @@
import { RelationsOptions, SuperComponent } from '../common/src/index';
import type { TdDropdownItemProps } from './type';
export interface DropdownItemProps extends TdDropdownItemProps {
}
export default class DropdownMenuItem extends SuperComponent {
externalClasses: string[];
properties: {
customStyle?: {
type: StringConstructor;
value?: string;
};
disabled?: {
type: BooleanConstructor;
value?: boolean;
};
externalClasses?: {
type: ArrayConstructor;
value?: ["t-class", "t-class-content", "t-class-column", "t-class-column-item", "t-class-column-item-label", "t-class-footer"];
};
keys?: {
type: ObjectConstructor;
value?: import("../common/common").KeysType;
};
label?: {
type: StringConstructor;
value?: string;
};
multiple?: {
type: BooleanConstructor;
value?: boolean;
};
options?: {
type: ArrayConstructor;
value?: import("./type").DropdownOption[];
};
optionsColumns?: {
type: null;
value?: string | number;
};
optionsLayout?: {
type: StringConstructor;
value?: string;
};
value?: {
type: null;
value?: import("./type").DropdownValue;
};
defaultValue?: {
type: null;
value?: import("./type").DropdownValue;
};
};
data: {
prefix: string;
classPrefix: string;
show: boolean;
top: number;
maskHeight: number;
initValue: any;
hasChanged: boolean;
duration: string | number;
zIndex: number;
overlay: boolean;
labelAlias: string;
valueAlias: string;
};
parent: any;
relations: RelationsOptions;
controlledProps: {
key: string;
event: string;
}[];
observers: {
keys(obj: any): void;
value(v: any): void;
label(): void;
show(visible: any): void;
};
methods: {
closeDropdown(): void;
getParentBottom(parent: any, cb: any): void;
handleTreeClick(e: any): void;
handleRadioChange(e: any): void;
handleMaskClick(): void;
handleReset(): void;
handleConfirm(): void;
onLeaved(): void;
};
}

149
miniprogram_npm/tdesign-miniprogram/dropdown-menu/dropdown-item.js Normal file
View File

@@ -0,0 +1,149 @@
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 './dropdown-item-props';
import menuProps from './props';
const { prefix } = config;
const name = `${prefix}-dropdown-item`;
let DropdownMenuItem = class DropdownMenuItem extends SuperComponent {
constructor() {
super(...arguments);
this.externalClasses = [
`${prefix}-class`,
`${prefix}-class-content`,
`${prefix}-class-column`,
`${prefix}-class-column-item`,
`${prefix}-class-column-item-label`,
`${prefix}-class-footer`,
];
this.properties = Object.assign({}, props);
this.data = {
prefix,
classPrefix: name,
show: false,
top: 0,
maskHeight: 0,
initValue: null,
hasChanged: false,
duration: menuProps.duration.value,
zIndex: menuProps.zIndex.value,
overlay: menuProps.showOverlay.value,
labelAlias: 'label',
valueAlias: 'value',
};
this.parent = null;
this.relations = {
'./dropdown-menu': {
type: 'parent',
linked(target) {
const { zIndex, duration, showOverlay } = target.properties;
this.parent = target;
this.setData({
zIndex,
duration,
showOverlay,
});
},
},
};
this.controlledProps = [
{
key: 'value',
event: 'change',
},
];
this.observers = {
keys(obj) {
this.setData({
labelAlias: obj.label || 'label',
valueAlias: obj.value || 'value',
});
},
value(v) {
const { options, labelAlias, valueAlias } = this.data;
if (this.data.multiple) {
if (!Array.isArray(v))
throw TypeError('应传入数组类型的 value');
}
const target = options.find((item) => item[valueAlias] === v);
if (target) {
this.setData({
label: target[labelAlias],
});
}
},
label() {
var _a;
(_a = this.parent) === null || _a === void 0 ? void 0 : _a.getAllItems();
},
show(visible) {
if (visible) {
this.getParentBottom(this.parent, () => {
this.setData({ wrapperVisible: true });
});
}
},
};
this.methods = {
closeDropdown() {
var _a;
(_a = this.parent) === null || _a === void 0 ? void 0 : _a.setData({
activeIdx: -1,
});
this.setData({
show: false,
});
},
getParentBottom(parent, cb) {
const query = wx.createSelectorQuery().in(parent);
query
.select(`#${prefix}-bar`)
.boundingClientRect((res) => {
this.setData({
top: res.bottom,
maskHeight: res.top,
}, cb);
})
.exec();
},
handleTreeClick(e) {
const { level, value: itemValue } = e.currentTarget.dataset;
const { value } = this.data;
value[level] = itemValue;
this._trigger('change', { value });
},
handleRadioChange(e) {
const { value } = e.detail;
this._trigger('change', { value });
if (!this.data.multiple) {
this.closeDropdown();
}
},
handleMaskClick() {
var _a;
if ((_a = this.parent) === null || _a === void 0 ? void 0 : _a.properties.closeOnClickOverlay) {
this.closeDropdown();
}
},
handleReset() {
this._trigger('change', { value: [] });
},
handleConfirm() {
this._trigger('confirm', { value: this.data.value });
this.closeDropdown();
},
onLeaved() {
this.setData({ wrapperVisible: false });
},
};
}
};
DropdownMenuItem = __decorate([
wxComponent()
], DropdownMenuItem);
export default DropdownMenuItem;

11
miniprogram_npm/tdesign-miniprogram/dropdown-menu/dropdown-item.json Normal file
View File

@@ -0,0 +1,11 @@
{
"component": true,
"usingComponents": {
"t-button": "../button/button",
"t-radio": "../radio/radio",
"t-radio-group": "../radio-group/radio-group",
"t-checkbox": "../checkbox/checkbox",
"t-checkbox-group": "../checkbox-group/checkbox-group",
"t-popup": "../popup/popup"
}
}

86
miniprogram_npm/tdesign-miniprogram/dropdown-menu/dropdown-item.wxml Normal file
View File

@@ -0,0 +1,86 @@
<wxs module="this" src="./util.wxs" />
<wxs module="_" src="../common/utils.wxs" />
<view
wx:if="{{wrapperVisible}}"
class="{{classPrefix}} {{prefix}}-class"
style="{{this.getDropdownItemStyles(top, zIndex, customStyle)}}"
>
<t-popup
visible="{{show}}"
z-index="{{zIndex + 1}}"
duration="{{duration}}"
show-overlay="{{showOverlay}}"
custom-style="position: absolute;"
overlayProps="{{ { customStyle: 'position: absolute' } }}"
bind:leaved="onLeaved"
bind:visible-change="handleMaskClick"
class="{{classPrefix}}__popup-host"
t-class-content="{{classPrefix}}__content {{prefix}}-class-content"
>
<view class="{{classPrefix}}__body">
<!-- 单选列表 -->
<t-radio-group
wx:if="{{!multiple}}"
class="{{classPrefix}}__radio {{prefix}}-class-column"
t-class="{{classPrefix}}__radio-group"
value="{{value}}"
bind:change="handleRadioChange"
>
<t-radio
wx:for="{{options}}"
wx:key="index"
tabindex="0"
class="{{classPrefix}}__radio-item {{prefix}}-class-column-item"
icon="line"
align="right"
t-class="radio"
t-class-label="{{prefix}}-class-column-item-label"
value="{{item[valueAlias]}}"
label="{{item[labelAlias]}}"
disabled="{{item.disabled}}"
></t-radio>
</t-radio-group>
<!-- 多选列表 -->
<t-checkbox-group
wx:else
class="{{classPrefix}}__checkbox {{prefix}}-class-column"
t-class="{{classPrefix}}__checkbox-group"
custom-style="grid-template-columns: repeat({{optionsColumns}}, 1fr)"
value="{{value}}"
bind:change="handleRadioChange"
>
<block wx:for="{{options}}" wx:key="index">
<t-checkbox
tabindex="0"
class="{{classPrefix}}__checkbox-item {{prefix}}-class-column-item"
theme="tag"
value="{{item[valueAlias]}}"
label="{{item[labelAlias]}}"
disabled="{{item.disabled}}"
></t-checkbox>
</block>
</t-checkbox-group>
<slot />
</view>
<view class="{{classPrefix}}__footer {{prefix}}-class-footer" wx:if="{{multiple}}">
<t-button
block
class="{{classPrefix}}__footer-btn {{classPrefix}}__reset-btn"
theme="light"
disabled="{{value.length == 0}}"
bindtap="handleReset"
>重置</t-button
>
<t-button
block
class="{{classPrefix}}__footer-btn {{classPrefix}}__confirm-btn"
theme="primary"
disabled="{{value.length == 0}}"
bindtap="handleConfirm"
>确定</t-button
>
</view>
</t-popup>
</view>

110
miniprogram_npm/tdesign-miniprogram/dropdown-menu/dropdown-item.wxss Normal file
View File

@@ -0,0 +1,110 @@
.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);
}
/** dropdown-item */
.t-dropdown-item {
position: fixed;
right: 0;
left: 0;
top: 0;
overflow: hidden;
bottom: 0;
/** 树形结构 */
}
.t-dropdown-item__content {
display: flex;
flex-direction: column;
z-index: 11600;
overflow: hidden;
}
.t-dropdown-item__popup-host {
display: block;
width: 100%;
height: 100%;
overflow: hidden;
position: absolute;
left: 0;
top: 0;
}
.t-dropdown-item__body {
flex: 1;
background: var(--td-dropdown-menu-bg-color, var(--td-bg-color-block, #fff));
overflow: auto;
max-height: var(--td-dropdown-body-max-height, 560rpx);
}
.t-dropdown-item__body--tree {
display: flex;
overflow: hidden;
}
.t-dropdown-item__body--multi {
padding-top: var(--td-spacer, 16rpx);
padding-bottom: var(--td-spacer, 16rpx);
overflow-y: auto;
}
.t-dropdown-item__footer {
display: flex;
background: var(--td-dropdown-menu-bg-color, var(--td-bg-color-block, #fff));
position: relative;
padding: 32rpx;
}
.t-dropdown-item__footer::before {
z-index: 1;
position: absolute;
box-sizing: border-box;
content: ' ';
pointer-events: none;
right: 0;
left: 0;
top: 0;
border-top: 1px solid var(--td-border-level-1-color, #e6e6e6);
transform: scaleY(0.5);
}
.t-dropdown-item__footer-btn {
flex: 1;
}
.t-dropdown-item__footer-btn + .t-dropdown-item__footer-btn {
margin-left: 32rpx;
}
.t-dropdown-item__radio,
.t-dropdown-item__checkbox {
width: 100%;
overflow: scroll;
}
.t-dropdown-item__checkbox-group {
display: grid;
padding: 32rpx;
grid-gap: 24rpx;
}
.t-dropdown-item__tree-item {
height: var(--td-tree-item-height, 96rpx);
line-height: var(--td-tree-item-height, 96rpx);
font-size: var(--td-tree-item-font-size, 32rpx);
padding-left: 32rpx;
}
.t-dropdown-item__tree-item--active {
color: var(--td-tree-item-active-color, var(--td-primary-color, #0052d9));
}

25
miniprogram_npm/tdesign-miniprogram/dropdown-menu/dropdown-menu.d.ts vendored Normal file
View File

@@ -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
miniprogram_npm/tdesign-miniprogram/dropdown-menu/dropdown-menu.js Normal file
View File

@@ -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': {
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;

6
miniprogram_npm/tdesign-miniprogram/dropdown-menu/dropdown-menu.json Normal file
View File

@@ -0,0 +1,6 @@
{
"component": true,
"usingComponents": {
"t-icon": "../icon/icon"
}
}

24
miniprogram_npm/tdesign-miniprogram/dropdown-menu/dropdown-menu.wxml Normal file
View File

@@ -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>

73
miniprogram_npm/tdesign-miniprogram/dropdown-menu/dropdown-menu.wxss Normal file
View File

@@ -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);
}

5
miniprogram_npm/tdesign-miniprogram/dropdown-menu/index.d.ts vendored Normal file
View File

@@ -0,0 +1,5 @@
export * from './type';
export * from './props';
export * from './dropdown-item-props';
export * from './dropdown-menu';
export * from './dropdown-item';

5
miniprogram_npm/tdesign-miniprogram/dropdown-menu/index.js Normal file
View File

@@ -0,0 +1,5 @@
export * from './type';
export * from './props';
export * from './dropdown-item-props';
export * from './dropdown-menu';
export * from './dropdown-item';

3
miniprogram_npm/tdesign-miniprogram/dropdown-menu/props.d.ts vendored Normal file
View File

@@ -0,0 +1,3 @@
import { TdDropdownMenuProps } from './type';
declare const props: TdDropdownMenuProps;
export default props;

26
miniprogram_npm/tdesign-miniprogram/dropdown-menu/props.js Normal file
View File

@@ -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;

86
miniprogram_npm/tdesign-miniprogram/dropdown-menu/type.d.ts vendored Normal file
View File

@@ -0,0 +1,86 @@
import { KeysType } from '../common/common';
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;
};
}
export interface TdDropdownItemProps {
customStyle?: {
type: StringConstructor;
value?: string;
};
disabled?: {
type: BooleanConstructor;
value?: boolean;
};
externalClasses?: {
type: ArrayConstructor;
value?: [
't-class',
't-class-content',
't-class-column',
't-class-column-item',
't-class-column-item-label',
't-class-footer'
];
};
keys?: {
type: ObjectConstructor;
value?: KeysType;
};
label?: {
type: StringConstructor;
value?: string;
};
multiple?: {
type: BooleanConstructor;
value?: boolean;
};
options?: {
type: ArrayConstructor;
value?: Array<DropdownOption>;
};
optionsColumns?: {
type: null;
value?: string | number;
};
optionsLayout?: {
type: StringConstructor;
value?: string;
};
value?: {
type: null;
value?: DropdownValue;
};
defaultValue?: {
type: null;
value?: DropdownValue;
};
}
export interface DropdownOption {
label: string;
disabled: boolean;
value: DropdownValue;
}
export declare type DropdownValue = string | number | Array<DropdownValue>;

1
miniprogram_npm/tdesign-miniprogram/dropdown-menu/type.js Normal file
View File

@@ -0,0 +1 @@
export {};

16
miniprogram_npm/tdesign-miniprogram/dropdown-menu/util.wxs Normal file
View File

@@ -0,0 +1,16 @@
var getTreeClass = function (level) {
if (level === 0) return 'leaf';
if (level === 1) return 'parent';
return 'ancestor';
};
var getDropdownItemStyles = function (top, zIndex, customStyle) {
var topStyle = top ? 'top:' + top + 'px;' : '';
var zIndexStyle = zIndex ? 'z-index:' + zIndex + ';' : '';
return topStyle + zIndexStyle + customStyle;
};
module.exports = {
getTreeClass: getTreeClass,
getDropdownItemStyles: getDropdownItemStyles,
};