xJourney/wxapp_escort_admin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

start

Browse Source
This commit is contained in:
lik
2026-05-30 21:09:24 +08:00
parent 212c94224b
commit 010cf160a0
1075 changed files with 67487 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
miniprogram_npm/tdesign-miniprogram/drawer/README.en-US.md Normal file
View File

@@ -0,0 +1,47 @@
:: BASE_DOC ::
## API
### Drawer 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
close-on-overlay-click | Boolean | true | \- | N
destroy-on-close | Boolean | false | \- | N
footer | Slot | - | `0.29.0`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N
items | Array | - | Typescript：`DrawerItem[] ` `interface DrawerItem { title: string; icon: string; }。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/drawer/type.ts)`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/drawer/type.ts) | N
placement | String | right | options: left/right | N
show-overlay | Boolean | true | \- | N
title | String / Slot | - | `0.29.0`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N
using-custom-navbar | Boolean | false | \- | N
visible | Boolean | false | \- | N
z-index | Number | 11500 | \- | N
### Drawer Events
name | params | description
-- | -- | --
close | `(trigger: TriggerSource)` | \-
item-click | `(index: number; item: DrawerItem)` | \-
overlay-click | \- | \-
### CSS Variables
The component provides the following CSS variables, which can be used to customize styles.
Name | Default Value | Description
-- | -- | --
--td-drawer-bg-color | @bg-color-container | -
--td-drawer-border-color | @border-color | -
--td-drawer-footer-padding-bottom | 40rpx | -
--td-drawer-hover-color | @bg-color-secondarycontainer | -
--td-drawer-item-icon-color | @drawer-title-color
--td-drawer-item-height | 48rpx | -
--td-drawer-item-icon-size | 48rpx | -
--td-drawer-item-padding | 32rpx | -
--td-drawer-sidebar-height | 70vh | -
--td-drawer-title-color | @font-gray-1 | -
--td-drawer-title-font-size | 36rpx | -
--td-drawer-title-padding | 48rpx 32rpx 16rpx | -
--td-drawer-width | 560rpx | -

90
miniprogram_npm/tdesign-miniprogram/drawer/README.md Normal file
View File

@@ -0,0 +1,90 @@
---
title: Drawer 抽屉
description: 用作一组平行关系页面/内容的切换器，相较于Tab，同屏可展示更多的选项数量。。
spline: message
isComponent: true
---
<span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20lines-100%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-100%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20branches-100%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.7.2 版本上线，请留意版本。
</div>
## 引入
全局引入，在 miniprogram 根目录下的`app.json`中配置，局部引入，在需要引入的页面或组件的`index.json`中配置。
```json
"usingComponents": {
"t-drawer": "tdesign-miniprogram/drawer/drawer"
}
```
## 代码演示
<a href="https://developers.weixin.qq.com/s/WoE0Rdmj7GSE" 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>
### 基础抽屉
{{ base }}
### 带图标的抽屉
{{ icon-drawer }}
>Drawer的 `visible` 是受控的，需要手动设置 `visible` 为 `true` 才会开启抽屉
## API
### Drawer Props
名称 | 类型 | 默认值 | 描述 | 必传
-- | -- | -- | -- | --
style | Object | - | 样式 | N
custom-style | Object | - | 样式，一般用于开启虚拟化组件节点场景 | N
close-on-overlay-click | Boolean | true | 点击蒙层时是否触发抽屉关闭事件 | N
destroy-on-close | Boolean | false | 抽屉关闭时是否销毁节点 | N
footer | Slot | - | `0.29.0`。抽屉的底部。[通用类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N
items | Array | - | 抽屉里的列表项。TS 类型：`DrawerItem[] ` `interface DrawerItem { title: string; icon: string; }。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/drawer/type.ts)`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/drawer/type.ts) | N
placement | String | right | 抽屉方向。可选项：left/right | N
show-overlay | Boolean | true | 是否显示遮罩层 | N
title | String / Slot | - | `0.29.0`。抽屉的标题。[通用类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N
using-custom-navbar | Boolean | false | 是否使用了自定义导航栏 | N
visible | Boolean | false | 组件是否可见 | N
z-index | Number | 11500 | 抽屉层级，样式默认为 11500 | N
### Drawer Events
名称 | 参数 | 描述
-- | -- | --
close | `(trigger: TriggerSource)` | 关闭时触发。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/drawer/type.ts)。<br/>`type TriggerSource = 'overlay'`<br/>
item-click | `(index: number; item: DrawerItem)` | 点击抽屉里的列表项
overlay-click | \- | 如果蒙层存在，点击蒙层时触发
### CSS Variables
组件提供了下列 CSS 变量，可用于自定义样式。
名称 | 默认值 | 描述
-- | -- | --
--td-drawer-bg-color | @bg-color-container | -
--td-drawer-border-color | @border-color | -
--td-drawer-footer-padding-bottom | 40rpx | -
--td-drawer-hover-color | @bg-color-secondarycontainer | -
--td-drawer-item-icon-color | @drawer-title-color
--td-drawer-item-height | 48rpx | -
--td-drawer-item-icon-size | 48rpx | -
--td-drawer-item-padding | 32rpx | -
--td-drawer-sidebar-height | 70vh | -
--td-drawer-title-color | @font-gray-1 | -
--td-drawer-title-font-size | 36rpx | -
--td-drawer-title-padding | 48rpx 32rpx 16rpx | -
--td-drawer-width | 560rpx | -

16
miniprogram_npm/tdesign-miniprogram/drawer/drawer.d.ts vendored Normal file
View File

@@ -0,0 +1,16 @@
import { ComponentsOptionsType, SuperComponent } from '../common/src/index';
export default class Drawer extends SuperComponent {
behaviors: string[];
externalClasses: any[];
options: ComponentsOptionsType;
properties: import("./type").TdDrawerProps;
data: {
classPrefix: string;
};
methods: {
visibleChange({ detail }: {
detail: any;
}): void;
itemClick(detail: any): void;
};
}

49
miniprogram_npm/tdesign-miniprogram/drawer/drawer.js Normal file
View File

@@ -0,0 +1,49 @@
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 useCustomNavbar from '../mixins/using-custom-navbar';
const { prefix } = config;
const name = `${prefix}-drawer`;
let Drawer = class Drawer extends SuperComponent {
constructor() {
super(...arguments);
this.behaviors = [useCustomNavbar];
this.externalClasses = [];
this.options = {
multipleSlots: true,
};
this.properties = props;
this.data = {
classPrefix: name,
};
this.methods = {
visibleChange({ detail }) {
const { visible } = detail;
const { showOverlay } = this.data;
this.setData({
visible,
});
if (!visible) {
this.triggerEvent('close', { trigger: 'overlay' });
}
if (showOverlay) {
this.triggerEvent('overlay-click', { visible: visible });
}
},
itemClick(detail) {
const { index, item } = detail.currentTarget.dataset;
this.triggerEvent('item-click', { index, item });
},
};
}
};
Drawer = __decorate([
wxComponent()
], Drawer);
export default Drawer;

8
miniprogram_npm/tdesign-miniprogram/drawer/drawer.json Normal file
View File

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

44
miniprogram_npm/tdesign-miniprogram/drawer/drawer.wxml Normal file
View File

@@ -0,0 +1,44 @@
<wxs src="../common/utils.wxs" module="_" />
<t-popup
wx:if="{{!destroyOnClose || visible}}"
style="{{_._style([style, customStyle])}}"
class="class"
bind:visible-change="visibleChange"
visible="{{visible}}"
zIndex="{{zIndex}}"
usingCustomNavbar="{{usingCustomNavbar}}"
placement="{{placement == 'right' ? 'right' : 'left'}}"
showOverlay="{{showOverlay}}"
closeOnOverlayClick="{{closeOnOverlayClick}}"
>
<view class="{{classPrefix}}">
<slot name="title" />
<view wx:if="{{title}}" class="{{classPrefix}}__title">{{title}}</view>
<scroll-view class="{{classPrefix}}__sidebar" scroll-y type="list">
<view
class="{{classPrefix}}__sidebar-item"
hover-class="{{classPrefix}}--hover"
hover-start-time="{{0}}"
hover-stay-time="{{100}}"
wx:for="{{items}}"
wx:item="item"
wx:key="index"
data-item="{{item}}"
data-index="{{index}}"
bindtap="itemClick"
aria-role="{{ ariaRole || 'button' }}"
aria-label="{{item.title}}"
>
<view aria-hidden="{{true}}" wx:if="{{item.icon}}" class="{{classPrefix}}__sidebar-item-icon">
<t-icon name="{{item.icon}}" />
</view>
<view class="{{classPrefix}}__sidebar-item-title"> {{item.title}} </view>
</view>
</scroll-view>
<view class="{{classPrefix}}__footer">
<slot />
<slot name="footer" />
</view>
</view>
</t-popup>

90
miniprogram_npm/tdesign-miniprogram/drawer/drawer.wxss Normal file
View File

@@ -0,0 +1,90 @@
.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-drawer {
background: var(--td-drawer-bg-color, var(--td-bg-color-container, var(--td-font-white-1, #ffffff)));
height: 100vh;
width: var(--td-drawer-width, 560rpx);
display: flex;
flex-direction: column;
}
.t-drawer--hover {
background-color: var(--td-drawer-hover-color, var(--td-bg-color-secondarycontainer, var(--td-gray-color-1, #f3f3f3)));
}
.t-drawer__title {
font-weight: 600;
font-size: var(--td-drawer-title-font-size, 36rpx);
padding: 48rpx 32rpx 16rpx;
color: var(--td-drawer-title-color, var(--td-text-color-primary, var(--td-font-gray-1, rgba(0, 0, 0, 0.9))));
}
.t-drawer__sidebar {
height: var(--td-drawer-sidebar-height, 70vh);
}
.t-drawer__sidebar-item {
display: flex;
align-items: center;
position: relative;
padding-top: var(--td-drawer-item-padding, 32rpx);
padding-right: 0;
padding-bottom: var(--td-drawer-item-padding, 32rpx);
padding-left: var(--td-drawer-item-padding, 32rpx);
line-height: var(--td-drawer-item-height, 48rpx);
}
.t-drawer__sidebar-item::after {
content: '';
display: block;
position: absolute;
top: unset;
bottom: 0;
left: unset;
right: unset;
background-color: var(--td-drawer-border-color, var(--td-border-level-1-color, var(--td-gray-color-3, #e7e7e7)));
}
.t-drawer__sidebar-item::after {
height: 1px;
left: 0;
right: 0;
transform: scaleY(0.5);
}
.t-drawer__sidebar-item::after {
left: var(--td-drawer-item-padding, 32rpx);
}
.t-drawer__sidebar-item-title {
flex: 1;
color: var(--td-drawer-title-color, var(--td-text-color-primary, var(--td-font-gray-1, rgba(0, 0, 0, 0.9))));
}
.t-drawer__sidebar-item-icon {
padding-right: 16rpx;
color: var(--td-drawer-item-icon-color, var(--td-drawer-title-color, var(--td-text-color-primary, var(--td-font-gray-1, rgba(0, 0, 0, 0.9)))));
font-size: var(--td-drawer-item-icon-size, 48rpx);
}
.t-drawer__footer {
flex: 1;
display: flex;
flex-direction: column;
padding-bottom: var(--td-drawer-footer-padding-bottom, 40rpx);
}

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

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

33
miniprogram_npm/tdesign-miniprogram/drawer/props.js Normal file
View File

@@ -0,0 +1,33 @@
const props = {
closeOnOverlayClick: {
type: Boolean,
value: true,
},
destroyOnClose: {
type: Boolean,
value: false,
},
items: {
type: Array,
},
placement: {
type: String,
value: 'right',
},
showOverlay: {
type: Boolean,
value: true,
},
title: {
type: String,
},
visible: {
type: Boolean,
value: false,
},
zIndex: {
type: Number,
value: 11500,
},
};
export default props;

42
miniprogram_npm/tdesign-miniprogram/drawer/type.d.ts vendored Normal file
View File

@@ -0,0 +1,42 @@
export interface TdDrawerProps {
closeOnOverlayClick?: {
type: BooleanConstructor;
value?: boolean;
};
destroyOnClose?: {
type: BooleanConstructor;
value?: boolean;
};
items?: {
type: ArrayConstructor;
value?: DrawerItem[];
};
placement?: {
type: StringConstructor;
value?: 'left' | 'right';
};
showOverlay?: {
type: BooleanConstructor;
value?: boolean;
};
title?: {
type: StringConstructor;
value?: string;
};
usingCustomNavbar?: {
type: BooleanConstructor;
value?: boolean;
};
visible?: {
type: BooleanConstructor;
value?: boolean;
};
zIndex?: {
type: NumberConstructor;
value?: number;
};
}
export interface DrawerItem {
title: string;
icon: string;
}

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

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