lingxiao/mini-yu
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

first commit

Browse Source
This commit is contained in:
lingxiao865
2026-02-10 08:05:03 +08:00
commit c5af079d8c
1094 changed files with 97530 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

65
uni_modules/tdesign-uniapp/components/grid-item/README.en-US.md Normal file
View File

@@ -0,0 +1,65 @@
:: BASE_DOC ::
## API
### GridItem Props
name | type | default | description | required
-- | -- | -- | -- | --
badgeProps | Object | null | Typescript：`BadgeProps`，[Badge API Documents](./badge?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/packages/uniapp-components/grid-item/type.ts) | N
description | String / TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/packages/uniapp-components/common/common.ts) | N
icon | String / Object | - | \- | N
image | String / TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/packages/uniapp-components/common/common.ts) | N
imageProps | Object | - | Typescript：`ImageProps`，[Image API Documents](./image?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/packages/uniapp-components/grid-item/type.ts) | N
jumpType | String | navigate-to | options: redirect-to/switch-tab/relaunch/navigate-to | N
layout | String | vertical | options: vertical/horizontal | N
text | String / TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/packages/uniapp-components/common/common.ts) | N
url | String | - | \- | N
onClick | Function | | Typescript：`() => void`<br/> | N
### GridItem Events
name | params | description
-- | -- | --
click | \- | \-
### GridItem Slots
name | Description
-- | --
- | \-
description | \-
image | \-
text | \-
### GridItem External Classes
className | Description
-- | --
t-class | \-
t-class-content | \-
t-class-description | \-
t-class-image | \-
t-class-text | \-
### CSS Variables
The component provides the following CSS variables, which can be used to customize styles.
Name | Default Value | Description
-- | -- | --
--td-grid-item-bg-color | @bg-color-container | -
--td-grid-item-description-color | @text-color-placeholder | -
--td-grid-item-description-font | @font-body-small | -
--td-grid-item-description-padding-top | 0 | -
--td-grid-item-horizontal-text-description-top | 0 | -
--td-grid-item-horizontal-text-padding-left | 0 | -
--td-grid-item-hover-bg-color | @bg-color-secondarycontainer | -
--td-grid-item-image-middle-width | 80rpx | -
--td-grid-item-image-small-width | 64rpx | -
--td-grid-item-image-width | 96rpx | -
--td-grid-item-padding | 32rpx | -
--td-grid-item-text-color | @text-color-primary | -
--td-grid-item-text-font | @font-body-medium | -
--td-grid-item-text-middle-font | @font-body-small | -
--td-grid-item-text-padding-top | 16rpx | -
--td-grid-item-text-small-font | @font-body-extraSmall | -

65
uni_modules/tdesign-uniapp/components/grid-item/README.md Normal file
View File

@@ -0,0 +1,65 @@
:: BASE_DOC ::
## API
### GridItem Props
名称 | 类型 | 默认值 | 描述 | 必传
-- | -- | -- | -- | --
badgeProps | Object | null | 透传至 Badge 属性。TS 类型：`BadgeProps`，[Badge API Documents](./badge?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/packages/uniapp-components/grid-item/type.ts) | N
description | String / TNode | - | 文本以外的更多描述，辅助信息。可以通过 Props 传入文本，也可以自定义标题节点。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/packages/uniapp-components/common/common.ts) | N
icon | String / Object | - | 图标名称。值为字符串表示图标名称，值为 `Object` 类型，表示透传至 `icon` | N
image | String / TNode | - | 图片，可以是图片地址，也可以自定义图片节点，值为 slot 的时候才能使用插槽。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/packages/uniapp-components/common/common.ts) | N
imageProps | Object | - | 透传至 Image 组件。TS 类型：`ImageProps`，[Image API Documents](./image?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/packages/uniapp-components/grid-item/type.ts) | N
jumpType | String | navigate-to | 链接跳转类型。可选项：redirect-to/switch-tab/relaunch/navigate-to | N
layout | String | vertical | 内容布局方式。可选项：vertical/horizontal | N
text | String / TNode | - | 文本，可以通过 Props 传入文本，也可以自定义标题节点。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/packages/uniapp-components/common/common.ts) | N
url | String | - | 点击后的跳转链接 | N
onClick | Function | | TS 类型：`() => void`<br/>点击子项后触发 | N
### GridItem Events
名称 | 参数 | 描述
-- | -- | --
click | \- | 点击子项后触发
### GridItem Slots
名称 | 描述
-- | --
- | 默认插槽，自定义内容区域内容
description | 自定义 `description` 模块内容
image | 自定义 `image` 模块内容
text | 自定义 `text` 模块内容
### GridItem External Classes
类名 | 描述
-- | --
t-class | 根节点样式类
t-class-content | 内容样式类
t-class-description | 描述样式类
t-class-image | 图片样式类
t-class-text | 文本样式类
### CSS Variables
组件提供了下列 CSS 变量，可用于自定义样式。
名称 | 默认值 | 描述
-- | -- | --
--td-grid-item-bg-color | @bg-color-container | -
--td-grid-item-description-color | @text-color-placeholder | -
--td-grid-item-description-font | @font-body-small | -
--td-grid-item-description-padding-top | 0 | -
--td-grid-item-horizontal-text-description-top | 0 | -
--td-grid-item-horizontal-text-padding-left | 0 | -
--td-grid-item-hover-bg-color | @bg-color-secondarycontainer | -
--td-grid-item-image-middle-width | 80rpx | -
--td-grid-item-image-small-width | 64rpx | -
--td-grid-item-image-width | 96rpx | -
--td-grid-item-padding | 32rpx | -
--td-grid-item-text-color | @text-color-primary | -
--td-grid-item-text-font | @font-body-medium | -
--td-grid-item-text-middle-font | @font-body-small | -
--td-grid-item-text-padding-top | 16rpx | -
--td-grid-item-text-small-font | @font-body-extraSmall | -

103
uni_modules/tdesign-uniapp/components/grid-item/grid-item.css Normal file
View File

@@ -0,0 +1,103 @@
.t-grid-item {
box-sizing: border-box;
height: 100%;
display: inline-block;
vertical-align: top;
background-color: var(--td-grid-item-bg-color, var(--td-bg-color-container, var(--td-font-white-1, #ffffff)));
}
.t-grid-item--hover {
background-color: var(--td-grid-item-hover-bg-color, var(--td-bg-color-secondarycontainer, var(--td-gray-color-1, #f3f3f3)));
}
.t-grid-item--auto-size {
width: 168rpx;
}
.t-grid-item__content {
display: flex;
flex-direction: column;
align-items: center;
overflow: hidden;
position: relative;
padding: var(--td-grid-item-padding, 32rpx) 0 24rpx;
}
.t-grid-item__content--horizontal {
flex-direction: row;
padding-left: var(--td-grid-item-padding, 32rpx);
}
.t-grid-item__content--left {
justify-self: flex-start;
align-items: flex-start;
}
.t-grid-item__content--left .t-grid-item__words {
text-align: left;
}
.t-grid-item__words {
width: 100%;
text-align: center;
position: relative;
flex-direction: column;
display: flex;
flex: 1;
justify-content: center;
align-items: center;
}
.t-grid-item__words--horizontal {
margin-left: 24rpx;
}
.t-grid-item__words:empty {
display: none;
}
:deep(.t-grid-item__image):not(:empty) {
width: var(--td-grid-item-image-width, 96rpx);
height: var(--td-grid-item-image-width, 96rpx);
}
:deep(.t-grid-item__image):not(:empty).t-grid-item__image--small {
width: var(--td-grid-item-image-small-width, 64rpx);
height: var(--td-grid-item-image-small-width, 64rpx);
}
:deep(.t-grid-item__image):not(:empty).t-grid-item__image--middle {
width: var(--td-grid-item-image-middle-width, 80rpx);
height: var(--td-grid-item-image-middle-width, 80rpx);
}
:deep(.t-grid-item__image):not(:empty) .t-grid__image {
width: 100%;
height: 100%;
}
:deep(.t-grid-item__image)--icon {
display: flex;
align-items: center;
justify-content: center;
background: var(--td-bg-color-secondarycontainer, var(--td-gray-color-1, #f3f3f3));
border-radius: var(--td-radius-default, 12rpx);
}
.t-grid-item__text {
width: inherit;
color: var(--td-grid-item-text-color, var(--td-text-color-primary, var(--td-font-gray-1, rgba(0, 0, 0, 0.9))));
padding-top: var(--td-grid-item-text-padding-top, 16rpx);
}
.t-grid-item__text--small {
font: var(--td-grid-item-text-small-font, var(--td-font-body-extraSmall, 20rpx / 32rpx var(--td-font-family, PingFang SC, Microsoft YaHei, Arial Regular)));
}
.t-grid-item__text--middle {
font: var(--td-grid-item-text-middle-font, var(--td-font-body-small, 24rpx / 40rpx var(--td-font-family, PingFang SC, Microsoft YaHei, Arial Regular)));
}
.t-grid-item__text--large {
font: var(--td-grid-item-text-font, var(--td-font-body-medium, 28rpx / 44rpx var(--td-font-family, PingFang SC, Microsoft YaHei, Arial Regular)));
}
.t-grid-item__text--horizontal {
padding-top: 0;
text-align: left;
}
.t-grid-item__description {
padding-top: var(--td-grid-item-description-padding-top, 0);
width: inherit;
color: var(--td-grid-item-description-color, var(--td-text-color-placeholder, var(--td-font-gray-3, rgba(0, 0, 0, 0.4))));
font: var(--td-grid-item-description-font, var(--td-font-body-small, 24rpx / 40rpx var(--td-font-family, PingFang SC, Microsoft YaHei, Arial Regular)));
}
.t-grid-item__description--horizontal {
margin-top: var(--td-grid-item-horizontal-text-description-top, 0);
padding-left: var(--td-grid-item-horizontal-text-padding-left, 0);
text-align-last: left;
}
:deep(.t-grid-item__icon) {
font-size: 48rpx;
}

292
uni_modules/tdesign-uniapp/components/grid-item/grid-item.vue Normal file
View File

@@ -0,0 +1,292 @@
<template>
<view
:class="[
tools.cls(classPrefix, [['auto-size', column == 0]]),
tClass
]"
:style="tools._style([gridItemStyle, customStyle])"
:hover-class="hover ? classPrefix + '--hover' : ''"
:hover-stay-time="200"
:aria-role="ariaRole || 'button'"
:aria-label="ariaLabel"
:aria-describedby="describedbyID"
@click="onClick"
>
<view
:class="tools.cls(classPrefix + '__wrapper', [layout])"
:style="gridItemWrapperStyle"
>
<view
:class="[
tools.cls(classPrefix + '__content', [align, layout]),
tClassContent
]"
:style="gridItemContentStyle"
>
<slot />
<t-badge
v-if="badgeProps"
:color="badgeProps.color || ''"
:content="badgeProps.content || ''"
:count="badgeProps.count || 0"
:dot="badgeProps.dot || false"
:max-count="badgeProps.maxCount || 99"
:offset="badgeProps.offset || []"
:shape="badgeProps.shape || 'circle'"
:show-zero="badgeProps.showZero || false"
:size="badgeProps.size || 'medium'"
:t-class="badgeProps.tClass"
:t-class-content="badgeProps.tClassContent"
:t-class-count="badgeProps.tClassCount"
>
<view
:class="[
tools.cls(classPrefix + '__image', [getImageSize(column), ['icon', icon]]),
tClassImage
]"
>
<block v-if="image && image != 'slot'">
<t-image
:t-class="tools.cls(classPrefix + '__image', [getImageSize(column)]) + ' ' + tClassImage"
:custom-style="tools._style([imageProps.style, imageProps.customStyle])"
:height="imageProps.height || ''"
:width="imageProps.width || ''"
:error="imageProps.error"
:lazy="imageProps.lazy"
:loading="imageProps.loading"
:shape="imageProps.shape || 'round'"
:src="imageProps.src || image"
:mode="imageProps.mode || 'widthFix'"
:webp="imageProps.webp"
:show-menu-by-longpress="imageProps.showMenuByLongpress"
:data-custom="imageProps.dataset"
@error="binderror($event, { custom: dataset || null })"
@load="bindload($event, { custom: dataset || null })"
/>
</block>
<slot name="image" />
<block
v-if="iconName || tools.isNoEmptyObj(iconData)"
name="icon"
>
<t-icon
:custom-style="iconData.style || ''"
:t-class="classPrefix + '__icon ' + classPrefix + '__icon--' + (iconData.activeIdx == iconData.index ? 'active ' : ' ')"
:prefix="iconData.prefix"
:name="iconName || iconData.name"
:size="iconData.size"
:color="iconData.color"
:aria-hidden="!!iconData.ariaHidden"
:aria-label="iconData.ariaLabel"
:aria-role="iconData.ariaRole"
/>
</block>
</view>
</t-badge>
<view
:id="describedbyID"
:class="tools.cls(classPrefix + '__words', [layout])"
:aria-label="ariaLabel
|| (
(badgeProps && (badgeProps.dot || badgeProps.count))
? text + ',' + description + ',' + tools.getBadgeAriaLabel({ ...(badgeProps || {}) })
: '')"
>
<view
v-if="text"
:class="[
tools.cls(classPrefix + '__text', [getImageSize(column), layout]) + ' ',
tClassText
]"
>
{{ text }}
</view>
<slot name="text" />
<view
v-if="description"
:class="[
tools.cls(classPrefix + '__description', [getImageSize(column), layout]) + ' ',
tClassDescription
]"
>
{{ description }}
</view>
<slot name="description" />
</view>
</view>
</view>
</view>
</template>
<script>
import TImage from '../image/image';
import TIcon from '../icon/icon';
import TBadge from '../badge/badge';
import { uniComponent } from '../common/src/index';
import { prefix } from '../common/config';
import props from './props';
import { uniqueFactory, setIcon } from '../common/utils';
import { isObject } from '../common/validator';
import tools from '../common/utils.wxs';
import { ChildrenMixin, RELATION_MAP } from '../common/relation';
const name = `${prefix}-grid-item`;
const getUniqueID = uniqueFactory('grid_item');
const LinkTypes = {
'redirect-to': 'redirectTo',
'switch-tab': 'switchTab',
relaunch: 'reLaunch',
'navigate-to': 'navigateTo',
};
export default uniComponent({
name,
options: {
styleIsolation: 'shared',
},
externalClasses: [
`${prefix}-class`,
`${prefix}-class-content`,
`${prefix}-class-image`,
`${prefix}-class-text`,
`${prefix}-class-description`,
],
mixins: [ChildrenMixin(RELATION_MAP.GridItem)],
components: {
TImage,
TIcon,
TBadge,
},
props: {
...props,
},
emits: [
'click',
],
data() {
return {
prefix,
classPrefix: name,
gridItemStyle: '',
gridItemWrapperStyle: '',
gridItemContentStyle: '',
align: 'center',
column: 0,
describedbyID: '',
tools,
iconName: '',
iconData: {},
hover: false,
};
},
watch: {
icon: {
handler(t) {
const obj = setIcon('icon', t, '');
Object.keys(obj).forEach((key) => {
this[key] = obj[key];
});
},
immediate: true,
},
},
mounted() {
this.describedbyID = getUniqueID();
},
methods: {
innerAfterLinked() {
this.updateStyle();
this.column = this[RELATION_MAP.GridItem].column;
},
binderror() {},
bindload() {},
getImageSize(column) {
if (!column || column == 4) return 'middle';
return column > 4 ? 'small' : 'large';
},
updateStyle() {
const { hover, align } = this[RELATION_MAP.GridItem];
const gridItemStyles = [];
const gridItemWrapperStyles = [];
const gridItemContentStyles = [];
const widthStyle = this.getWidthStyle();
const paddingStyle = this.getPaddingStyle();
const borderStyle = this.getBorderStyle();
widthStyle && gridItemStyles.push(widthStyle);
paddingStyle && gridItemWrapperStyles.push(paddingStyle);
borderStyle && gridItemContentStyles.push(borderStyle);
this.gridItemStyle = `${gridItemStyles.join(';')}`;
this.gridItemWrapperStyle = gridItemWrapperStyles.join(';');
this.gridItemContentStyle = gridItemContentStyles.join(';');
this.hover = hover;
this.align = align;
},
// 判断应该加在gridItem上的宽度
getWidthStyle() {
const { column } = this[RELATION_MAP.GridItem];
return column > 0 ? `width:${(1 / column) * 100}%` : '';
},
// 获取应该加在gridWrap上的padding
getPaddingStyle() {
const { gutter } = this[RELATION_MAP.GridItem];
if (gutter) return `padding-bottom:${gutter}rpx;padding-right:${gutter}rpx`;
return '';
},
// 判断border在grid-item-content上的css属性
getBorderStyle() {
const { gutter } = this[RELATION_MAP.GridItem];
let { border } = this[RELATION_MAP.GridItem];
if (!border) {
// 如果border的值没传或者是border的值为false
return '';
}
if (!isObject(border)) {
border = {};
}
const { color = '#266FE8', width = 2, style = 'solid' } = border ;
if (gutter) {
return `border:${width}rpx ${style} ${color}`;
}
return `border-bottom:${width}rpx ${style} ${color};border-right:${width}rpx ${style} ${color}`;
},
onClick(e) {
const { item } = e.currentTarget.dataset;
this.$emit('click', item);
this.jumpLink();
},
jumpLink() {
const { url, jumpType } = this;
if (url && jumpType) {
if (LinkTypes[jumpType]) {
wx[LinkTypes[jumpType]]({ url });
}
}
},
},
});
</script>
<style scoped>
@import './grid-item.css';
</style>
<style scoped>
.t-grid-item__content--left {
width: 100%;
box-sizing: border-box;
}
</style>

63
uni_modules/tdesign-uniapp/components/grid-item/props.ts Normal file
View File

@@ -0,0 +1,63 @@
/* eslint-disable */
/**
* 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
* */
import type { TdGridItemProps } from './type';
export default {
/** 透传至 Badge 属性 */
badgeProps: {
type: Object,
default: () => ({}),
},
/** 文本以外的更多描述，辅助信息。可以通过 Props 传入文本，也可以自定义标题节点 */
description: {
type: String,
},
/** 图标名称。值为字符串表示图标名称，值为 `Object` 类型，表示透传至 `icon` */
icon: {
type: [String, Object],
},
/** 图片，可以是图片地址，也可以自定义图片节点，值为 slot 的时候才能使用插槽 */
image: {
type: String,
},
/** 透传至 Image 组件 */
imageProps: {
type: Object,
default: () => ({}),
},
/** 链接跳转类型 */
jumpType: {
type: String,
default: 'navigate-to' as TdGridItemProps['jumpType'],
validator(val: TdGridItemProps['jumpType']): boolean {
if (!val) return true;
return ['redirect-to', 'switch-tab', 'relaunch', 'navigate-to'].includes(val);
},
},
/** 内容布局方式 */
layout: {
type: String,
default: 'vertical' as TdGridItemProps['layout'],
validator(val: TdGridItemProps['layout']): boolean {
if (!val) return true;
return ['vertical', 'horizontal'].includes(val);
},
},
/** 文本，可以通过 Props 传入文本，也可以自定义标题节点 */
text: {
type: String,
},
/** 点击后的跳转链接 */
url: {
type: String,
default: '',
},
/** 点击子项后触发 */
onClick: {
type: Function,
default: () => ({}),
},
};

56
uni_modules/tdesign-uniapp/components/grid-item/type.ts Normal file
View File

@@ -0,0 +1,56 @@
/* eslint-disable */
/**
* 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
* */
import type { TdBadgeProps as BadgeProps } from '../badge/type';
import type { TdImageProps as ImageProps } from '../image/type';
export interface TdGridItemProps {
/**
* 透传至 Badge 属性
* @default {}
*/
badgeProps?: BadgeProps;
/**
* 文本以外的更多描述，辅助信息。可以通过 Props 传入文本，也可以自定义标题节点
*/
description?: string;
/**
* 图标名称。值为字符串表示图标名称，值为 `Object` 类型，表示透传至 `icon`
*/
icon?: string | object;
/**
* 图片，可以是图片地址，也可以自定义图片节点，值为 slot 的时候才能使用插槽
*/
image?: string;
/**
* 透传至 Image 组件
* @default {}
*/
imageProps?: ImageProps;
/**
* 链接跳转类型
* @default navigate-to
*/
jumpType?: 'redirect-to' | 'switch-tab' | 'relaunch' | 'navigate-to';
/**
* 内容布局方式
* @default vertical
*/
layout?: 'vertical' | 'horizontal';
/**
* 文本，可以通过 Props 传入文本，也可以自定义标题节点
*/
text?: string;
/**
* 点击后的跳转链接
* @default ''
*/
url?: string;
/**
* 点击子项后触发
*/
onClick?: () => void;
}