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

90
HuajisheCheckChaoXing/miniprogram_npm/tdesign-miniprogram/radio/README.en-US.md Normal file
View File

@@ -0,0 +1,90 @@
:: BASE_DOC ::
## API
### Radio 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
allow-uncheck | Boolean | false | \- | N
block | Boolean | true | \- | N
checked | Boolean | false | \- | N
default-checked | Boolean | undefined | uncontrolled property | N
content | String / Slot | - | [see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N
content-disabled | Boolean | false | \- | N
disabled | Boolean | undefined | \- | N
icon | String / Array / Slot | 'circle' | Typescript：`'circle' \| 'line' \| 'dot' \| Array<string>` | N
label | String / Slot | - | [see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N
max-content-row | Number | 5 | \- | N
max-label-row | Number | 3 | \- | N
name | String | - | \- | N
placement | String | - | options: left/right | N
readonly | Boolean | undefined | \- | N
value | String / Number / Boolean | false | Typescript：`T` `type RadioValue = string \| number \| boolean`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/radio/type.ts) | N
### Radio Events
name | params | description
-- | -- | --
change | `(checked: boolean)` | \-
### Radio External Classes
className | Description
-- | --
t-class | \-
t-class-border | \-
t-class-content | \-
t-class-icon | \-
t-class-label | \-
### RadioGroup 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
allow-uncheck | Boolean | false | \- | N
borderless | Boolean | false | \- | N
disabled | Boolean | undefined | \- | N
icon | String / Array | 'circle' | Typescript：`'circle' \| 'line' \| 'dot' \| Array<string>` | N
keys | Object | - | Typescript：`KeysType`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N
name | String | - | \- | N
options | Array | - | Typescript：`Array<RadioOption>` `type RadioOption = string \| number \| RadioOptionObj` `interface RadioOptionObj { label?: string; value?: string \| number; readonly?: boolean; disabled?: boolean; allowUncheck?: boolean; }`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/radio-group/type.ts) | N
placement | String | left | options: left/right | N
readonly | Boolean | undefined | \- | N
value | String / Number / Boolean | - | Typescript：`T` `type RadioValue = string \| number \| boolean`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/radio-group/type.ts) | N
default-value | String / Number / Boolean | undefined | uncontrolled property。Typescript：`T` `type RadioValue = string \| number \| boolean`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/radio-group/type.ts) | N
### RadioGroup Events
name | params | description
-- | -- | --
change | `(value: RadioValue)` | \-
### CSS Variables
The component provides the following CSS variables, which can be used to customize styles.
Name | Default Value | Description
-- | -- | --
--td-radio-bg-color | @bg-color-container | -
--td-radio-border-color | @component-stroke | -
--td-radio-content-checked-color | @font-gray-2 | -
--td-radio-content-color | @font-gray-2 | -
--td-radio-content-disabled-color | @font-gray-4 | -
--td-radio-content-font-size | 28rpx | -
--td-radio-content-line-height | 44rpx | -
--td-radio-font-size | 32rpx | -
--td-radio-icon-checked-color | @brand-color | -
--td-radio-icon-color | @component-border | -
--td-radio-icon-disabled-bg-color | @bg-color-component-disabled | -
--td-radio-icon-disabled-color | @brand-color-disabled | -
--td-radio-icon-size | 48rpx | -
--td-radio-label-checked-color | @font-gray-1 | -
--td-radio-label-color | @font-gray-1 | -
--td-radio-label-disabled-color | @font-gray-4 | -
--td-radio-label-line-height | 48rpx | -
--td-radio-vertical-padding | 32rpx | -

143
HuajisheCheckChaoXing/miniprogram_npm/tdesign-miniprogram/radio/README.md Normal file
View File

@@ -0,0 +1,143 @@
---
title: Radio 单选框
description: 用于在预设的一组选项中执行单项选择，并呈现选择结果。
spline: form
isComponent: true
---
<span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20lines-98%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-99%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20branches-88%25-blue" /></span>
## 引入
全局引入，在 miniprogram 根目录下的`app.json`中配置，局部引入，在需要引入的页面或组件的`index.json`中配置。
```json
"usingComponents": {
"t-radio": "tdesign-miniprogram/radio/radio",
"t-radio-group": "tdesign-miniprogram/radio-group/radio-group"
}
```
## 代码演示
<a href="https://developers.weixin.qq.com/s/GW6DrimI7hSV" 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 }}
### 横向单选框
{{ horizontal }}
### 单选框状态
{{ status }}
### 勾选样式
{{ theme }}
### 勾选显示位置
{{ align }}
### 非通栏单选样式
{{ card }}
### 特殊样式
{{ special }}
## API
### Radio Props
名称 | 类型 | 默认值 | 描述 | 必传
-- | -- | -- | -- | --
style | Object | - | 样式 | N
custom-style | Object | - | 样式，一般用于开启虚拟化组件节点场景 | N
allow-uncheck | Boolean | false | 是否允许取消选中 | N
block | Boolean | true | 是否为块级元素 | N
checked | Boolean | false | 是否选中 | N
default-checked | Boolean | undefined | 是否选中。非受控属性 | N
content | String / Slot | - | 单选内容。[通用类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N
content-disabled | Boolean | false | 是否禁用组件内容（content）触发选中 | N
disabled | Boolean | undefined | 是否为禁用态 | N
icon | String / Array / Slot | 'circle' | 自定义选中图标和非选中图标。使用 Array 时表示：`[选中态图标，非选中态图标]`。使用 String 时，值为 circle 表示填充型图标、值为 line 表示描边型图标、值为 dot 表示圆点图标，值为 slot 时使用插槽。TS 类型：`'circle' \| 'line' \| 'dot' \| Array<string>` | N
label | String / Slot | - | 主文案。[通用类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N
max-content-row | Number | 5 | 内容最大行数限制 | N
max-label-row | Number | 3 | 主文案最大行数限制 | N
name | String | - | HTML 元素原生属性 | N
placement | String | - | 复选框和内容相对位置。优先级高于 RadioGroup.placement。Radio 单独存在时，默认值为 left。如果父组件存在 RadioGroup，默认值便由 RadioGroup.placement 决定。可选项：left/right | N
readonly | Boolean | undefined | 只读状态 | N
value | String / Number / Boolean | false | 单选按钮的值。TS 类型：`T` `type RadioValue = string \| number \| boolean`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/radio/type.ts) | N
### Radio Events
名称 | 参数 | 描述
-- | -- | --
change | `(checked: boolean)` | 值变化时触发
### Radio External Classes
类名 | 描述
-- | --
t-class | 根节点样式类
t-class-border | 边框样式类
t-class-content | 内容样式类
t-class-icon | 图标样式类
t-class-label | 标签样式类
### RadioGroup Props
名称 | 类型 | 默认值 | 描述 | 必传
-- | -- | -- | -- | --
style | Object | - | 样式 | N
custom-style | Object | - | 样式，一般用于开启虚拟化组件节点场景 | N
allow-uncheck | Boolean | false | 是否允许取消选中 | N
borderless | Boolean | false | 是否开启无边框模式 | N
disabled | Boolean | undefined | 是否禁用全部子单选框 | N
icon | String / Array | 'circle' | 自定义选中图标和非选中图标。示例：[选中态图标，非选中态图标]。使用 String 时，值为 circle 表示填充型图标、值为 line 表示描边型图标、值为 dot 表示圆点图标；仅在使用 options 时生效。TS 类型：`'circle' \| 'line' \| 'dot' \| Array<string>` | N
keys | Object | - | 用来定义 value / label 在 `options` 中对应的字段别名。TS 类型：`KeysType`。[通用类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N
name | String | - | HTML 元素原生属性 | N
options | Array | - | 单选组件按钮形式。RadioOption 数据类型为 string 或 number 时，表示 label 和 value 值相同。TS 类型：`Array<RadioOption>` `type RadioOption = string \| number \| RadioOptionObj` `interface RadioOptionObj { label?: string; value?: string \| number; readonly?: boolean; disabled?: boolean; allowUncheck?: boolean; }`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/radio-group/type.ts) | N
placement | String | left | 复选框和内容相对位置。优先级低于 Radio.placement。可选项：left/right | N
readonly | Boolean | undefined | 只读状态 | N
value | String / Number / Boolean | - | 选中的值。TS 类型：`T` `type RadioValue = string \| number \| boolean`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/radio-group/type.ts) | N
default-value | String / Number / Boolean | undefined | 选中的值。非受控属性。TS 类型：`T` `type RadioValue = string \| number \| boolean`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/radio-group/type.ts) | N
### RadioGroup Events
名称 | 参数 | 描述
-- | -- | --
change | `(value: RadioValue)` | 选中值发生变化时触发
### CSS Variables
组件提供了下列 CSS 变量，可用于自定义样式。
名称 | 默认值 | 描述
-- | -- | --
--td-radio-bg-color | @bg-color-container | -
--td-radio-border-color | @component-stroke | -
--td-radio-content-checked-color | @font-gray-2 | -
--td-radio-content-color | @font-gray-2 | -
--td-radio-content-disabled-color | @font-gray-4 | -
--td-radio-content-font-size | 28rpx | -
--td-radio-content-line-height | 44rpx | -
--td-radio-font-size | 32rpx | -
--td-radio-icon-checked-color | @brand-color | -
--td-radio-icon-color | @component-border | -
--td-radio-icon-disabled-bg-color | @bg-color-component-disabled | -
--td-radio-icon-disabled-color | @brand-color-disabled | -
--td-radio-icon-size | 48rpx | -
--td-radio-label-checked-color | @font-gray-1 | -
--td-radio-label-color | @font-gray-1 | -
--td-radio-label-disabled-color | @font-gray-4 | -
--td-radio-label-line-height | 48rpx | -
--td-radio-vertical-padding | 32rpx | -

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

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

60
HuajisheCheckChaoXing/miniprogram_npm/tdesign-miniprogram/radio/props.js Normal file
View File

@@ -0,0 +1,60 @@
const props = {
allowUncheck: {
type: Boolean,
value: false,
},
block: {
type: Boolean,
value: true,
},
checked: {
type: Boolean,
value: null,
},
defaultChecked: {
type: Boolean,
value: false,
},
content: {
type: String,
},
contentDisabled: {
type: Boolean,
value: false,
},
disabled: {
type: null,
value: undefined,
},
icon: {
type: null,
value: 'circle',
},
label: {
type: String,
},
maxContentRow: {
type: Number,
value: 5,
},
maxLabelRow: {
type: Number,
value: 3,
},
name: {
type: String,
value: '',
},
placement: {
type: String,
},
readonly: {
type: null,
value: undefined,
},
value: {
type: null,
value: false,
},
};
export default props;

107
HuajisheCheckChaoXing/miniprogram_npm/tdesign-miniprogram/radio/radio.d.ts vendored Normal file
View File

@@ -0,0 +1,107 @@
import { SuperComponent, RelationsOptions } from '../common/src/index';
export default class Radio extends SuperComponent {
externalClasses: string[];
behaviors: string[];
relations: RelationsOptions;
options: {
multipleSlots: boolean;
};
lifetimes: {
attached(): void;
};
properties: {
borderless: {
type: BooleanConstructor;
value: boolean;
};
tId: {
type: StringConstructor;
};
allowUncheck?: {
type: BooleanConstructor;
value?: boolean;
};
block?: {
type: BooleanConstructor;
value?: boolean;
};
checked?: {
type: BooleanConstructor;
value?: boolean;
};
defaultChecked?: {
type: BooleanConstructor;
value?: boolean;
};
content?: {
type: StringConstructor;
value?: string;
};
contentDisabled?: {
type: BooleanConstructor;
value?: boolean;
};
disabled?: {
type: BooleanConstructor;
value?: boolean;
};
icon?: {
type: null;
value?: string[] | "circle" | "line" | "dot";
};
label?: {
type: StringConstructor;
value?: string;
};
maxContentRow?: {
type: NumberConstructor;
value?: number;
};
maxLabelRow?: {
type: NumberConstructor;
value?: number;
};
name?: {
type: StringConstructor;
value?: string;
};
placement?: {
type: StringConstructor;
value?: "left" | "right";
};
readonly?: {
type: BooleanConstructor;
value?: boolean;
};
value?: {
type: null;
value?: import("./type").RadioValue;
};
};
controlledProps: {
key: string;
event: string;
}[];
data: {
prefix: string;
classPrefix: string;
customIcon: boolean;
slotIcon: boolean;
optionLinked: boolean;
iconVal: any[];
_placement: string;
_disabled: boolean;
_readonly: boolean;
};
observers: {
disabled(v: any): void;
readonly(v: any): void;
};
methods: {
handleTap(e: any): void;
doChange(): void;
init(): void;
setDisabled(disabled: Boolean): void;
setReadonly(readonly: Boolean): void;
};
}

118
HuajisheCheckChaoXing/miniprogram_npm/tdesign-miniprogram/radio/radio.js Normal file
View File

@@ -0,0 +1,118 @@
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 config from '../common/config';
import { SuperComponent, wxComponent } from '../common/src/index';
import Props from './props';
const { prefix } = config;
const name = `${prefix}-radio`;
let Radio = class Radio extends SuperComponent {
constructor() {
super(...arguments);
this.externalClasses = [
`${prefix}-class`,
`${prefix}-class-label`,
`${prefix}-class-icon`,
`${prefix}-class-content`,
`${prefix}-class-border`,
];
this.behaviors = ['wx://form-field'];
this.relations = {
'../radio-group/radio-group': {
type: 'ancestor',
linked(parent) {
if (parent.data.borderless) {
this.setData({ borderless: true });
}
},
},
};
this.options = {
multipleSlots: true,
};
this.lifetimes = {
attached() {
this.init();
},
};
this.properties = Object.assign(Object.assign({}, Props), { borderless: {
type: Boolean,
value: false,
}, tId: {
type: String,
} });
this.controlledProps = [
{
key: 'checked',
event: 'change',
},
];
this.data = {
prefix,
classPrefix: name,
customIcon: false,
slotIcon: false,
optionLinked: false,
iconVal: [],
_placement: '',
_disabled: false,
_readonly: false,
};
this.observers = {
disabled(v) {
this.setData({ _disabled: v });
},
readonly(v) {
this.setData({ _readonly: v });
},
};
this.methods = {
handleTap(e) {
const { _disabled, _readonly, contentDisabled } = this.data;
const { target } = e.currentTarget.dataset;
if (_disabled || _readonly || (target === 'text' && contentDisabled))
return;
this.doChange();
},
doChange() {
var _a;
const { value, checked, allowUncheck } = this.data;
const isAllowUncheck = Boolean(allowUncheck || ((_a = this.$parent) === null || _a === void 0 ? void 0 : _a.data.allowUncheck));
if (this.$parent) {
this.$parent.updateValue(checked && isAllowUncheck ? null : value);
}
else {
this._trigger('change', { checked: isAllowUncheck ? !checked : true });
}
},
init() {
var _a, _b, _c, _d, _e, _f;
const { icon } = this.data;
const isIdArr = Array.isArray(((_a = this.$parent) === null || _a === void 0 ? void 0 : _a.icon) || icon);
this.setData({
customIcon: isIdArr,
slotIcon: icon === 'slot',
iconVal: isIdArr ? ((_b = this.$parent) === null || _b === void 0 ? void 0 : _b.icon) || icon : [],
_placement: (_f = (_c = this.data.placement) !== null && _c !== void 0 ? _c : (_e = (_d = this.$parent) === null || _d === void 0 ? void 0 : _d.data) === null || _e === void 0 ? void 0 : _e.placement) !== null && _f !== void 0 ? _f : 'left',
});
},
setDisabled(disabled) {
this.setData({
_disabled: this.data.disabled || disabled,
});
},
setReadonly(readonly) {
this.setData({
_readonly: this.data.readonly || readonly,
});
},
};
}
};
Radio = __decorate([
wxComponent()
], Radio);
export default Radio;

7
HuajisheCheckChaoXing/miniprogram_npm/tdesign-miniprogram/radio/radio.json Normal file
View File

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

61
HuajisheCheckChaoXing/miniprogram_npm/tdesign-miniprogram/radio/radio.wxml Normal file
View File

@@ -0,0 +1,61 @@
<wxs src="../common/utils.wxs" module="_" />
<view
id="{{tId}}"
style="{{_._style([style, customStyle])}}"
class="{{_.cls(classPrefix, [_placement, ['block', block]])}} class {{prefix}}-class"
disabled="{{_disabled}}"
aria-role="radio"
aria-checked="{{checked}}"
aria-label="{{label + content}}"
aria-disabled="{{_disabled}}"
tabindex="{{tabindex}}"
mut-bind:tap="handleTap"
>
<view
class="{{_.cls(classPrefix + '__icon', [_placement, ['checked', checked], ['disabled', _disabled]])}} {{prefix}}-class-icon"
>
<slot name="icon" wx:if="{{slotIcon}}" />
<view wx:elif="{{customIcon}}" class="{{classPrefix}}__image">
<image src="{{checked ? iconVal[0] : iconVal[1]}}" class="{{classPrefix}}-icon__image" webp />
</view>
<block wx:else>
<t-icon
wx:if="{{checked && (icon == 'circle' || icon == 'line')}}"
name="{{icon == 'circle' ? 'check-circle-filled' : 'check'}}"
class="{{classPrefix}}__icon-wrap"
/>
<view
wx:if="{{checked && icon == 'dot'}}"
class="{{_.cls(classPrefix + '__icon-' + icon, [['disabled', _disabled]])}}"
/>
<view
wx:if="{{!checked && (icon == 'circle' || icon == 'dot')}}"
class="{{_.cls(classPrefix + '__icon-circle', [['disabled', _disabled]])}}"
/>
<!-- line && unchecked 为空 需要展位元素 -->
<view wx:if="{{!checked && icon == 'line'}}" class="placeholder"></view>
</block>
</view>
<view class="{{classPrefix}}__content" data-target="text" mut-bind:tap="handleTap">
<view
class="{{_.cls(classPrefix + '__title', [['disabled', _disabled], ['checked', checked]])}} {{prefix}}-class-label"
style="-webkit-line-clamp:{{maxLabelRow}}"
>
<block wx:if="{{label}}">{{label}}</block>
<slot />
<slot name="label" />
</view>
<view
class="{{_.cls(classPrefix + '__description', [['disabled', _disabled], ['checked', checked]])}} {{prefix}}-class-content "
style="-webkit-line-clamp:{{maxContentRow}}"
>
<block wx:if="{{content}}">{{content}}</block>
<slot name="content" />
</view>
</view>
<view wx:if="{{!borderless}}" class="{{_.cls(classPrefix + '__border', [_placement])}} {{prefix}}-class-border" />
</view>

206
HuajisheCheckChaoXing/miniprogram_npm/tdesign-miniprogram/radio/radio.wxss Normal file
View File

@@ -0,0 +1,206 @@
.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);
}
.limit-title-row {
display: -webkit-box;
-webkit-box-orient: vertical;
overflow: hidden;
}
.t-radio {
position: relative;
display: inline-flex;
vertical-align: middle;
font-size: var(--td-radio-font-size, 32rpx);
background: var(--td-radio-bg-color, var(--td-bg-color-container, var(--td-font-white-1, #ffffff)));
}
.t-radio:focus {
outline: 0;
}
.t-radio--block {
display: flex;
padding: var(--td-radio-vertical-padding, 32rpx);
}
.t-radio--right {
flex-direction: row-reverse;
}
.t-radio__icon {
position: relative;
margin-top: calc((var(--td-radio-label-line-height, 48rpx) - var(--td-radio-icon-size, 48rpx)) / 2);
width: var(--td-radio-icon-size, 48rpx);
height: var(--td-radio-icon-size, 48rpx);
font-size: var(--td-radio-icon-size, 48rpx);
color: var(--td-radio-icon-color, var(--td-component-border, var(--td-gray-color-4, #dcdcdc)));
overflow: hidden;
}
.t-radio__icon:empty {
display: none;
}
.t-radio__icon--left {
margin-right: 16rpx;
}
.t-radio__icon--checked {
color: var(--td-radio-icon-checked-color, var(--td-brand-color, var(--td-primary-color-7, #0052d9)));
}
.t-radio__icon--disabled {
cursor: not-allowed;
color: var(--td-radio-icon-disabled-color, var(--td-brand-color-disabled, var(--td-primary-color-3, #b5c7ff)));
}
.t-radio__icon-circle {
width: var(--td-radio-icon-size, 48rpx);
height: var(--td-radio-icon-size, 48rpx);
box-sizing: border-box;
}
.t-radio__icon-circle::after {
content: '';
width: calc(200% - 6rpx);
height: calc(200% - 6rpx);
border-radius: 50%;
border: 3px solid var(--td-radio-icon-color, var(--td-component-border, var(--td-gray-color-4, #dcdcdc)));
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(0.5);
box-sizing: border-box;
}
.t-radio__icon-circle--disabled::after {
background: var(--td-radio-icon-disabled-bg-color, var(--td-bg-color-component-disabled, var(--td-gray-color-2, #eeeeee)));
}
.t-radio__icon-line::before,
.t-radio__icon-line::after {
content: '';
display: block;
position: absolute;
width: 5rpx;
border-radius: 2rpx;
background: var(--td-radio-icon-checked-color, var(--td-brand-color, var(--td-primary-color-7, #0052d9)));
transform-origin: top center;
}
.t-radio__icon-line::before {
height: 16rpx;
left: 8rpx;
top: 22rpx;
transform: rotate(-45deg);
}
.t-radio__icon-line::after {
height: 26rpx;
right: 8rpx;
top: 14rpx;
transform: rotate(45deg);
}
.t-radio__icon-line--disabled::before,
.t-radio__icon-line--disabled::after {
background: var(--td-radio-icon-disabled-color, var(--td-brand-color-disabled, var(--td-primary-color-3, #b5c7ff)));
}
.t-radio__icon-dot {
width: calc((var(--td-radio-icon-size, 48rpx) - 6rpx) * 2);
height: calc((var(--td-radio-icon-size, 48rpx) - 6rpx) * 2);
border: 6rpx solid var(--td-radio-icon-checked-color, var(--td-brand-color, var(--td-primary-color-7, #0052d9)));
border-radius: 50%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(0.5);
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
}
.t-radio__icon-dot::after {
content: '';
display: block;
width: var(--td-radio-icon-size, 48rpx);
height: var(--td-radio-icon-size, 48rpx);
background: var(--td-radio-icon-checked-color, var(--td-brand-color, var(--td-primary-color-7, #0052d9)));
border-radius: 50%;
}
.t-radio__icon-dot--disabled {
border-color: var(--td-radio-icon-disabled-color, var(--td-brand-color-disabled, var(--td-primary-color-3, #b5c7ff)));
}
.t-radio__icon-dot--disabled::after {
background: var(--td-radio-icon-disabled-color, var(--td-brand-color-disabled, var(--td-primary-color-3, #b5c7ff)));
}
.t-radio__image {
line-height: var(--td-radio-icon-size, 48rpx);
}
.t-radio-icon__image {
height: var(--td-radio-icon-size, 48rpx);
width: var(--td-radio-icon-size, 48rpx);
vertical-align: sub;
}
.t-radio__content {
flex: 1;
}
.t-radio__content:empty {
display: none;
}
.t-radio__title {
display: -webkit-box;
-webkit-box-orient: vertical;
overflow: hidden;
color: var(--td-radio-label-color, var(--td-text-color-primary, var(--td-font-gray-1, rgba(0, 0, 0, 0.9))));
line-height: var(--td-radio-label-line-height, 48rpx);
}
.t-radio__title--checked {
color: var(--td-radio-label-checked-color, var(--td-text-color-primary, var(--td-font-gray-1, rgba(0, 0, 0, 0.9))));
}
.t-radio__title--disabled {
cursor: not-allowed;
color: var(--td-radio-label-disabled-color, var(--td-text-color-disabled, var(--td-font-gray-4, rgba(0, 0, 0, 0.26))));
}
.t-radio__description {
display: -webkit-box;
-webkit-box-orient: vertical;
overflow: hidden;
color: var(--td-radio-content-color, var(--td-text-color-secondary, var(--td-font-gray-2, rgba(0, 0, 0, 0.6))));
font-size: var(--td-radio-content-font-size, 28rpx);
line-height: var(--td-radio-content-line-height, 44rpx);
}
.t-radio__description--checked {
color: var(--td-radio-content-checked-color, var(--td-text-color-secondary, var(--td-font-gray-2, rgba(0, 0, 0, 0.6))));
}
.t-radio__description--disabled {
cursor: not-allowed;
color: var(--td-radio-content-disabled-color, var(--td-text-color-disabled, var(--td-font-gray-4, rgba(0, 0, 0, 0.26))));
}
.t-radio__description:empty {
display: none;
}
.t-radio__title + .t-radio__description {
margin-top: 8rpx;
}
.t-radio__border {
position: absolute;
bottom: 0;
height: 1px;
background: var(--td-radio-border-color, var(--td-component-stroke, var(--td-gray-color-3, #e7e7e7)));
left: 96rpx;
right: 0;
transform: scaleY(0.5);
}
.t-radio__border--right {
left: 32rpx;
}

63
HuajisheCheckChaoXing/miniprogram_npm/tdesign-miniprogram/radio/type.d.ts vendored Normal file
View File

@@ -0,0 +1,63 @@
export interface TdRadioProps<T = RadioValue> {
allowUncheck?: {
type: BooleanConstructor;
value?: boolean;
};
block?: {
type: BooleanConstructor;
value?: boolean;
};
checked?: {
type: BooleanConstructor;
value?: boolean;
};
defaultChecked?: {
type: BooleanConstructor;
value?: boolean;
};
content?: {
type: StringConstructor;
value?: string;
};
contentDisabled?: {
type: BooleanConstructor;
value?: boolean;
};
disabled?: {
type: BooleanConstructor;
value?: boolean;
};
icon?: {
type: null;
value?: 'circle' | 'line' | 'dot' | Array<string>;
};
label?: {
type: StringConstructor;
value?: string;
};
maxContentRow?: {
type: NumberConstructor;
value?: number;
};
maxLabelRow?: {
type: NumberConstructor;
value?: number;
};
name?: {
type: StringConstructor;
value?: string;
};
placement?: {
type: StringConstructor;
value?: 'left' | 'right';
};
readonly?: {
type: BooleanConstructor;
value?: boolean;
};
value?: {
type: null;
value?: T;
};
}
export declare type RadioValue = string | number | boolean;

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

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