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

116
uni_modules/tdesign-uniapp/components/cell/README.en-US.md Normal file
View File

@@ -0,0 +1,116 @@
:: BASE_DOC ::
## API
### Cell Props
name | type | default | description | required
-- | -- | -- | -- | --
custom-style | Object | - | CSS(Cascading Style Sheets) | N
align | String | middle | options: top/middle/bottom | N
arrow | Boolean / Object | false | \- | N
bordered | Boolean | true | \- | N
description | String | - | \- | N
hover | Boolean | - | \- | N
image | String | - | \- | N
jump-type | String | navigateTo | options: switchTab/reLaunch/redirectTo/navigateTo | N
left-icon | String / Object | - | \- | N
note | String | - | \- | N
note-style | String / Object | - | \- | N
required | Boolean | false | \- | N
right-icon | String / Object | - | \- | N
right-icon-style | String / Object | - | \- | N
title | String | - | \- | N
title-style | String / Object | - | \- | N
url | String | - | \- | N
### Cell Events
name | params | description
-- | -- | --
click | `(e: MouseEvent)` | \-
### Cell Slots
name | Description
-- | --
description | \-
image | \-
left-icon | \-
note | \-
right-icon | \-
title | \-
### Cell External Classes
className | Description
-- | --
t-class | \-
t-class-center | \-
t-class-description | \-
t-class-hover | \-
t-class-image | \-
t-class-left | \-
t-class-left-icon | \-
t-class-note | \-
t-class-right | \-
t-class-right-icon | \-
t-class-title | \-
### CellGroup Props
name | type | default | description | required
-- | -- | -- | -- | --
custom-style | Object | - | CSS(Cascading Style Sheets) | N
bordered | Boolean | false | \- | N
theme | String | default | options: default/card | N
title | String | - | \- | N
### CellGroup Slots
name | Description
-- | --
\- | \-
### CellGroup External Classes
className | Description
-- | --
t-class | \-
t-class-title | \-
### CSS Variables
The component provides the following CSS variables, which can be used to customize styles.
Name | Default Value | Description
-- | -- | --
--td-cell-group-border-color | @component-stroke | -
--td-cell-group-title-bg-color | @bg-color-secondarycontainer | -
--td-cell-group-title-color | @text-color-placeholder | -
--td-cell-group-title-font-size | 28rpx | -
--td-cell-group-title-line-height | 90rpx | -
--td-cell-group-title-padding-left | 32rpx | -
--td-cell-bg-color | @bg-color-container | -
--td-cell-border-color | @component-stroke | -
--td-cell-border-left-space | @cell-horizontal-padding | -
--td-cell-border-right-space | 0 | -
--td-cell-border-width | 1px | -
--td-cell-description-color | @text-color-secondary | -
--td-cell-description-font | @font-body-medium | -
--td-cell-height | auto | -
--td-cell-horizontal-padding | 32rpx | -
--td-cell-hover-color | @bg-color-secondarycontainer | -
--td-cell-image-height | 96rpx | -
--td-cell-image-width | 96rpx | -
--td-cell-left-icon-color | @brand-color | -
--td-cell-left-icon-size | 48rpx | -
--td-cell-note-color | @text-color-placeholder | -
--td-cell-note-font-size | @font-size-m | -
--td-cell-required-color | @error-color | -
--td-cell-required-font-size | @font-size-m | -
--td-cell-right-icon-color | @text-color-placeholder | -
--td-cell-right-icon-size | 48rpx | -
--td-cell-title-color | @text-color-primary | -
--td-cell-title-font | @font-body-large | -
--td-cell-vertical-padding | 32rpx | -

147
uni_modules/tdesign-uniapp/components/cell/README.md Normal file
View File

@@ -0,0 +1,147 @@
---
title: Cell 单元格
description: 用于各个类别行的信息展示。
spline: data
isComponent: true
---
## 引入
可在 `main.ts` 或在需要使用的页面或组件中引入。
```js
import TCell from '@tdesign/uniapp/cell/cell.vue';
import TCellGroup from '@tdesign/uniapp/cell-group/cell-group.vue';
```
### 类型
单行单元格
{{ base }}
多行单元格
{{ multiple }}
### 样式
卡片单元格
{{ theme }}
## API
### Cell Props
名称 | 类型 | 默认值 | 描述 | 必传
-- | -- | -- | -- | --
custom-style | Object | - | 自定义样式 | N
align | String | middle | 右侧内容的对齐方式，默认居中对齐。可选项：top/middle/bottom | N
arrow | Boolean / Object | false | 是否显示右侧箭头 | N
bordered | Boolean | true | 是否显示下边框 | N
description | String | - | 下方内容描述 | N
hover | Boolean | - | 是否开启点击反馈 | N
image | String | - | 主图 | N
jump-type | String | navigateTo | 链接跳转类型。可选项：switchTab/reLaunch/redirectTo/navigateTo | N
left-icon | String / Object | - | 左侧图标，出现在单元格标题的左侧 | N
note | String | - | 和标题同行的说明文字 | N
note-style | String / Object | - | 说明文字自定义样式 | N
required | Boolean | false | 是否显示表单必填星号 | N
right-icon | String / Object | - | 最右侧图标 | N
right-icon-style | String / Object | - | 右侧图标自定义样式 | N
title | String | - | 标题 | N
title-style | String / Object | - | 标题自定义样式 | N
url | String | - | 点击后跳转链接地址。如果值为空，则表示不需要跳转 | N
### Cell Events
名称 | 参数 | 描述
-- | -- | --
click | `(e: MouseEvent)` | 右侧内容
### Cell Slots
名称 | 描述
-- | --
description | 自定义 `description` 显示内容
image | 自定义 `image` 显示内容
left-icon | 自定义 `left-icon` 显示内容
note | 自定义 `note` 显示内容
right-icon | 自定义 `right-icon` 显示内容
title | 自定义 `title` 显示内容
### Cell External Classes
类名 | 描述
-- | --
t-class | 根节点样式类
t-class-center | 中间（`title`, `description`）内容样式类
t-class-description | 下方描述内容样式类
t-class-hover | 悬停样式类
t-class-image | 图片样式类
t-class-left | 左侧内容样式类
t-class-left-icon | 左侧图标样式类
t-class-note | 右侧说明文字样式类
t-class-right | 右侧内容样式类
t-class-right-icon | 右侧图标样式类
t-class-title | 标题样式类
### CellGroup Props
名称 | 类型 | 默认值 | 描述 | 必传
-- | -- | -- | -- | --
custom-style | Object | - | 自定义样式 | N
bordered | Boolean | false | 是否显示组边框 | N
theme | String | default | 单元格组风格。可选项：default/card | N
title | String | - | 单元格组标题 | N
### CellGroup Slots
名称 | 描述
-- | --
\- | 默认插槽，自定义内容区域内容
### CellGroup External Classes
类名 | 描述
-- | --
t-class | 根节点样式类
t-class-title | 标题样式类
### CSS Variables
组件提供了下列 CSS 变量，可用于自定义样式。
名称 | 默认值 | 描述
-- | -- | --
--td-cell-group-border-color | @component-stroke | -
--td-cell-group-title-bg-color | @bg-color-secondarycontainer | -
--td-cell-group-title-color | @text-color-placeholder | -
--td-cell-group-title-font-size | 28rpx | -
--td-cell-group-title-line-height | 90rpx | -
--td-cell-group-title-padding-left | 32rpx | -
--td-cell-bg-color | @bg-color-container | -
--td-cell-border-color | @component-stroke | -
--td-cell-border-left-space | @cell-horizontal-padding | -
--td-cell-border-right-space | 0 | -
--td-cell-border-width | 1px | -
--td-cell-description-color | @text-color-secondary | -
--td-cell-description-font | @font-body-medium | -
--td-cell-height | auto | -
--td-cell-horizontal-padding | 32rpx | -
--td-cell-hover-color | @bg-color-secondarycontainer | -
--td-cell-image-height | 96rpx | -
--td-cell-image-width | 96rpx | -
--td-cell-left-icon-color | @brand-color | -
--td-cell-left-icon-size | 48rpx | -
--td-cell-note-color | @text-color-placeholder | -
--td-cell-note-font-size | @font-size-m | -
--td-cell-required-color | @error-color | -
--td-cell-required-font-size | @font-size-m | -
--td-cell-right-icon-color | @text-color-placeholder | -
--td-cell-right-icon-size | 48rpx | -
--td-cell-title-color | @text-color-primary | -
--td-cell-title-font | @font-body-large | -
--td-cell-vertical-padding | 32rpx | -

94
uni_modules/tdesign-uniapp/components/cell/cell.css Normal file
View File

@@ -0,0 +1,94 @@
.t-cell {
position: relative;
display: flex;
box-sizing: border-box;
width: 100%;
padding: var(--td-cell-vertical-padding, 32rpx) var(--td-cell-horizontal-padding, 32rpx);
height: var(--td-cell-height, auto);
background-color: var(--td-cell-bg-color, var(--td-bg-color-container, var(--td-font-white-1, #ffffff)));
}
.t-cell--bordered::after {
position: absolute;
box-sizing: border-box;
content: ' ';
pointer-events: none;
right: 0;
left: 0;
bottom: 0;
border-bottom: var(--td-cell-border-width, 1px) solid var(--td-cell-border-color, var(--td-component-stroke, var(--td-gray-color-3, #e7e7e7)));
transform: scaleY(0.5);
transform-origin: bottom;
left: var(--td-cell-border-left-space, var(--td-cell-horizontal-padding, 32rpx));
right: var(--td-cell-border-right-space, 0);
}
.t-cell__description {
font: var(--td-cell-description-font, var(--td-font-body-medium, 28rpx / 44rpx var(--td-font-family, PingFang SC, Microsoft YaHei, Arial Regular)));
color: var(--td-cell-description-color, var(--td-text-color-secondary, var(--td-font-gray-2, rgba(0, 0, 0, 0.6))));
}
.t-cell__description-text {
margin-top: calc(var(--td-spacer, 16rpx) / 2);
}
.t-cell__note {
display: flex;
align-items: center;
justify-content: flex-end;
color: var(--td-cell-note-color, var(--td-text-color-placeholder, var(--td-font-gray-3, rgba(0, 0, 0, 0.4))));
font-size: var(--td-cell-note-font-size, var(--td-font-size-m, 32rpx));
}
.t-cell__title {
margin-right: var(--td-spacer-2, 32rpx);
}
.t-cell__title,
.t-cell__note {
flex: 1 1 auto;
}
.t-cell__title:empty,
.t-cell__note:empty {
display: none;
}
.t-cell__title-text {
display: flex;
font: var(--td-cell-title-font, var(--td-font-body-large, 32rpx / 48rpx var(--td-font-family, PingFang SC, Microsoft YaHei, Arial Regular)));
color: var(--td-cell-title-color, var(--td-text-color-primary, var(--td-font-gray-1, rgba(0, 0, 0, 0.9))));
}
.t-cell__left,
.t-cell__right {
align-self: stretch;
}
.t-cell__left:not(:empty) {
margin-right: var(--td-spacer-1, 24rpx);
}
.t-cell__left-icon {
color: var(--td-cell-left-icon-color, var(--td-brand-color, var(--td-primary-color-7, #0052d9)));
font-size: var(--td-cell-left-icon-size, 48rpx);
}
.t-cell__left-image {
height: var(--td-cell-image-height, 96rpx);
width: var(--td-cell-image-width, 96rpx);
}
.t-cell__note:not(:empty) + .t-cell__right {
margin-left: calc(var(--td-spacer, 16rpx) / 2);
}
.t-cell__right {
display: flex;
}
.t-cell__right-icon {
color: var(--td-cell-right-icon-color, var(--td-text-color-placeholder, var(--td-font-gray-3, rgba(0, 0, 0, 0.4))));
font-size: var(--td-cell-right-icon-size, 48rpx);
}
.t-cell__right--middle {
align-items: center;
}
.t-cell__right--top {
align-items: flex-start;
}
.t-cell__right--bottom {
align-items: flex-end;
}
.t-cell--hover {
background-color: var(--td-cell-hover-color, var(--td-bg-color-secondarycontainer, var(--td-gray-color-1, #f3f3f3)));
}
.t-cell--required {
font-size: var(--td-cell-required-font-size, var(--td-font-size-m, 32rpx));
color: var(--td-cell-required-color, var(--td-error-color, var(--td-error-color-6, #d54941)));
}

260
uni_modules/tdesign-uniapp/components/cell/cell.vue Normal file
View File

@@ -0,0 +1,260 @@
<template>
<view
:style="tools._style([customStyle])"
:class="[
tClass,
tools.cls(classPrefix, [['bordered', bordered || isLastChild]])
]"
:hover-class="hover ? classPrefix + '--hover' : ''"
hover-stay-time="70"
:aria-role="ariaRole || (arrow ? 'button' : '')"
:aria-label="ariaLabel"
@click="onClick"
>
<view :class="classPrefix + '__left ' + tClassLeft">
<block
v-if="_leftIcon"
name="icon"
>
<t-icon
:custom-style="leftIconCustomStyle"
:t-class="classPrefix + '__left-icon ' + tClassLeftIcon"
:name="_leftIcon.name"
:size="_leftIcon.size"
:color="_leftIcon.color"
:aria-hidden="true"
:aria-label="_leftIcon.ariaLabel"
:aria-role="_leftIcon.ariaRole"
@click="'handleClose' || ''"
/>
</block>
<slot name="left-icon" />
<t-image
v-if="image"
shape="round"
:t-class="classPrefix + '__left-image ' + tClassImage"
:src="image"
:custom-style="leftImageCustomStyle"
/>
<slot name="image" />
</view>
<view :class="classPrefix + '__title ' + tClassCenter">
<view
:class="[
classPrefix + '__title-text ',
tClassTitle
]"
:style="tools._style(titleStyle)"
>
<block v-if="title">
{{ title }}
</block>
<slot name="title" />
<block v-if="required">
<text
decode
:class="classPrefix + '--required'"
>
&nbsp;*
</text>
</block>
</view>
<view
:class="[
classPrefix + '__description ',
tClassDescription
]"
>
<view
v-if="description"
:class="classPrefix + '__description-text'"
>
{{ description }}
</view>
<slot name="description" />
</view>
</view>
<view
:class="[
classPrefix + '__note ',
tClassNote
]"
:style="tools._style(noteStyle)"
>
<text v-if="note">
{{ note }}
</text>
<slot name="note" />
</view>
<view
:class="[
tools.cls(classPrefix + '__right', [align]),
tClassRight
]"
>
<t-icon
v-if="_arrow"
:custom-style="rightArrowCustomStyle"
:t-class=" classPrefix + '__right-icon ' + tClassRightIcon"
:name="_arrow.name || ''"
:size="_arrow.size"
:color="_arrow.color"
:aria-hidden="true"
:aria-label="_arrow.ariaLabel"
:aria-role="_arrow.ariaRole"
@click="'handleClose' || ''"
/>
<block v-else>
<block
v-if="_rightIcon"
name="icon"
>
<t-icon
:custom-style="rightIconCustomStyle"
:t-class=" classPrefix + '__right-icon ' + tClassRightIcon"
:name="_rightIcon.name"
:size="_rightIcon.size"
:color="_rightIcon.color || ''"
:aria-hidden="true"
:aria-label="_rightIcon.ariaLabel"
:aria-role="_rightIcon.ariaRole"
@click="'handleClose' || ''"
/>
</block>
<slot name="right-icon" />
</block>
</view>
</view>
</template>
<script>
import TIcon from '../icon/icon';
import TImage from '../image/image';
import { uniComponent } from '../common/src/index';
import { prefix } from '../common/config';
import props from './props';
import { calcIcon } from '../common/utils';
import tools from '../common/utils.wxs';
import { ChildrenMixin, RELATION_MAP } from '../common/relation';
const name = `${prefix}-cell`;
const COMMON_RIGHT_ICON_STYLE = {
color: 'var(--td-cell-right-icon-color, var(--td-text-color-placeholder, var(--td-font-gray-3, rgba(0, 0, 0, .4))))',
fontSize: 'var(--td-cell-right-icon-font-size, 24px)',
};
export default uniComponent({
name,
options: {
styleIsolation: 'shared',
},
externalClasses: [
`${prefix}-class`,
`${prefix}-class-title`,
`${prefix}-class-description`,
`${prefix}-class-note`,
`${prefix}-class-hover`,
`${prefix}-class-image`,
`${prefix}-class-left`,
`${prefix}-class-left-icon`,
`${prefix}-class-center`,
`${prefix}-class-right`,
`${prefix}-class-right-icon`,
],
mixins: [ChildrenMixin(RELATION_MAP.Cell)],
components: {
TIcon,
TImage,
},
props: {
...props,
},
emits: [
'click',
],
data() {
return {
prefix,
classPrefix: name,
_arrow: null,
_rightIcon: null,
_leftIcon: null,
isLastChild: false,
tools,
};
},
computed: {
rightArrowCustomStyle() {
return tools._style([
COMMON_RIGHT_ICON_STYLE,
this.rightIconStyle || '',
this._arrow.style || '',
]);
},
rightIconCustomStyle() {
return tools._style([
COMMON_RIGHT_ICON_STYLE,
this.rightIconStyle || '',
this._rightIcon.style || '',
]);
},
leftIconCustomStyle() {
return tools._style([
{
color: 'var(--td-cell-left-icon-color, var(--td-brand-color, var(--td-primary-color-7, #0052d9)))',
fontSize: 'var(--td-cell-left-icon-font-size, 24px)',
},
this._leftIcon.style || '',
]);
},
leftImageCustomStyle() {
return tools._style({
height: 'var(--td-cell-image-height, 48px)',
width: 'var(--td-cell-image-width, 48px)',
});
},
},
watch: {
leftIcon: {
handler(e) {
this.setIcon('_leftIcon', e, '');
},
immediate: true,
},
rightIcon: {
handler(e) {
this.setIcon('_rightIcon', e, '');
},
immediate: true,
},
arrow: {
handler(e) {
this.setIcon('_arrow', e, 'chevron-right');
},
immediate: true,
},
},
methods: {
setIcon(e, t, s) {
this[e] = calcIcon(t, s);
},
onClick(e) {
this.$emit('click', e);
this.jumpLink();
},
jumpLink(e = 'url', t = 'jumpType') {
const s = this[e];
const i = this[t];
if (s) {
uni[i]({
url: s,
});
}
},
},
});
</script>
<style scoped>
@import './cell.css';
</style>

87
uni_modules/tdesign-uniapp/components/cell/props.ts Normal file
View File

@@ -0,0 +1,87 @@
/* eslint-disable */
/**
* 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
* */
import type { TdCellProps } from './type';
export default {
/** 右侧内容的对齐方式，默认居中对齐 */
align: {
type: String,
default: 'middle' as TdCellProps['align'],
validator(val: TdCellProps['align']): boolean {
if (!val) return true;
return ['top', 'middle', 'bottom'].includes(val);
},
},
/** 是否显示右侧箭头 */
arrow: {
type: [Boolean, Object],
default: false as TdCellProps['arrow'],
},
/** 是否显示下边框 */
bordered: {
type: Boolean,
default: true,
},
/** 下方内容描述 */
description: {
type: String,
},
/** 是否开启点击反馈 */
hover: Boolean,
/** 主图 */
image: {
type: String,
},
/** 链接跳转类型 */
jumpType: {
type: String,
default: 'navigateTo' as TdCellProps['jumpType'],
validator(val: TdCellProps['jumpType']): boolean {
if (!val) return true;
return ['switchTab', 'reLaunch', 'redirectTo', 'navigateTo'].includes(val);
},
},
/** 左侧图标，出现在单元格标题的左侧 */
leftIcon: {
type: [String, Object],
},
/** 和标题同行的说明文字 */
note: {
type: String,
},
/** 说明文字自定义样式 */
noteStyle: {
type: [String, Object],
},
/** 是否显示表单必填星号 */
required: Boolean,
/** 最右侧图标 */
rightIcon: {
type: [String, Object],
},
/** 右侧图标自定义样式 */
rightIconStyle: {
type: [String, Object],
},
/** 标题 */
title: {
type: String,
},
/** 标题自定义样式 */
titleStyle: {
type: [String, Object],
},
/** 点击后跳转链接地址。如果值为空，则表示不需要跳转 */
url: {
type: String,
default: '',
},
/** 右侧内容 */
onClick: {
type: Function,
default: () => ({}),
},
};

82
uni_modules/tdesign-uniapp/components/cell/type.ts Normal file
View File

@@ -0,0 +1,82 @@
/* eslint-disable */
/**
* 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
* */
export interface TdCellProps {
/**
* 右侧内容的对齐方式，默认居中对齐
* @default middle
*/
align?: 'top' | 'middle' | 'bottom';
/**
* 是否显示右侧箭头
* @default false
*/
arrow?: boolean | object;
/**
* 是否显示下边框
* @default true
*/
bordered?: boolean;
/**
* 下方内容描述
*/
description?: string;
/**
* 是否开启点击反馈
*/
hover?: boolean;
/**
* 主图
*/
image?: string;
/**
* 链接跳转类型
* @default navigateTo
*/
jumpType?: 'switchTab' | 'reLaunch' | 'redirectTo' | 'navigateTo';
/**
* 左侧图标，出现在单元格标题的左侧
*/
leftIcon?: string | object;
/**
* 和标题同行的说明文字
*/
note?: string;
/**
* 说明文字自定义样式
*/
noteStyle?: string | object;
/**
* 是否显示表单必填星号
* @default false
*/
required?: boolean;
/**
* 最右侧图标
*/
rightIcon?: string | object;
/**
* 右侧图标自定义样式
*/
rightIconStyle?: string | object;
/**
* 标题
*/
title?: string;
/**
* 标题自定义样式
*/
titleStyle?: string | object;
/**
* 点击后跳转链接地址。如果值为空，则表示不需要跳转
* @default ''
*/
url?: string;
/**
* 右侧内容
*/
onClick?: (e: MouseEvent) => void;
}