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

103
uni_modules/tdesign-uniapp/components/checkbox/README.en-US.md Normal file
View File

@@ -0,0 +1,103 @@
:: BASE_DOC ::
## API
### Checkbox Props
name | type | default | description | required
-- | -- | -- | -- | --
custom-style | Object | - | CSS(Cascading Style Sheets) | N
block | Boolean | true | \- | N
borderless | Boolean | undefined | \- | N
check-all | Boolean | false | \- | N
checked | Boolean | - | `v-model:checked` is supported | N
default-checked | Boolean | - | uncontrolled property | N
content | String | - | \- | N
content-disabled | Boolean | - | \- | N
disabled | Boolean | undefined | \- | N
icon | String / Array | 'circle' | Typescript：`'circle' \| 'line' \| 'rectangle' \| string[]` | N
indeterminate | Boolean | false | \- | N
label | String | - | \- | N
max-content-row | Number | 5 | \- | N
max-label-row | Number | 3 | \- | N
name | String | - | \- | N
placement | String | left | options: left/right | N
readonly | Boolean | undefined | \- | N
relation-key | String | - | \- | N
value | String / Number / Boolean | - | value of checkbox。Typescript：`string \| number \| boolean` | N
### Checkbox Events
name | params | description
-- | -- | --
change | `(context: { checked: boolean, context: { value: boolean\|number\|string, label: boolean\|number\|string }})` | \-
### Checkbox Slots
name | Description
-- | --
\- | \-
content | \-
label | \-
### Checkbox External Classes
className | Description
-- | --
t-class | \-
t-class-border | \-
t-class-content | \-
t-class-icon | \-
t-class-label | \-
### CheckboxGroup Props
name | type | default | description | required
-- | -- | -- | -- | --
custom-style | Object | - | CSS(Cascading Style Sheets) | N
borderless | Boolean | false | \- | N
disabled | Boolean | undefined | \- | N
keys | Object | - | Typescript：`KeysType`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/packages/uniapp-components/common/common.ts) | N
max | Number | undefined | \- | N
name | String | - | \- | N
options | Array | [] | Typescript：`Array<CheckboxOption>` `type CheckboxOption = string \| number \| CheckboxOptionObj` `interface CheckboxOptionObj { label?: string; value?: string \| number; disabled?: boolean; checkAll?: true }`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/packages/uniapp-components/checkbox-group/type.ts) | N
readonly | Boolean | undefined | \- | N
relation-key | String | - | \- | N
value | Array | - | `v-model:value` is supported。Typescript：`T` `type CheckboxGroupValue = Array<string \| number \| boolean>`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/packages/uniapp-components/checkbox-group/type.ts) | N
default-value | Array | - | uncontrolled property。Typescript：`T` `type CheckboxGroupValue = Array<string \| number \| boolean>`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/packages/uniapp-components/checkbox-group/type.ts) | N
### CheckboxGroup Events
name | params | description
-- | -- | --
change | `(context: { value: CheckboxGroupValue, context: { value: boolean\|number\|string, label: boolean\|number\|string }})` | \-
### CheckboxGroup Slots
name | Description
-- | --
\- | \-
### CSS Variables
The component provides the following CSS variables, which can be used to customize styles.
Name | Default Value | Description
-- | -- | --
--td-checkbox-bg-color | @bg-color-container | -
--td-checkbox-border-color | @component-stroke | -
--td-checkbox-description-color | @text-color-secondary | -
--td-checkbox-description-disabled-color | @text-color-disabled | -
--td-checkbox-description-font | @font-body-medium | -
--td-checkbox-icon-checked-color | @brand-color | -
--td-checkbox-icon-color | @component-border | -
--td-checkbox-icon-disabled-bg-color | @bg-color-component-disabled | -
--td-checkbox-icon-disabled-color | @brand-color-disabled | -
--td-checkbox-icon-size | 48rpx | -
--td-checkbox-tag-active-bg-color | @brand-color-light | -
--td-checkbox-tag-active-color | @brand-color | -
--td-checkbox-title-color | @text-color-primary | -
--td-checkbox-title-disabled-color | @text-color-disabled | -
--td-checkbox-title-font | @font-body-large | -
--td-checkbox-title-line-height | 48rpx | -
--td-checkbox-vertical-padding | @spacer-2 | -

158
uni_modules/tdesign-uniapp/components/checkbox/README.md Normal file
View File

@@ -0,0 +1,158 @@
---
title: Checkbox 多选框
description: 用于预设的一组选项中执行多项选择，并呈现选择结果。
spline: form
isComponent: true
---
## 引入
可在 `main.ts` 或在需要使用的页面或组件中引入。
```js
import TCheckbox from '@tdesign/uniapp/checkbox/checkbox.vue';
import TCheckboxGroup from '@tdesign/uniapp/checkbox-group/checkbox-group.vue';
```
### 组件类型
纵向多选框
{{ base }}
横向多选框
{{ horizontal }}
带全选多选框
{{ all }}
### 组件状态
多选框状态
{{ status }}
### 组件样式
勾选样式
{{ type }}
勾选显示位置
{{ right }}
非通栏多选样式
{{ card }}
### 组件规格
多选框尺寸规格
{{ special }}
## API
### Checkbox Props
名称 | 类型 | 默认值 | 描述 | 必传
-- | -- | -- | -- | --
custom-style | Object | - | 自定义样式 | N
block | Boolean | true | 是否为块级元素 | N
borderless | Boolean | undefined | 是否开启无边框模式 | N
check-all | Boolean | false | 用于标识是否为「全选选项」。单独使用无效，需在 CheckboxGroup 中使用 | N
checked | Boolean | - | 是否选中。支持语法糖 `v-model:checked` | N
default-checked | Boolean | - | 是否选中。非受控属性 | N
content | String | - | 多选框内容 | N
content-disabled | Boolean | - | 是否禁用组件内容（content）触发选中 | N
disabled | Boolean | undefined | 是否禁用组件。如果父组件存在 CheckboxGroup，默认值由 CheckboxGroup.disabled 控制。优先级：Checkbox.disabled > CheckboxGroup.disabled > Form.disabled | N
icon | String / Array | 'circle' | 自定义选中图标和非选中图标。使用 Array 时表示：`[选中态图标，非选中态图标，半选中态图标]`。使用 String 时，值为 circle 表示填充圆形图标、值为 line 表示描边型图标、值为 rectangle 表示填充矩形图标。TS 类型：`'circle' \| 'line' \| 'rectangle' \| string[]` | N
indeterminate | Boolean | false | 是否为半选 | N
label | String | - | 主文案 | N
max-content-row | Number | 5 | 内容最大行数限制 | N
max-label-row | Number | 3 | 主文案最大行数限制 | N
name | String | - | HTML 元素原生属性 | N
placement | String | left | 多选框和内容相对位置。可选项：left/right | N
readonly | Boolean | undefined | 只读状态 | N
relation-key | String | - | -1 时代表独立，不再寻找 parent，用于头条小程序 | N
value | String / Number / Boolean | - | 多选框的值。TS 类型：`string \| number \| boolean` | N
### Checkbox Events
名称 | 参数 | 描述
-- | -- | --
change | `(context: { checked: boolean, context: { value: boolean\|number\|string, label: boolean\|number\|string }})` | 值变化时触发。`context` 表示当前点击项内容
### Checkbox Slots
名称 | 描述
-- | --
\- | 默认插槽，主文案
content | 自定义 `content` 显示内容
label | 自定义 `label` 显示内容
### Checkbox External Classes
类名 | 描述
-- | --
t-class | 根节点样式类
t-class-border | 边框样式类
t-class-content | 内容样式类
t-class-icon | 图标样式类
t-class-label | 标签样式类
### CheckboxGroup Props
名称 | 类型 | 默认值 | 描述 | 必传
-- | -- | -- | -- | --
custom-style | Object | - | 自定义样式 | N
borderless | Boolean | false | 是否开启无边框模式。优先级低于 Checkbox.borderless | N
disabled | Boolean | undefined | 是否禁用组件。优先级：Form.disabled < CheckboxGroup.disabled < Checkbox.disabled | N
keys | Object | - | 用来定义 value / label / disabled 在 `options` 中对应的字段别名。TS 类型：`KeysType`。[通用类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/packages/uniapp-components/common/common.ts) | N
max | Number | undefined | 支持最多选中的数量 | N
name | String | - | 统一设置内部复选框 HTML 属性 | N
options | Array | [] | 以配置形式设置子元素。示例1：`['北京', '上海']` ，示例2: `[{ label: '全选', checkAll: true }, { label: '上海', value: 'shanghai' }]`。checkAll 值为 true 表示当前选项为「全选选项」。TS 类型：`Array<CheckboxOption>` `type CheckboxOption = string \| number \| CheckboxOptionObj` `interface CheckboxOptionObj { label?: string; value?: string \| number; disabled?: boolean; checkAll?: true }`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/packages/uniapp-components/checkbox-group/type.ts) | N
readonly | Boolean | undefined | 只读状态 | N
relation-key | String | - | -1 时代表独立，不再寻找 parent，用于头条小程序 | N
value | Array | - | 选中值。支持语法糖 `v-model:value`。TS 类型：`T` `type CheckboxGroupValue = Array<string \| number \| boolean>`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/packages/uniapp-components/checkbox-group/type.ts) | N
default-value | Array | - | 选中值。非受控属性。TS 类型：`T` `type CheckboxGroupValue = Array<string \| number \| boolean>`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/packages/uniapp-components/checkbox-group/type.ts) | N
### CheckboxGroup Events
名称 | 参数 | 描述
-- | -- | --
change | `(context: { value: CheckboxGroupValue, context: { value: boolean\|number\|string, label: boolean\|number\|string }})` | 值变化时触发。`context` 表示当前点击项内容
### CheckboxGroup Slots
名称 | 描述
-- | --
\- | 默认插槽，多选框组内容
### CSS Variables
组件提供了下列 CSS 变量，可用于自定义样式。
名称 | 默认值 | 描述
-- | -- | --
--td-checkbox-bg-color | @bg-color-container | -
--td-checkbox-border-color | @component-stroke | -
--td-checkbox-description-color | @text-color-secondary | -
--td-checkbox-description-disabled-color | @text-color-disabled | -
--td-checkbox-description-font | @font-body-medium | -
--td-checkbox-icon-checked-color | @brand-color | -
--td-checkbox-icon-color | @component-border | -
--td-checkbox-icon-disabled-bg-color | @bg-color-component-disabled | -
--td-checkbox-icon-disabled-color | @brand-color-disabled | -
--td-checkbox-icon-size | 48rpx | -
--td-checkbox-tag-active-bg-color | @brand-color-light | -
--td-checkbox-tag-active-color | @brand-color | -
--td-checkbox-title-color | @text-color-primary | -
--td-checkbox-title-disabled-color | @text-color-disabled | -
--td-checkbox-title-font | @font-body-large | -
--td-checkbox-title-line-height | 48rpx | -
--td-checkbox-vertical-padding | @spacer-2 | -

174
uni_modules/tdesign-uniapp/components/checkbox/checkbox.css Normal file
View File

@@ -0,0 +1,174 @@
.t-checkbox {
display: inline-flex;
vertical-align: middle;
position: relative;
background: var(--td-checkbox-bg-color, var(--td-bg-color-container, var(--td-font-white-1, #ffffff)));
}
.t-checkbox:focus {
outline: 0;
}
.t-checkbox--block {
display: flex;
padding: var(--td-checkbox-vertical-padding, var(--td-spacer-2, 32rpx));
}
.t-checkbox--right {
flex-direction: row-reverse;
}
.t-checkbox .limit-title-row {
display: -webkit-box;
-webkit-box-orient: vertical;
overflow: hidden;
}
.t-checkbox .image-center {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
.t-checkbox__icon-left {
margin-right: 20rpx;
width: 40rpx;
}
.t-checkbox__icon-right {
right: 0px;
display: contents;
position: absolute;
top: 50%;
transform: translateY(-50%);
}
.t-checkbox__icon-image {
width: var(--td-checkbox-icon-size, 48rpx);
height: var(--td-checkbox-icon-size, 48rpx);
vertical-align: top;
}
.t-checkbox__icon {
position: relative;
display: block;
width: var(--td-checkbox-icon-size, 48rpx);
height: var(--td-checkbox-icon-size, 48rpx);
color: var(--td-checkbox-icon-color, var(--td-component-border, var(--td-gray-color-4, #dcdcdc)));
font-size: var(--td-checkbox-icon-size, 48rpx);
margin-top: calc((var(--td-checkbox-title-line-height, 48rpx) - var(--td-checkbox-icon-size, 48rpx)) / 2);
}
.t-checkbox__icon:empty {
display: none;
}
.t-checkbox__icon--checked {
color: var(--td-checkbox-icon-checked-color, var(--td-brand-color, var(--td-primary-color-7, #0052d9)));
}
.t-checkbox__icon--disabled {
cursor: not-allowed;
color: var(--td-checkbox-icon-disabled-color, var(--td-brand-color-disabled, var(--td-primary-color-3, #b5c7ff)));
}
.t-checkbox__icon--left {
margin-right: 16rpx;
}
.t-checkbox__icon-circle {
width: calc((var(--td-checkbox-icon-size, 48rpx) - 4rpx) * 2);
height: calc((var(--td-checkbox-icon-size, 48rpx) - 4rpx) * 2);
border: calc(4rpx * 2) solid var(--td-checkbox-icon-color, var(--td-component-border, var(--td-gray-color-4, #dcdcdc)));
border-radius: 50%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(0.5);
box-sizing: border-box;
}
.t-checkbox__icon-circle--disabled {
background: var(--td-checkbox-icon-disabled-bg-color, var(--td-bg-color-component-disabled, var(--td-gray-color-2, #eeeeee)));
}
.t-checkbox__icon-rectangle {
width: calc((var(--td-checkbox-icon-size, 48rpx) - 4rpx * 2) * 2);
height: calc((var(--td-checkbox-icon-size, 48rpx) - 4rpx * 2) * 2);
border: calc(4rpx * 2) solid var(--td-checkbox-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-checkbox__icon-rectangle--disabled {
background: var(--td-checkbox-icon-disabled-bg-color, var(--td-bg-color-component-disabled, var(--td-gray-color-2, #eeeeee)));
}
.t-checkbox__icon-line::before,
.t-checkbox__icon-line::after {
content: '';
display: block;
position: absolute;
width: 5rpx;
border-radius: 2rpx;
background: var(--td-checkbox-icon-checked-color, var(--td-brand-color, var(--td-primary-color-7, #0052d9)));
transform-origin: top center;
}
.t-checkbox__icon-line::before {
height: 16rpx;
left: 8rpx;
top: 22rpx;
transform: rotate(-45deg);
}
.t-checkbox__icon-line::after {
height: 26rpx;
right: 8rpx;
top: 14rpx;
transform: rotate(45deg);
}
.t-checkbox__icon-line--disabled::before,
.t-checkbox__icon-line--disabled::after {
background: var(--td-checkbox-icon-disabled-color, var(--td-brand-color-disabled, var(--td-primary-color-3, #b5c7ff)));
}
.t-checkbox__content {
flex: 1;
}
.t-checkbox__title {
color: var(--td-checkbox-title-color, var(--td-text-color-primary, var(--td-font-gray-1, rgba(0, 0, 0, 0.9))));
font: var(--td-checkbox-title-font, var(--td-font-body-large, 32rpx / 48rpx var(--td-font-family, PingFang SC, Microsoft YaHei, Arial Regular)));
line-height: var(--td-checkbox-title-line-height, 48rpx);
display: -webkit-box;
-webkit-box-orient: vertical;
overflow: hidden;
}
.t-checkbox__title--disabled {
color: var(--td-checkbox-title-disabled-color, var(--td-text-color-disabled, var(--td-font-gray-4, rgba(0, 0, 0, 0.26))));
}
.t-checkbox__description {
color: var(--td-checkbox-description-color, var(--td-text-color-secondary, var(--td-font-gray-2, rgba(0, 0, 0, 0.6))));
display: -webkit-box;
-webkit-box-orient: vertical;
overflow: hidden;
font: var(--td-checkbox-description-font, var(--td-font-body-medium, 28rpx / 44rpx var(--td-font-family, PingFang SC, Microsoft YaHei, Arial Regular)));
}
.t-checkbox__description--disabled {
color: var(--td-checkbox-description-disabled-color, var(--td-text-color-disabled, var(--td-font-gray-4, rgba(0, 0, 0, 0.26))));
}
.t-checkbox__title + .t-checkbox__description:not(:empty) {
margin-top: 8rpx;
}
.t-checkbox__border {
position: absolute;
bottom: 0;
left: 96rpx;
right: 0;
height: 1px;
background: var(--td-checkbox-border-color, var(--td-component-stroke, var(--td-gray-color-3, #e7e7e7)));
transform: scaleY(0.5);
}
.t-checkbox__border--right {
left: 32rpx;
}
.t-checkbox--tag {
font-size: 28rpx;
padding-top: 16rpx;
padding-bottom: 16rpx;
text-align: center;
background-color: var(--td-bg-color-secondarycontainer, var(--td-gray-color-1, #f3f3f3));
border-radius: 12rpx;
}
.t-checkbox--tag.t-checkbox--checked {
color: var(--td-checkbox-tag-active-color, var(--td-brand-color, var(--td-primary-color-7, #0052d9)));
background-color: var(--td-checkbox-tag-active-bg-color, var(--td-brand-color-light, var(--td-primary-color-1, #f2f3ff)));
}
.t-checkbox--tag .t-checkbox__title--checked {
color: var(--td-checkbox-tag-active-color, var(--td-brand-color, var(--td-primary-color-7, #0052d9)));
}
.t-checkbox--tag .t-checkbox__content {
margin-right: 0;
}

238
uni_modules/tdesign-uniapp/components/checkbox/checkbox.vue Normal file
View File

@@ -0,0 +1,238 @@
<template>
<view
:id="tId"
:style="tools._style([customStyle])"
:class="tools.cls(classPrefix, [placement, theme, ['checked', dataChecked], ['block', block], ['disabled', _disabled]]) + ' ' + tClass"
aria-role="checkbox"
:aria-checked="dataChecked ? (dataIndeterminate ? 'mixed' : true) : false"
:aria-disabled="_disabled ? true : false"
@click.stop="handleTap"
>
<view
v-if="theme == 'default'"
:class="tools.cls(classPrefix + '__icon', [placement, ['checked', dataChecked], ['disabled', _disabled]]) + ' ' + tClassIcon"
>
<slot
v-if="icon === 'slot'"
name="icon"
/>
<view
v-else-if="tools.isArray(icon)"
:class="classPrefix + '__icon'"
>
<image
:src="dataChecked ? (dataIndeterminate && icon[2] ? icon[2] : icon[0]) : icon[1]"
:class="classPrefix + '__icon-image'"
/>
</view>
<block v-else>
<t-icon
v-if="dataChecked && (icon == 'circle' || icon == 'rectangle')"
:name="dataIndeterminate ? 'minus-' + icon + '-filled' : 'check-' + icon + '-filled'"
:class="tools.cls(classPrefix + '__icon-wrapper', [])"
/>
<t-icon
v-if="dataChecked && icon == 'line'"
:name="dataIndeterminate ? 'minus-' + icon + '-filled' : 'check'"
:class="tools.cls(classPrefix + '__icon-wrapper', [])"
/>
<view
v-else-if="!dataChecked && (icon == 'circle' || icon == 'rectangle')"
:class="tools.cls(classPrefix + '__icon-' + icon, [['disabled', _disabled]])"
/>
<view
v-if="!dataChecked && icon == 'line'"
class="placeholder"
/>
</block>
</view>
<view
:class="classPrefix + '__content'"
data-target="text"
@click.stop="handleTap"
>
<view
:class="
tools.cls(classPrefix + '__title', [
['disabled', _disabled],
['checked', dataChecked]
]) +
' ' +
tClassLabel
"
:style="'-webkit-line-clamp:' + maxLabelRow"
>
<block v-if="label">
{{ label }}
</block>
<slot />
<slot name="label" />
</view>
<view
:class="tools.cls(classPrefix + '__description', [['disabled', _disabled]]) + ' ' + tClassContent"
:style="'-webkit-line-clamp:' + maxContentRow"
>
<block v-if="content">
{{ content }}
</block>
<slot name="content" />
</view>
</view>
<view
v-if="theme == 'default' && !dataBorderless"
:class="tools.cls(classPrefix + '__border', [placement]) + ' ' + tClassBorder"
/>
</view>
</template>
<script>
import TIcon from '../icon/icon';
import { uniComponent } from '../common/src/index';
import { coalesce } from '../common/utils';
import { prefix, ISOLATED_RELATION_KEY } from '../common/config';
import props from './props';
import tools from '../common/utils.wxs';
import { ChildrenMixin, RELATION_MAP } from '../common/relation';
const name = `${prefix}-checkbox`;
export default uniComponent({
name,
options: {
styleIsolation: 'shared',
},
controlledProps: [
{
key: 'checked',
event: 'change',
},
],
externalClasses: [
`${prefix}-class`,
`${prefix}-class-label`,
`${prefix}-class-icon`,
`${prefix}-class-content`,
`${prefix}-class-border`,
],
mixins: [ChildrenMixin(RELATION_MAP.Checkbox)],
components: {
TIcon,
},
props: {
...props,
theme: {
type: String,
default: 'default',
},
tId: {
type: String,
},
},
data() {
return {
prefix,
classPrefix: name,
_disabled: false,
tools,
dataBorderless: this.borderless,
dataIndeterminate: this.indeterminate,
dataChecked: coalesce(this.checked, this.defaultChecked),
};
},
computed: {
isIsolated() {
return this.relationKey === ISOLATED_RELATION_KEY;
},
},
watch: {
borderless: {
handler(v) {
this.dataBorderless = v;
},
immediate: true,
},
indeterminate: {
handler(v) {
this.dataIndeterminate = v;
},
immediate: true,
},
checked: {
handler(v) {
this.dataChecked = v;
},
immediate: true,
},
disabled: {
handler(v) {
this._disabled = v;
},
immediate: true,
},
},
mounted() {
},
methods: {
innerAfterLinked() {
if (this.isIsolated) return;
const parent = this[RELATION_MAP.Checkbox];
const { value, disabled, borderless } = parent;
const { dataValue, checked, checkAll, item, dataIndeterminate } = this;
const valueSet = new Set(value);
const checkedFromParent = valueSet.has(this.value);
const data = {
_disabled: this.disabled == null ? disabled : this.disabled,
};
data.dataBorderless = !!(coalesce(this.borderless, borderless));
data.dataChecked = this.dataChecked || checkedFromParent;
if (this.dataChecked) {
parent.updateValue({
value: dataValue,
checked,
checkAll,
item,
indeterminate: dataIndeterminate,
trigger: 'init',
});
}
if (this.checkAll) {
data.dataChecked = valueSet.size > 0;
// data.indeterminate =
}
Object.keys(data).forEach((key) => {
this[key] = data[key];
});
},
handleTap(e) {
const { _disabled, readonly, contentDisabled } = this;
const { target } = e.currentTarget.dataset;
if (_disabled || readonly || (target === 'text' && contentDisabled)) return;
const { value, label, checkAll, dataIndeterminate } = this;
const checked = !this.dataChecked;
const parent = this[RELATION_MAP.Checkbox];
if (parent && !this.isIsolated) {
parent.updateValue({ value, checkAll, indeterminate: dataIndeterminate, checked, item: { label, value, checked } });
} else {
this._trigger('change', { context: { value, label }, checked });
}
},
setDisabled(disabled) {
this._disabled = this.disabled || disabled;
},
},
});
</script>
<style scoped>
@import './checkbox.css';
</style>

90
uni_modules/tdesign-uniapp/components/checkbox/props.ts Normal file
View File

@@ -0,0 +1,90 @@
/* eslint-disable */
/**
* 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
* */
import type { TdCheckboxProps } from './type';
export default {
/** 是否为块级元素 */
block: {
type: Boolean,
default: true,
},
/** 是否开启无边框模式 */
borderless: {
type: Boolean,
default: undefined,
},
/** 用于标识是否为「全选选项」。单独使用无效，需在 CheckboxGroup 中使用 */
checkAll: Boolean,
/** 是否选中 */
checked: Boolean,
/** 是否选中，非受控属性 */
defaultChecked: Boolean,
/** 多选框内容 */
content: {
type: String,
},
/** 是否禁用组件内容（content）触发选中 */
contentDisabled: Boolean,
/** 是否禁用组件。如果父组件存在 CheckboxGroup，默认值由 CheckboxGroup.disabled 控制。优先级：Checkbox.disabled > CheckboxGroup.disabled > Form.disabled */
disabled: {
type: Boolean,
default: undefined,
},
/** 自定义选中图标和非选中图标。使用 Array 时表示：`[选中态图标，非选中态图标，半选中态图标]`。使用 String 时，值为 circle 表示填充圆形图标、值为 line 表示描边型图标、值为 rectangle 表示填充矩形图标 */
icon: {
type: [String, Array],
default: 'circle' as TdCheckboxProps['icon'],
},
/** 是否为半选 */
indeterminate: Boolean,
/** 主文案 */
label: {
type: String,
},
/** 内容最大行数限制 */
maxContentRow: {
type: Number,
default: 5,
},
/** 主文案最大行数限制 */
maxLabelRow: {
type: Number,
default: 3,
},
/** HTML 元素原生属性 */
name: {
type: String,
default: '',
},
/** 多选框和内容相对位置 */
placement: {
type: String,
default: 'left' as TdCheckboxProps['placement'],
validator(val: TdCheckboxProps['placement']): boolean {
if (!val) return true;
return ['left', 'right'].includes(val);
},
},
/** 只读状态 */
readonly: {
type: Boolean,
default: undefined,
},
/** -1 时代表独立，不再寻找 parent，用于头条小程序 */
relationKey: {
type: String,
default: '',
},
/** 多选框的值 */
value: {
type: [String, Number, Boolean],
},
/** 值变化时触发。`context` 表示当前点击项内容 */
onChange: {
type: Function,
default: () => ({}),
},
};

96
uni_modules/tdesign-uniapp/components/checkbox/type.ts Normal file
View File

@@ -0,0 +1,96 @@
/* eslint-disable */
/**
* 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
* */
export interface TdCheckboxProps {
/**
* 是否为块级元素
* @default true
*/
block?: boolean;
/**
* 是否开启无边框模式
*/
borderless?: boolean;
/**
* 用于标识是否为「全选选项」。单独使用无效，需在 CheckboxGroup 中使用
* @default false
*/
checkAll?: boolean;
/**
* 是否选中
*/
checked?: boolean;
/**
* 是否选中，非受控属性
*/
defaultChecked?: boolean;
/**
* 多选框内容
*/
content?: string;
/**
* 是否禁用组件内容（content）触发选中
*/
contentDisabled?: boolean;
/**
* 是否禁用组件。如果父组件存在 CheckboxGroup，默认值由 CheckboxGroup.disabled 控制。优先级：Checkbox.disabled > CheckboxGroup.disabled > Form.disabled
*/
disabled?: boolean;
/**
* 自定义选中图标和非选中图标。使用 Array 时表示：`[选中态图标，非选中态图标，半选中态图标]`。使用 String 时，值为 circle 表示填充圆形图标、值为 line 表示描边型图标、值为 rectangle 表示填充矩形图标
* @default 'circle'
*/
icon?: 'circle' | 'line' | 'rectangle' | string[];
/**
* 是否为半选
* @default false
*/
indeterminate?: boolean;
/**
* 主文案
*/
label?: string;
/**
* 内容最大行数限制
* @default 5
*/
maxContentRow?: number;
/**
* 主文案最大行数限制
* @default 3
*/
maxLabelRow?: number;
/**
* HTML 元素原生属性
* @default ''
*/
name?: string;
/**
* 多选框和内容相对位置
* @default left
*/
placement?: 'left' | 'right';
/**
* 只读状态
*/
readonly?: boolean;
/**
* -1 时代表独立，不再寻找 parent，用于头条小程序
* @default ''
*/
relationKey?: string;
/**
* 多选框的值
*/
value?: string | number | boolean;
/**
* 值变化时触发。`context` 表示当前点击项内容
*/
onChange?: (context: {
checked: boolean;
context: { value: boolean | number | string; label: boolean | number | string };
}) => void;
}