e2hang/HuajisheTools
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

New Huajishe Check ChaoXing

Browse Source
This commit is contained in:
e2hang
2025-10-01 10:01:52 +08:00
parent 240b884eac
commit 80be8ae3cf
1094 changed files with 61709 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -0,0 +1,91 @@
:: BASE_DOC ::
## API
### DropdownMenu Props
name | type | default | description | required
-- | -- | -- | -- | --
style | Object | - | CSS(Cascading Style Sheets) | N
custom-style | Object | - | CSS(Cascading Style Sheets)，used to set style on virtual component | N
arrow-icon | String / Object | 'caret-down-small' | \- | N
close-on-click-overlay | Boolean | true | \- | N
duration | String / Number | 200 | \- | N
show-overlay | Boolean | true | \- | N
z-index | Number | 11600 | \- | N
### DropdownMenu Events
name | params | description
-- | -- | --
close | \- | \-
open | \- | \-
### DropdownMenu External Classes
className | Description
-- | --
t-class | \-
t-class-icon | \-
t-class-item | \-
t-class-label | \-
### DropdownItem Props
name | type | default | description | required
-- | -- | -- | -- | --
style | Object | - | CSS(Cascading Style Sheets) | N
custom-style | Object | - | CSS(Cascading Style Sheets)，used to set style on virtual component | N
disabled | Boolean | false | \- | N
footer | Slot | - | [see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N
keys | Object | - | Typescript：`KeysType`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | 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
placement | String | left | options: left/right | 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)` | \-
close | \- | \-
confirm | `(value: DropdownValue)` | \-
reset | \- | \-
### DropdownItem External Classes
className | Description
-- | --
t-class | \-
t-class-column | \-
t-class-column-item | \-
t-class-column-item-label | \-
t-class-content | \-
t-class-footer | \-
### CSS Variables
The component provides the following CSS variables, which can be used to customize styles.
Name | Default Value | Description
-- | -- | --
--td-dropdown-menu-active-color | @brand-color | -
--td-dropdown-menu-bg-color | @bg-color-container | -
--td-dropdown-menu-border-width | 1px | -
--td-dropdown-menu-color | @text-color-primary | -
--td-dropdown-menu-disabled-color | @text-color-disabled | -
--td-dropdown-menu-font-size | 28rpx | -
--td-dropdown-menu-height | 96rpx | -
--td-dropdown-menu-icon-size | 40rpx | -
--td-dropdown-body-max-height | 560rpx | -
--td-dropdown-menu-bg-color | @bg-color-container | -
--td-tree-bg-color | @bg-color-container | -
--td-tree-item-active-color | @brand-color | -
--td-tree-item-font-size | 32rpx | -
--td-tree-item-height | 96rpx | -
--td-tree-root-bg-color | @bg-color-secondarycontainer | -

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

@@ -0,0 +1,138 @@
---
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"
}
```
## 代码演示
<a href="https://developers.weixin.qq.com/s/T58agimj75SB" title="在开发者工具中预览效果" target="_blank" rel="noopener noreferrer"> 在开发者工具中预览效果 </a>
<blockquote style="background-color: #d9e1ff; font-size: 15px; line-height: 26px;margin: 16px 0 0;padding: 16px; border-radius: 6px; color: #0052d9" >
<p>Tips: 请确保开发者工具为打开状态。导入开发者工具后，依次执行：npm i > 构建npm包 > 勾选 "将JS编译成ES5"</p>
</blockquote>
### 单选下拉菜单
{{ single }}
### 多列下拉菜单
{{ multi }}
### 树形下拉菜单
{{ tree }}
## API
### DropdownMenu Props
名称 | 类型 | 默认值 | 描述 | 必传
-- | -- | -- | -- | --
style | Object | - | 样式 | N
custom-style | Object | - | 样式，一般用于开启虚拟化组件节点场景 | N
arrow-icon | String / Object | 'caret-down-small' | 自定义箭头图标 | N
close-on-click-overlay | Boolean | true | 是否在点击遮罩层后关闭菜单 | N
duration | String / Number | 200 | 动画时长 | N
show-overlay | Boolean | true | 是否显示遮罩层 | N
z-index | Number | 11600 | 菜单栏 z-index 层级 | N
### DropdownMenu Events
名称 | 参数 | 描述
-- | -- | --
close | \- | 菜单关闭时触发
open | \- | 菜单展开时触发
### DropdownMenu External Classes
类名 | 描述
-- | --
t-class | 根节点样式类
t-class-icon | 图标样式类
t-class-item | 选项样式类
t-class-label | 标签样式类
### DropdownItem Props
名称 | 类型 | 默认值 | 描述 | 必传
-- | -- | -- | -- | --
style | Object | - | 样式 | N
custom-style | Object | - | 样式，一般用于开启虚拟化组件节点场景 | N
disabled | Boolean | false | 是否禁用操作项 | N
footer | Slot | - | 底部。[通用类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N
keys | Object | - | 用来定义 value / label 在 `options` 中对应的字段别名。TS 类型：`KeysType`。[通用类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | 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
placement | String | left | 复选框和内容相对位置，仅单选菜单栏有效。可选项：left/right | 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)` | 值改变时触发
close | \- | 关闭时触发
confirm | `(value: DropdownValue)` | 点击确认时触发
reset | \- | 点击重置时触发
### DropdownItem External Classes
类名 | 描述
-- | --
t-class | 根节点样式类
t-class-column | 菜单列样式类
t-class-column-item | 菜单列选项样式类
t-class-column-item-label | 菜单列选项标签样式类
t-class-content | 内容样式类
t-class-footer | 底部样式类
### CSS Variables
组件提供了下列 CSS 变量，可用于自定义样式。
名称 | 默认值 | 描述
-- | -- | --
--td-dropdown-menu-active-color | @brand-color | -
--td-dropdown-menu-bg-color | @bg-color-container | -
--td-dropdown-menu-border-width | 1px | -
--td-dropdown-menu-color | @text-color-primary | -
--td-dropdown-menu-disabled-color | @text-color-disabled | -
--td-dropdown-menu-font-size | 28rpx | -
--td-dropdown-menu-height | 96rpx | -
--td-dropdown-menu-icon-size | 40rpx | -
--td-dropdown-body-max-height | 560rpx | -
--td-dropdown-menu-bg-color | @bg-color-container | -
--td-tree-bg-color | @bg-color-container | -
--td-tree-item-active-color | @brand-color | -
--td-tree-item-font-size | 32rpx | -
--td-tree-item-height | 96rpx | -
--td-tree-root-bg-color | @bg-color-secondarycontainer | -

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

@@ -0,0 +1,33 @@
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;
_arrowIcon: {
name: string | object;
};
};
relations: RelationsOptions;
lifetimes: {
ready(): void;
};
observers: {
arrowIcon(v: any): void;
activeIdx(v: number): void;
};
methods: {
toggle(index: number): void;
getAllItems(): void;
handleToggle(e: WechatMiniprogram.BaseEvent): void;
noop(): void;
};
}

103
HuajisheCheckChaoXing/miniprogram_npm/tdesign-miniprogram/dropdown-menu/dropdown-menu.js Normal file
View File

@@ -0,0 +1,103 @@
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';
import { calcIcon } from '../common/utils';
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,
_arrowIcon: { name: props.arrowIcon.value },
};
this.relations = {
'../dropdown-item/dropdown-item': {
type: 'child',
},
};
this.lifetimes = {
ready() {
this.getAllItems();
},
};
this.observers = {
arrowIcon(v) {
this.setData({
_arrowIcon: calcIcon(v),
});
},
activeIdx(v) {
this.triggerEvent(v === -1 ? 'close' : 'open');
},
};
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 || data.computedLabel,
disabled: data.disabled,
}));
this.setData({
menus,
});
},
handleToggle(e) {
const { index } = e.currentTarget.dataset;
this.toggle(index);
},
noop() { },
};
}
};
DropdownMenu = __decorate([
wxComponent()
], DropdownMenu);
export default DropdownMenu;

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

@@ -0,0 +1,7 @@
{
"component": true,
"styleIsolation": "apply-shared",
"usingComponents": {
"t-icon": "../icon/icon"
}
}

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

@@ -0,0 +1,28 @@
<import src="../common/template/icon.wxml" />
<wxs src="../common/utils.wxs" module="_" />
<view
style="{{_._style([style, customStyle])}}"
class="{{ classPrefix }} class {{prefix}}-class"
id="t-bar"
catchtouchmove="{{activeIdx === -1?'':'noop'}}"
>
<view
wx:for="{{menus}}"
wx:key="index"
bindtap="handleToggle"
data-index="{{index}}"
class="{{_.cls(classPrefix + '__item', [['active', activeIdx == index], ['disabled', item.disabled], [index, true]])}} {{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>
<template
is="icon"
data="{{..._arrowIcon, ariaHidden: true, tClass: classPrefix + '__icon ' + classPrefix + '__icon--' + (activeIdx == index ? 'active ' : ' ') + prefix + '-class-icon'}}"
/>
</view>
<slot />
</view>

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

@@ -0,0 +1,86 @@
.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 {
display: flex;
height: var(--td-dropdown-menu-height, 96rpx);
background: var(--td-dropdown-menu-bg-color, var(--td-bg-color-container, var(--td-font-white-1, #ffffff)));
position: relative;
}
.t-dropdown-menu::after {
content: '';
display: block;
position: absolute;
top: unset;
bottom: 0;
left: unset;
right: unset;
background-color: var(--td-component-border, var(--td-gray-color-4, #dcdcdc));
}
.t-dropdown-menu::after {
height: 1px;
left: 0;
right: 0;
transform: scaleY(0.5);
}
.t-dropdown-menu:after {
height: var(--td-dropdown-menu-border-width, 1px);
}
.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-color, var(--td-text-color-primary, var(--td-font-gray-1, rgba(0, 0, 0, 0.9))));
}
.t-dropdown-menu__item--active {
color: var(--td-dropdown-menu-active-color, var(--td-brand-color, var(--td-primary-color-7, #0052d9)));
}
.t-dropdown-menu__item--disabled {
color: var(--td-dropdown-menu-disabled-color, var(--td-text-color-disabled, var(--td-font-gray-4, rgba(0, 0, 0, 0.26))));
}
.t-dropdown-menu__icon {
font-size: var(--td-dropdown-menu-icon-size, 40rpx);
padding: 4rpx;
box-sizing: border-box;
transition: transform 240ms ease;
}
.t-dropdown-menu__icon--active {
transform: rotate(180deg);
}
.t-dropdown-menu__icon:not(:empty) {
margin-left: 8rpx;
}
.t-dropdown-menu__title {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: var(--td-dropdown-menu-font-size, 28rpx);
}

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

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

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

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

3
HuajisheCheckChaoXing/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;

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

@@ -0,0 +1,23 @@
const props = {
arrowIcon: {
type: null,
value: 'caret-down-small',
},
closeOnClickOverlay: {
type: Boolean,
value: true,
},
duration: {
type: null,
value: 200,
},
showOverlay: {
type: Boolean,
value: true,
},
zIndex: {
type: Number,
value: 11600,
},
};
export default props;

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

@@ -0,0 +1,22 @@
export interface TdDropdownMenuProps {
arrowIcon?: {
type: null;
value?: string | object;
};
closeOnClickOverlay?: {
type: BooleanConstructor;
value?: boolean;
};
duration?: {
type: null;
value?: string | number;
};
showOverlay?: {
type: BooleanConstructor;
value?: boolean;
};
zIndex?: {
type: NumberConstructor;
value?: number;
};
}

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

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