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

31
HuajisheCheckChaoXing/miniprogram_npm/tdesign-miniprogram/divider/README.en-US.md Normal file
View File

@@ -0,0 +1,31 @@
:: BASE_DOC ::
## API
### Divider 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
align | String | center | options: left/right/center | N
content | String / Slot | - | [see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N
dashed | Boolean | false | \- | N
layout | String | horizontal | options: horizontal/vertical | N
### Divider External Classes
className | Description
-- | --
t-class | \-
t-class-content | \-
### CSS Variables
The component provides the following CSS variables, which can be used to customize styles.
Name | Default Value | Description
-- | -- | --
--td-divider-color | @bg-color-component | -
--td-divider-content-color | @font-gray-3 | -
--td-divider-content-font-size | 24rpx | -
--td-divider-content-line-height | 40rpx | -
--td-divider-content-line-style | solid | -

67
HuajisheCheckChaoXing/miniprogram_npm/tdesign-miniprogram/divider/README.md Normal file
View File

@@ -0,0 +1,67 @@
---
title: Divider 分割线
description: 用于分割、组织、细化有一定逻辑的组织元素内容和页面结构。
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>
## 引入
全局引入，在 miniprogram 根目录下的`app.json`中配置，局部引入，在需要引入的页面或组件的`index.json`中配置。
```json
"usingComponents": {
"t-divider": "tdesign-miniprogram/divider/divider"
}
```
## 代码演示
<a href="https://developers.weixin.qq.com/s/tfHzFbma7IS4" 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>
### 基础分割符
分割符主要是由直线和文字组成，通过`slot`传入分割线文案或者其他自定义内容，通过`layout`控制分隔符是垂直还是横向
{{ base }}
### 虚线样式
{{ theme }}
## API
### Divider Props
名称 | 类型 | 默认值 | 描述 | 必传
-- | -- | -- | -- | --
style | Object | - | 样式 | N
custom-style | Object | - | 样式，一般用于开启虚拟化组件节点场景 | N
align | String | center | 文本位置（仅在水平分割线有效）。可选项：left/right/center | N
content | String / Slot | - | 子元素。[通用类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N
dashed | Boolean | false | 是否虚线（仅在水平分割线有效） | N
layout | String | horizontal | 分隔线类型有两种：水平和垂直。可选项：horizontal/vertical | N
### Divider External Classes
类名 | 描述
-- | --
t-class | 根节点样式类
t-class-content | 内容样式类
### CSS Variables
组件提供了下列 CSS 变量，可用于自定义样式。
名称 | 默认值 | 描述
-- | -- | --
--td-divider-color | @bg-color-component | -
--td-divider-content-color | @font-gray-3 | -
--td-divider-content-font-size | 24rpx | -
--td-divider-content-line-height | 40rpx | -
--td-divider-content-line-style | solid | -

18
HuajisheCheckChaoXing/miniprogram_npm/tdesign-miniprogram/divider/divider.d.ts vendored Normal file
View File

@@ -0,0 +1,18 @@
import { SuperComponent } from '../common/src/index';
export default class Divider extends SuperComponent {
externalClasses: string[];
options: {
multipleSlots: boolean;
};
properties: import("./type").TdDividerProps;
data: {
prefix: string;
classPrefix: string;
};
observers: {
lineColor(): void;
};
methods: {
setStyle(): void;
};
}

43
HuajisheCheckChaoXing/miniprogram_npm/tdesign-miniprogram/divider/divider.js Normal file
View File

@@ -0,0 +1,43 @@
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';
const { prefix } = config;
const name = `${prefix}-divider`;
let Divider = class Divider extends SuperComponent {
constructor() {
super(...arguments);
this.externalClasses = [`${prefix}-class`, `${prefix}-class-content`];
this.options = {
multipleSlots: true,
};
this.properties = props;
this.data = {
prefix,
classPrefix: name,
};
this.observers = {
lineColor() {
this.setStyle();
},
};
this.methods = {
setStyle() {
const { lineColor } = this.properties;
const dividerStyle = `${lineColor ? `border-color: ${lineColor};` : ''}`;
this.setData({
dividerStyle,
});
},
};
}
};
Divider = __decorate([
wxComponent()
], Divider);
export default Divider;

4
HuajisheCheckChaoXing/miniprogram_npm/tdesign-miniprogram/divider/divider.json Normal file
View File

@@ -0,0 +1,4 @@
{
"component": true,
"styleIsolation": "apply-shared"
}

13
HuajisheCheckChaoXing/miniprogram_npm/tdesign-miniprogram/divider/divider.wxml Normal file
View File

@@ -0,0 +1,13 @@
<wxs src="../common/utils.wxs" module="_" />
<view class="{{layout==='vertical'? classPrefix + '--vertical-center' : ''}}">
<view
class="{{classPrefix}} class {{prefix}}-class {{classPrefix}}--{{layout}} {{classPrefix}}--{{align}} {{dashed? classPrefix + '--dashed' : ''}} "
style="{{_._style([dividerStyle, style, customStyle])}}"
>
<view class="{{prefix}}-class-content {{classPrefix}}__content">
<view wx:if="{{content}}"> {{content}} </view>
<slot wx:else name="content" />
</view>
</view>
</view>

85
HuajisheCheckChaoXing/miniprogram_npm/tdesign-miniprogram/divider/divider.wxss Normal file
View File

@@ -0,0 +1,85 @@
.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-divider {
display: flex;
color: var(--td-divider-color, var(--td-bg-color-component, var(--td-gray-color-3, #e7e7e7)));
border-color: var(--td-divider-color, var(--td-bg-color-component, var(--td-gray-color-3, #e7e7e7)));
border-style: var(--td-divider-content-line-style, solid);
border-width: 0;
}
.t-divider::before,
.t-divider::after {
content: '';
display: block;
flex: 1;
box-sizing: border-box;
border: inherit;
border-color: inherit;
border-style: inherit;
}
.t-divider--horizontal {
align-items: center;
margin-top: 20rpx;
margin-bottom: 20rpx;
}
.t-divider--horizontal::before,
.t-divider--horizontal::after {
border-top-width: 1px;
transform: scaleY(0.5);
transform-origin: bottom;
}
.t-divider--horizontal .t-divider__content:not(:empty) {
margin: 0 24rpx;
}
.t-divider--vertical {
flex-direction: column;
height: 28rpx;
margin: 0 16rpx;
}
.t-divider--vertical::before,
.t-divider--vertical::after {
border-left-width: 1px;
transform: scaleX(0.5);
transform-origin: bottom;
}
.t-divider--vertical-center {
align-items: center;
height: 100%;
}
.t-divider--dashed {
border-style: dashed;
}
.t-divider__content {
font-size: var(--td-divider-content-font-size, 24rpx);
line-height: var(--td-divider-content-line-height, 40rpx);
color: var(--td-divider-content-color, var(--td-text-color-placeholder, var(--td-font-gray-3, rgba(0, 0, 0, 0.4))));
}
.t-divider--left::before,
.t-divider--right::after {
max-width: 60rpx;
}

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

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

18
HuajisheCheckChaoXing/miniprogram_npm/tdesign-miniprogram/divider/props.js Normal file
View File

@@ -0,0 +1,18 @@
const props = {
align: {
type: String,
value: 'center',
},
content: {
type: String,
},
dashed: {
type: Boolean,
value: false,
},
layout: {
type: String,
value: 'horizontal',
},
};
export default props;

18
HuajisheCheckChaoXing/miniprogram_npm/tdesign-miniprogram/divider/type.d.ts vendored Normal file
View File

@@ -0,0 +1,18 @@
export interface TdDividerProps {
align?: {
type: StringConstructor;
value?: 'left' | 'right' | 'center';
};
content?: {
type: StringConstructor;
value?: string;
};
dashed?: {
type: BooleanConstructor;
value?: boolean;
};
layout?: {
type: StringConstructor;
value?: 'horizontal' | 'vertical';
};
}

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

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