first commit

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

View File

@@ -0,0 +1,31 @@
:: BASE_DOC ::
## API
### Col Props
name | type | default | description | required
-- | -- | -- | -- | --
custom-style | Object | - | CSS(Cascading Style Sheets) | N
offset | String / Number | - | \- | N
span | String / Number | - | \- | N
### Col Slots
name | Description
-- | --
\- | \-
### Row Props
name | type | default | description | required
-- | -- | -- | -- | --
custom-style | Object | - | CSS(Cascading Style Sheets) | N
gutter | String / Number | - | \- | N
### Row Slots
name | Description
-- | --
\- | \-

View File

@@ -0,0 +1,60 @@
---
title: Layout 布局
description: 以规则的网格阵列来指导和规范页面中的版面布局以及信息分布,提高界面内布局的一致性,节约成本。
spline: base
isComponent: true
---
## 引入
可在 `main.ts` 或在需要使用的页面或组件中引入。
```js
import TRow from '@tdesign/uniapp/row/row.vue';
import TCol from '@tdesign/uniapp/col/col.vue';
```
### 组件类型
基础
{{ base }}
增加间距
{{ offset }}
## API
### Col Props
名称 | 类型 | 默认值 | 描述 | 必传
-- | -- | -- | -- | --
custom-style | Object | - | 自定义样式 | N
offset | String / Number | - | 列的偏移量默认单位px | N
span | String / Number | - | 列的宽度默认单位px | N
### Col Slots
名称 | 描述
-- | --
\- | 默认插槽,列内容
### Row Props
名称 | 类型 | 默认值 | 描述 | 必传
-- | -- | -- | -- | --
custom-style | Object | - | 自定义样式 | N
gutter | String / Number | - | 列之间的间距默认单位px | N
### Row Slots
名称 | 描述
-- | --
\- | 默认插槽,行内容

View File

@@ -0,0 +1,149 @@
.t-col {
display: block;
box-sizing: border-box;
min-height: 1px;
}
.t-col--1 {
width: 4.16666667%;
}
.t-col--offset-1 {
margin-left: 4.16666667%;
}
.t-col--2 {
width: 8.33333333%;
}
.t-col--offset-2 {
margin-left: 8.33333333%;
}
.t-col--3 {
width: 12.5%;
}
.t-col--offset-3 {
margin-left: 12.5%;
}
.t-col--4 {
width: 16.66666667%;
}
.t-col--offset-4 {
margin-left: 16.66666667%;
}
.t-col--5 {
width: 20.83333333%;
}
.t-col--offset-5 {
margin-left: 20.83333333%;
}
.t-col--6 {
width: 25%;
}
.t-col--offset-6 {
margin-left: 25%;
}
.t-col--7 {
width: 29.16666667%;
}
.t-col--offset-7 {
margin-left: 29.16666667%;
}
.t-col--8 {
width: 33.33333333%;
}
.t-col--offset-8 {
margin-left: 33.33333333%;
}
.t-col--9 {
width: 37.5%;
}
.t-col--offset-9 {
margin-left: 37.5%;
}
.t-col--10 {
width: 41.66666667%;
}
.t-col--offset-10 {
margin-left: 41.66666667%;
}
.t-col--11 {
width: 45.83333333%;
}
.t-col--offset-11 {
margin-left: 45.83333333%;
}
.t-col--12 {
width: 50%;
}
.t-col--offset-12 {
margin-left: 50%;
}
.t-col--13 {
width: 54.16666667%;
}
.t-col--offset-13 {
margin-left: 54.16666667%;
}
.t-col--14 {
width: 58.33333333%;
}
.t-col--offset-14 {
margin-left: 58.33333333%;
}
.t-col--15 {
width: 62.5%;
}
.t-col--offset-15 {
margin-left: 62.5%;
}
.t-col--16 {
width: 66.66666667%;
}
.t-col--offset-16 {
margin-left: 66.66666667%;
}
.t-col--17 {
width: 70.83333333%;
}
.t-col--offset-17 {
margin-left: 70.83333333%;
}
.t-col--18 {
width: 75%;
}
.t-col--offset-18 {
margin-left: 75%;
}
.t-col--19 {
width: 79.16666667%;
}
.t-col--offset-19 {
margin-left: 79.16666667%;
}
.t-col--20 {
width: 83.33333333%;
}
.t-col--offset-20 {
margin-left: 83.33333333%;
}
.t-col--21 {
width: 87.5%;
}
.t-col--offset-21 {
margin-left: 87.5%;
}
.t-col--22 {
width: 91.66666667%;
}
.t-col--offset-22 {
margin-left: 91.66666667%;
}
.t-col--23 {
width: 95.83333333%;
}
.t-col--offset-23 {
margin-left: 95.83333333%;
}
.t-col--24 {
width: 100%;
}
.t-col--offset-24 {
margin-left: 100%;
}

View File

@@ -0,0 +1,58 @@
<template>
<view
:class="[
tClass,
tools.cls(classPrefix, [span]),
(offset ? classPrefix + '--offset-' + offset : '')
]"
:style="getColStyles(gutter, customStyle)"
>
<slot />
</view>
</template>
<script>
import { uniComponent } from '../common/src/index';
import { prefix } from '../common/config';
import props from './props';
import tools from '../common/utils.wxs';
import { getColStyles } from './computed.js';
import { ChildrenMixin, RELATION_MAP } from '../common/relation';
const name = `${prefix}-col`;
export default uniComponent({
name,
options: {
styleIsolation: 'shared',
virtualHost: true,
},
externalClasses: [`${prefix}-class`],
mixins: [ChildrenMixin(RELATION_MAP.Col)],
props: {
...props,
},
data() {
return {
prefix,
classPrefix: name,
tools,
gutter: '',
};
},
methods: {
getColStyles,
},
});
</script>
<style scoped>
@import './col.css';
</style>
<style scoped>
.t-col {
/* 适配 qq 小程序等 */
display: unset;
float: left;
}
</style>

View File

@@ -0,0 +1,14 @@
import utils from '../common/utils.wxs';
export function getColStyles(gutter, customStyle) {
let _style = '';
if (gutter) {
_style = utils._style({
'padding-right': utils.addUnit(gutter / 2),
'padding-left': utils.addUnit(gutter / 2),
});
}
return utils._style([customStyle]) + _style;
}

View File

@@ -0,0 +1,16 @@
/* eslint-disable */
/**
* 该文件为脚本自动生成文件,请勿随意修改。如需修改请联系 PMC
* */
export default {
/** 列的偏移量默认单位px */
offset: {
type: [String, Number],
},
/** 列的宽度默认单位px */
span: {
type: [String, Number],
},
};

View File

@@ -0,0 +1,16 @@
/* eslint-disable */
/**
* 该文件为脚本自动生成文件,请勿随意修改。如需修改请联系 PMC
* */
export interface TdColProps {
/**
* 列的偏移量默认单位px
*/
offset?: string | number;
/**
* 列的宽度默认单位px
*/
span?: string | number;
}