1.22 分包
This commit is contained in:
zoujiandong
@@ -1,59 +0,0 @@
|
||||
---
|
||||
title: checkbox-group
|
||||
description: 组合多选框
|
||||
spline: form
|
||||
isComponent: true
|
||||
---
|
||||
|
||||
### 特性及兼容性
|
||||
|
||||
无
|
||||
|
||||
## 引入
|
||||
|
||||
### 引入组件
|
||||
|
||||
在 `app.json` 或 `page.json` 中引入组件：
|
||||
|
||||
```json
|
||||
"usingComponents": {
|
||||
"t-checkbox": "tdesign-miniprogram/checkbox/checkbox",
|
||||
"t-checkbox-group": "tdesign-miniprogram/checkbox-group/checkbox-group"
|
||||
}
|
||||
```
|
||||
|
||||
## 用法
|
||||
|
||||
### 组件方式
|
||||
|
||||
```html
|
||||
<!-- page.wxml -->
|
||||
<t-checkbox-group defaultValue="checkbox1" bind:change="onChange">
|
||||
<t-checkbox title="单行标题" value="checkbox1" />
|
||||
<t-checkbox title="单行标题" label="辅助信息" value="checkbox2" />
|
||||
</t-checkbox-group>
|
||||
```
|
||||
<t-checkbox title="单行标题" value="checkbox1" defaultChecked="{{true}}"/>
|
||||
## API
|
||||
|
||||
### `<t-checkbox-group>` 组件
|
||||
|
||||
组件路径：`tdesign-miniprogram/checkbox-group/checkbox-group`
|
||||
|
||||
#### Props
|
||||
|
||||
| 属性 | 值类型 | 默认值 | 必传 | 说明 |
|
||||
| -------- | --------- | ------ | ---- | ---------------------- |
|
||||
| value | `Array` | `[]` | N | 当前选中项的标识符 |
|
||||
| name | `String` | - | N | 在表单内提交时的标识符 |
|
||||
### Slots
|
||||
|
||||
| 名称 | 说明 |
|
||||
| ---- | ----------------- |
|
||||
| 默认 | `t-checkbox` 组件 |
|
||||
|
||||
#### Events
|
||||
|
||||
| 事件 | event.detail | 说明 |
|
||||
| ----------- | -------------------------- | ------------------------ |
|
||||
| bind:change | {names:当前选中项的标识符} | 当绑定值变化时触发的事件 |
|
||||
@@ -1,69 +0,0 @@
|
||||
import { SuperComponent, RelationsOptions } from '../common/src/index';
|
||||
export default class CheckBoxGroup extends SuperComponent {
|
||||
externalClasses: string[];
|
||||
relations: RelationsOptions;
|
||||
data: {
|
||||
prefix: string;
|
||||
classPrefix: string;
|
||||
checkboxOptions: any[];
|
||||
};
|
||||
properties: {
|
||||
borderless: {
|
||||
type: BooleanConstructor;
|
||||
value: boolean;
|
||||
};
|
||||
customStyle?: {
|
||||
type: StringConstructor;
|
||||
value?: string;
|
||||
};
|
||||
disabled?: {
|
||||
type: BooleanConstructor;
|
||||
value?: boolean;
|
||||
};
|
||||
max?: {
|
||||
type: NumberConstructor;
|
||||
value?: number;
|
||||
};
|
||||
name?: {
|
||||
type: StringConstructor;
|
||||
value?: string;
|
||||
};
|
||||
options?: {
|
||||
type: ArrayConstructor;
|
||||
value?: import("./type").CheckboxOption[];
|
||||
};
|
||||
value?: {
|
||||
type: ArrayConstructor;
|
||||
value?: import("./type").CheckboxGroupValue;
|
||||
};
|
||||
defaultValue?: {
|
||||
type: ArrayConstructor;
|
||||
value?: import("./type").CheckboxGroupValue;
|
||||
};
|
||||
};
|
||||
observers: {
|
||||
value(): void;
|
||||
};
|
||||
lifetimes: {
|
||||
attached(): void;
|
||||
ready(): void;
|
||||
};
|
||||
controlledProps: {
|
||||
key: string;
|
||||
event: string;
|
||||
}[];
|
||||
$checkAll: any;
|
||||
methods: {
|
||||
getChilds(): any;
|
||||
updateChildren(): void;
|
||||
updateValue({ value, checked, checkAll, indeterminate }: {
|
||||
value: any;
|
||||
checked: any;
|
||||
checkAll: any;
|
||||
indeterminate: any;
|
||||
}): void;
|
||||
initWithOptions(): void;
|
||||
handleInnerChildChange(e: any): void;
|
||||
setCheckall(): void;
|
||||
};
|
||||
}
|
||||
@@ -1,151 +0,0 @@
|
||||
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}-checkbox-group`;
|
||||
let CheckBoxGroup = class CheckBoxGroup extends SuperComponent {
|
||||
constructor() {
|
||||
super(...arguments);
|
||||
this.externalClasses = [`${prefix}-class`];
|
||||
this.relations = {
|
||||
'../checkbox/checkbox': {
|
||||
type: 'descendant',
|
||||
},
|
||||
};
|
||||
this.data = {
|
||||
prefix,
|
||||
classPrefix: name,
|
||||
checkboxOptions: [],
|
||||
};
|
||||
this.properties = Object.assign(Object.assign({}, props), { borderless: {
|
||||
type: Boolean,
|
||||
value: false,
|
||||
} });
|
||||
this.observers = {
|
||||
value() {
|
||||
this.updateChildren();
|
||||
},
|
||||
};
|
||||
this.lifetimes = {
|
||||
attached() {
|
||||
this.initWithOptions();
|
||||
},
|
||||
ready() {
|
||||
this.setCheckall();
|
||||
},
|
||||
};
|
||||
this.controlledProps = [
|
||||
{
|
||||
key: 'value',
|
||||
event: 'change',
|
||||
},
|
||||
];
|
||||
this.$checkAll = null;
|
||||
this.methods = {
|
||||
getChilds() {
|
||||
let items = this.$children;
|
||||
if (!items.length) {
|
||||
items = this.selectAllComponents(`.${prefix}-checkbox-option`);
|
||||
}
|
||||
return items || [];
|
||||
},
|
||||
updateChildren() {
|
||||
const items = this.getChilds();
|
||||
const { value } = this.data;
|
||||
if (items.length > 0) {
|
||||
items.forEach((item) => {
|
||||
!item.data.checkAll &&
|
||||
item.setData({
|
||||
checked: value === null || value === void 0 ? void 0 : value.includes(item.data.value),
|
||||
});
|
||||
});
|
||||
if (items.some((item) => item.data.checkAll)) {
|
||||
this.setCheckall();
|
||||
}
|
||||
}
|
||||
},
|
||||
updateValue({ value, checked, checkAll, indeterminate }) {
|
||||
let { value: newValue } = this.data;
|
||||
const { max } = this.data;
|
||||
const keySet = new Set(this.getChilds().map((item) => item.data.value));
|
||||
newValue = newValue.filter((value) => keySet.has(value));
|
||||
if (max && checked && newValue.length === max)
|
||||
return;
|
||||
if (checkAll) {
|
||||
const items = this.getChilds();
|
||||
newValue =
|
||||
!checked && indeterminate
|
||||
? items.map((item) => item.data.value)
|
||||
: items
|
||||
.filter(({ data }) => {
|
||||
if (data.disabled) {
|
||||
return newValue.includes(data.value);
|
||||
}
|
||||
return checked && !data.checkAll;
|
||||
})
|
||||
.map(({ data }) => data.value);
|
||||
}
|
||||
else if (checked) {
|
||||
newValue = newValue.concat(value);
|
||||
}
|
||||
else {
|
||||
const index = newValue.findIndex((v) => v === value);
|
||||
newValue.splice(index, 1);
|
||||
}
|
||||
this._trigger('change', { value: newValue });
|
||||
},
|
||||
initWithOptions() {
|
||||
const { options } = this.data;
|
||||
if (!(options === null || options === void 0 ? void 0 : options.length) || !Array.isArray(options))
|
||||
return;
|
||||
const checkboxOptions = options.map((item) => {
|
||||
const isLabel = ['number', 'string'].includes(typeof item);
|
||||
return isLabel
|
||||
? {
|
||||
label: `${item}`,
|
||||
value: item,
|
||||
}
|
||||
: Object.assign({}, item);
|
||||
});
|
||||
this.setData({
|
||||
checkboxOptions,
|
||||
});
|
||||
},
|
||||
handleInnerChildChange(e) {
|
||||
var _a;
|
||||
const { item } = e.target.dataset;
|
||||
const { checked } = e.detail;
|
||||
const rect = {};
|
||||
if (item.checkAll) {
|
||||
rect.indeterminate = (_a = this.$checkAll) === null || _a === void 0 ? void 0 : _a.data.indeterminate;
|
||||
}
|
||||
this.updateValue(Object.assign(Object.assign(Object.assign({}, item), { checked }), rect));
|
||||
},
|
||||
setCheckall() {
|
||||
const items = this.getChilds();
|
||||
if (!this.$checkAll) {
|
||||
this.$checkAll = items.find((item) => item.data.checkAll);
|
||||
}
|
||||
if (!this.$checkAll)
|
||||
return;
|
||||
const { value } = this.data;
|
||||
const valueSet = new Set(value.filter((val) => val !== this.$checkAll.data.value));
|
||||
const isCheckall = items.every((item) => (item.data.checkAll ? true : valueSet.has(item.data.value)));
|
||||
this.$checkAll.setData({
|
||||
checked: valueSet.size > 0,
|
||||
indeterminate: !isCheckall,
|
||||
});
|
||||
},
|
||||
};
|
||||
}
|
||||
};
|
||||
CheckBoxGroup = __decorate([
|
||||
wxComponent()
|
||||
], CheckBoxGroup);
|
||||
export default CheckBoxGroup;
|
||||
@@ -1,6 +0,0 @@
|
||||
{
|
||||
"component": true,
|
||||
"usingComponents": {
|
||||
"t-checkbox": "../checkbox/checkbox"
|
||||
}
|
||||
}
|
||||
@@ -1,15 +0,0 @@
|
||||
<view class="{{ classPrefix }} {{prefix}}-class" style="{{customStyle}}">
|
||||
<slot />
|
||||
<block wx:for="{{checkboxOptions}}" wx:key="value">
|
||||
<t-checkbox
|
||||
class="{{prefix}}-checkbox-option"
|
||||
label="{{item.label || item.text || ''}}"
|
||||
value="{{item.value || ''}}"
|
||||
content="{{item.content || ''}}"
|
||||
check-all="{{item.checkAll}}"
|
||||
disabled="{{item.disabled}}"
|
||||
data-item="{{item}}"
|
||||
bind:change="handleInnerChildChange"
|
||||
></t-checkbox>
|
||||
</block>
|
||||
</view>
|
||||
@@ -1,3 +0,0 @@
|
||||
import { TdCheckboxGroupProps } from './type';
|
||||
declare const props: TdCheckboxGroupProps;
|
||||
export default props;
|
||||
@@ -1,31 +0,0 @@
|
||||
const props = {
|
||||
customStyle: {
|
||||
type: String,
|
||||
value: '',
|
||||
},
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
value: false,
|
||||
},
|
||||
max: {
|
||||
type: Number,
|
||||
value: undefined,
|
||||
},
|
||||
name: {
|
||||
type: String,
|
||||
value: '',
|
||||
},
|
||||
options: {
|
||||
type: Array,
|
||||
value: [],
|
||||
},
|
||||
value: {
|
||||
type: Array,
|
||||
value: null,
|
||||
},
|
||||
defaultValue: {
|
||||
type: Array,
|
||||
value: [],
|
||||
},
|
||||
};
|
||||
export default props;
|
||||
@@ -1,38 +0,0 @@
|
||||
export interface TdCheckboxGroupProps {
|
||||
customStyle?: {
|
||||
type: StringConstructor;
|
||||
value?: string;
|
||||
};
|
||||
disabled?: {
|
||||
type: BooleanConstructor;
|
||||
value?: boolean;
|
||||
};
|
||||
max?: {
|
||||
type: NumberConstructor;
|
||||
value?: number;
|
||||
};
|
||||
name?: {
|
||||
type: StringConstructor;
|
||||
value?: string;
|
||||
};
|
||||
options?: {
|
||||
type: ArrayConstructor;
|
||||
value?: Array<CheckboxOption>;
|
||||
};
|
||||
value?: {
|
||||
type: ArrayConstructor;
|
||||
value?: CheckboxGroupValue;
|
||||
};
|
||||
defaultValue?: {
|
||||
type: ArrayConstructor;
|
||||
value?: CheckboxGroupValue;
|
||||
};
|
||||
}
|
||||
export declare type CheckboxOption = string | number | CheckboxOptionObj;
|
||||
export interface CheckboxOptionObj {
|
||||
label?: string;
|
||||
value?: string | number;
|
||||
disabled?: boolean;
|
||||
checkAll?: true;
|
||||
}
|
||||
export declare type CheckboxGroupValue = Array<string | number>;
|
||||
@@ -1 +0,0 @@
|
||||
export {};
|
||||
@@ -1,49 +0,0 @@
|
||||
:: BASE_DOC ::
|
||||
|
||||
## API
|
||||
### Checkbox Props
|
||||
|
||||
name | type | default | description | required
|
||||
-- | -- | -- | -- | --
|
||||
align | String | left | options：left/right | N
|
||||
block | Boolean | true | \- | N
|
||||
check-all | Boolean | false | \- | N
|
||||
checked | Boolean | false | \- | N
|
||||
default-checked | Boolean | undefined | uncontrolled property | N
|
||||
content | String / Slot | - | \- | N
|
||||
content-disabled | Boolean | - | \- | N
|
||||
custom-style | String | - | `0.25.0` | N
|
||||
disabled | Boolean | undefined | \- | N
|
||||
external-classes | Array | - | `['t-class', 't-class-icon', 't-class-label', 't-class-content', 't-class-border']` | N
|
||||
icon | String / Array | 'circle' | Typescript：`'circle' \| 'line' \| 'rectangle' \| string[]` | N
|
||||
indeterminate | Boolean | false | \- | N
|
||||
label | String / Slot | - | \- | N
|
||||
max-content-row | Number | 5 | \- | N
|
||||
max-label-row | Number | 3 | \- | N
|
||||
name | String | - | \- | N
|
||||
readonly | Boolean | false | \- | N
|
||||
value | String / Number | - | Typescript：`string \| number \| boolean` | N
|
||||
|
||||
### Checkbox Events
|
||||
|
||||
name | params | description
|
||||
-- | -- | --
|
||||
change | `(checked: boolean)` | \-
|
||||
|
||||
### CheckboxGroup Props
|
||||
|
||||
name | type | default | description | required
|
||||
-- | -- | -- | -- | --
|
||||
custom-style | String | - | `0.25.0` | N
|
||||
disabled | Boolean | false | \- | 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/src/checkbox-group/type.ts) | N
|
||||
value | Array | [] | Typescript：`CheckboxGroupValue` `type CheckboxGroupValue = Array<string \| number>`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/checkbox-group/type.ts) | N
|
||||
default-value | Array | undefined | uncontrolled property。Typescript：`CheckboxGroupValue` `type CheckboxGroupValue = Array<string \| number>`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/checkbox-group/type.ts) | N
|
||||
|
||||
### CheckboxGroup Events
|
||||
|
||||
name | params | description
|
||||
-- | -- | --
|
||||
change | `(value: CheckboxGroupValue, context: CheckboxGroupChangeContext)` | [see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/checkbox-group/type.ts)。<br/>`interface CheckboxGroupChangeContext { e: Event; current: string \| number; option: CheckboxOption \| TdCheckboxProps; type: 'check' \| 'uncheck' }`<br/>
|
||||
@@ -1,108 +0,0 @@
|
||||
---
|
||||
title: Checkbox 复选框
|
||||
description: 用于预设的一组选项中执行多项选择，并呈现选择结果。
|
||||
spline: form
|
||||
isComponent: true
|
||||
---
|
||||
|
||||
<span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20lines-85%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20functions-87%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20statements-86%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20branches-76%25-red" /></span>
|
||||
## 引入
|
||||
|
||||
全局引入，在 miniprogram 根目录下的`app.json`中配置，局部引入，在需要引入的页面或组件的`index.json`中配置。
|
||||
|
||||
```json
|
||||
"usingComponents": {
|
||||
"t-checkbox": "tdesign-miniprogram/checkbox/checkbox",
|
||||
"t-checkbox-group": "tdesign-miniprogram/checkbox-group/checkbox-group"
|
||||
}
|
||||
```
|
||||
|
||||
## 代码演示
|
||||
|
||||
### 组件类型
|
||||
|
||||
纵向多选框
|
||||
|
||||
{{ base }}
|
||||
|
||||
横向多选框
|
||||
|
||||
{{ horizontal }}
|
||||
|
||||
带全选多选框
|
||||
|
||||
{{ all }}
|
||||
|
||||
### 组件状态
|
||||
|
||||
多选框状态
|
||||
|
||||
{{ status }}
|
||||
|
||||
### 组件样式
|
||||
|
||||
勾选样式
|
||||
|
||||
{{ type }}
|
||||
|
||||
勾选显示位置
|
||||
|
||||
{{ right }}
|
||||
|
||||
非通栏多选样式
|
||||
|
||||
{{ card }}
|
||||
|
||||
### 组件规格
|
||||
|
||||
多选框尺寸规格
|
||||
|
||||
{{ special }}
|
||||
|
||||
## API
|
||||
### Checkbox Props
|
||||
|
||||
名称 | 类型 | 默认值 | 说明 | 必传
|
||||
-- | -- | -- | -- | --
|
||||
align | String | left | 多选框和内容相对位置。可选项：left/right | N
|
||||
block | Boolean | true | 是否为块级元素 | N
|
||||
check-all | Boolean | false | 用于标识是否为「全选选项」。单独使用无效，需在 CheckboxGroup 中使用 | N
|
||||
checked | Boolean | false | 是否选中 | N
|
||||
default-checked | Boolean | undefined | 是否选中。非受控属性 | N
|
||||
content | String / Slot | - | 多选框内容 | N
|
||||
content-disabled | Boolean | - | 是否禁用组件内容（content）触发选中 | N
|
||||
custom-style | String | - | `0.25.0`。自定义组件样式 | N
|
||||
disabled | Boolean | undefined | 是否禁用组件 | N
|
||||
external-classes | Array | - | 组件类名，分别用于设置 组件外层、多选框图标、主文案、内容 等元素类名。`['t-class', 't-class-icon', 't-class-label', 't-class-content', 't-class-border']` | N
|
||||
icon | String / Array | 'circle' | 自定义选中图标和非选中图标。使用 Array 时表示：`[选中态图标，非选中态图标]`。使用 String 时，值为 circle 表示填充圆形图标、值为 line 表示描边型图标、值为 rectangle 表示填充矩形图标。TS 类型：`'circle' \| 'line' \| 'rectangle' \| string[]` | N
|
||||
indeterminate | Boolean | false | 是否为半选 | N
|
||||
label | String / Slot | - | 主文案 | N
|
||||
max-content-row | Number | 5 | 内容最大行数限制 | N
|
||||
max-label-row | Number | 3 | 主文案最大行数限制 | N
|
||||
name | String | - | HTML 元素原生属性 | N
|
||||
readonly | Boolean | false | 只读状态 | N
|
||||
value | String / Number | - | 多选框的值。TS 类型：`string \| number` | N
|
||||
|
||||
### Checkbox Events
|
||||
|
||||
名称 | 参数 | 描述
|
||||
-- | -- | --
|
||||
change | `(checked: boolean)` | 值变化时触发
|
||||
|
||||
### CheckboxGroup Props
|
||||
|
||||
名称 | 类型 | 默认值 | 说明 | 必传
|
||||
-- | -- | -- | -- | --
|
||||
custom-style | String | - | `0.25.0`。自定义组件样式 | N
|
||||
disabled | Boolean | false | 是否禁用组件 | 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/src/checkbox-group/type.ts) | N
|
||||
value | Array | [] | 选中值。TS 类型：`CheckboxGroupValue` `type CheckboxGroupValue = Array<string \| number>`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/checkbox-group/type.ts) | N
|
||||
default-value | Array | undefined | 选中值。非受控属性。TS 类型：`CheckboxGroupValue` `type CheckboxGroupValue = Array<string \| number>`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/checkbox-group/type.ts) | N
|
||||
|
||||
### CheckboxGroup Events
|
||||
|
||||
名称 | 参数 | 描述
|
||||
-- | -- | --
|
||||
change | `(value: CheckboxGroupValue, context: CheckboxGroupChangeContext)` | 值变化时触发。`context.current` 表示当前变化的数据项，如果是全选则为空；`context.type` 表示引起选中数据变化的是选中或是取消选中，`context.option` 表示当前变化的数据项。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/checkbox-group/type.ts)。<br/>`interface CheckboxGroupChangeContext { e: Event; current: string \| number; option: CheckboxOption \| TdCheckboxProps; type: 'check' \| 'uncheck' }`<br/>
|
||||
@@ -1,100 +0,0 @@
|
||||
import { SuperComponent, ComponentsOptionsType, RelationsOptions } from '../common/src/index';
|
||||
export default class CheckBox extends SuperComponent {
|
||||
externalClasses: string[];
|
||||
behaviors: string[];
|
||||
relations: RelationsOptions;
|
||||
options: ComponentsOptionsType;
|
||||
properties: {
|
||||
theme: {
|
||||
type: StringConstructor;
|
||||
value: string;
|
||||
};
|
||||
borderless: {
|
||||
type: BooleanConstructor;
|
||||
value: boolean;
|
||||
};
|
||||
align?: {
|
||||
type: StringConstructor;
|
||||
value?: "left" | "right";
|
||||
};
|
||||
block?: {
|
||||
type: BooleanConstructor;
|
||||
value?: boolean;
|
||||
};
|
||||
checkAll?: {
|
||||
type: BooleanConstructor;
|
||||
value?: boolean;
|
||||
};
|
||||
checked?: {
|
||||
type: BooleanConstructor;
|
||||
value?: boolean;
|
||||
};
|
||||
defaultChecked?: {
|
||||
type: BooleanConstructor;
|
||||
value?: boolean;
|
||||
};
|
||||
content?: {
|
||||
type: StringConstructor;
|
||||
value?: string;
|
||||
};
|
||||
contentDisabled?: {
|
||||
type: BooleanConstructor;
|
||||
value?: boolean;
|
||||
};
|
||||
customStyle?: {
|
||||
type: StringConstructor;
|
||||
value?: string;
|
||||
};
|
||||
disabled?: {
|
||||
type: BooleanConstructor;
|
||||
value?: boolean;
|
||||
};
|
||||
externalClasses?: {
|
||||
type: ArrayConstructor;
|
||||
value?: ["t-class", "t-class-icon", "t-class-label", "t-class-content", "t-class-border"];
|
||||
};
|
||||
icon?: {
|
||||
type: null;
|
||||
value?: string[] | "circle" | "rectangle" | "line";
|
||||
};
|
||||
indeterminate?: {
|
||||
type: BooleanConstructor;
|
||||
value?: boolean;
|
||||
};
|
||||
label?: {
|
||||
type: StringConstructor;
|
||||
value?: string;
|
||||
};
|
||||
maxContentRow?: {
|
||||
type: NumberConstructor;
|
||||
value?: number;
|
||||
};
|
||||
maxLabelRow?: {
|
||||
type: NumberConstructor;
|
||||
value?: number;
|
||||
};
|
||||
name?: {
|
||||
type: StringConstructor;
|
||||
value?: string;
|
||||
};
|
||||
readonly?: {
|
||||
type: BooleanConstructor;
|
||||
value?: boolean;
|
||||
};
|
||||
value?: {
|
||||
type: null;
|
||||
value?: string | number | boolean;
|
||||
};
|
||||
};
|
||||
data: {
|
||||
prefix: string;
|
||||
classPrefix: string;
|
||||
};
|
||||
controlledProps: {
|
||||
key: string;
|
||||
event: string;
|
||||
}[];
|
||||
methods: {
|
||||
onChange(e: WechatMiniprogram.TouchEvent): void;
|
||||
};
|
||||
}
|
||||
@@ -1,88 +0,0 @@
|
||||
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}-checkbox`;
|
||||
let CheckBox = class CheckBox 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 = {
|
||||
'../checkbox-group/checkbox-group': {
|
||||
type: 'ancestor',
|
||||
linked(parent) {
|
||||
const { value, disabled, borderless } = parent.data;
|
||||
const valueSet = new Set(value);
|
||||
const data = {
|
||||
disabled: disabled || this.data.disabled,
|
||||
};
|
||||
if (borderless) {
|
||||
data.borderless = true;
|
||||
}
|
||||
data.checked = valueSet.has(this.data.value);
|
||||
if (this.data.checkAll) {
|
||||
data.checked = valueSet.size > 0;
|
||||
}
|
||||
this.setData(data);
|
||||
},
|
||||
},
|
||||
};
|
||||
this.options = {
|
||||
multipleSlots: true,
|
||||
};
|
||||
this.properties = Object.assign(Object.assign({}, Props), { theme: {
|
||||
type: String,
|
||||
value: 'default',
|
||||
}, borderless: {
|
||||
type: Boolean,
|
||||
value: false,
|
||||
} });
|
||||
this.data = {
|
||||
prefix,
|
||||
classPrefix: name,
|
||||
};
|
||||
this.controlledProps = [
|
||||
{
|
||||
key: 'checked',
|
||||
event: 'change',
|
||||
},
|
||||
];
|
||||
this.methods = {
|
||||
onChange(e) {
|
||||
const { disabled, readonly } = this.data;
|
||||
if (disabled || readonly)
|
||||
return;
|
||||
const { target } = e.currentTarget.dataset;
|
||||
const { contentDisabled } = this.data;
|
||||
if (target === 'text' && contentDisabled) {
|
||||
return;
|
||||
}
|
||||
const checked = !this.data.checked;
|
||||
const parent = this.$parent;
|
||||
if (parent) {
|
||||
parent.updateValue(Object.assign(Object.assign({}, this.data), { checked }));
|
||||
}
|
||||
else {
|
||||
this._trigger('change', { checked });
|
||||
}
|
||||
},
|
||||
};
|
||||
}
|
||||
};
|
||||
CheckBox = __decorate([
|
||||
wxComponent()
|
||||
], CheckBox);
|
||||
export default CheckBox;
|
||||
@@ -1,7 +0,0 @@
|
||||
{
|
||||
"component": true,
|
||||
"usingComponents": {
|
||||
"t-cell": "../cell/cell",
|
||||
"t-icon": "../icon/icon"
|
||||
}
|
||||
}
|
||||
@@ -1,56 +0,0 @@
|
||||
<wxs src="../common/utils.wxs" module="_" />
|
||||
|
||||
<view
|
||||
style="{{ customStyle }}"
|
||||
class="{{_.cls(classPrefix, [align, theme, ['checked', checked], ['block', block]])}} {{prefix}}-class"
|
||||
aria-role="checkbox"
|
||||
aria-checked="{{checked ? (indeterminate ? 'mixed' : true) : false}}"
|
||||
aria-disabled="{{disabled ? true : false}}"
|
||||
bind:tap="onChange"
|
||||
tabindex="{{tabindex}}"
|
||||
>
|
||||
<view
|
||||
wx:if="{{theme == 'default'}}"
|
||||
class="{{_.cls(classPrefix + '__icon', [align, ['checked', checked], ['disabled', disabled]])}} {{prefix}}-class-icon"
|
||||
>
|
||||
<view wx:if="{{_.isArray(icon)}}" class="{{classPrefix}}__icon">
|
||||
<image src="{{checked ? icon[0] : icon[1]}}" class="{{classPrefix}}__icon-image" webp />
|
||||
</view>
|
||||
<block wx:else>
|
||||
<t-icon
|
||||
wx:if="{{checked && (icon == 'circle' || icon == 'rectangle')}}"
|
||||
name="{{indeterminate ? ('minus-' + icon + '-filled') : ('check-' + icon + '-filled')}}"
|
||||
class="{{_.cls(classPrefix + '__icon-wrapper', [])}}"
|
||||
/>
|
||||
<t-icon
|
||||
wx:if="{{checked && icon == 'line'}}"
|
||||
name="{{indeterminate ? ('minus-' + icon + '-filled') : 'check'}}"
|
||||
class="{{_.cls(classPrefix + '__icon-wrapper', [])}}"
|
||||
/>
|
||||
<view
|
||||
wx:elif="{{!checked && (icon == 'circle' || icon == 'rectangle')}}"
|
||||
class="{{_.cls(classPrefix + '__icon-' + icon, [['disabled', disabled]])}}"
|
||||
/>
|
||||
<view wx:if="{{!checked && icon == 'line'}}" class="placeholder"></view>
|
||||
</block>
|
||||
</view>
|
||||
<view class="{{classPrefix}}__content" data-target="text" catch:tap="onChange">
|
||||
<view
|
||||
class="{{_.cls(classPrefix + '__title', [['disabled', disabled], ['checked', checked]])}} {{prefix}}-class-label"
|
||||
style="-webkit-line-clamp:{{maxLabelRow}}"
|
||||
>
|
||||
{{label}}
|
||||
<slot />
|
||||
<slot name="label" />
|
||||
</view>
|
||||
<view
|
||||
class="{{_.cls(classPrefix + '__description', [['disabled', disabled]])}} {{prefix}}-class-content "
|
||||
style="-webkit-line-clamp:{{maxContentRow}}"
|
||||
>{{content}}<slot name="content"
|
||||
/></view>
|
||||
</view>
|
||||
<view
|
||||
wx:if="{{theme == 'default' && !borderless}}"
|
||||
class="{{_.cls(classPrefix + '__border', [align])}} {{prefix}}-class-border"
|
||||
/>
|
||||
</view>
|
||||
@@ -1,202 +0,0 @@
|
||||
.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-checkbox {
|
||||
display: inline-flex;
|
||||
vertical-align: middle;
|
||||
position: relative;
|
||||
font-size: var(--td-checkbox-font-size, 32rpx);
|
||||
background: var(--td-checkbox-bg-color, var(--td-bg-color-block, #fff));
|
||||
}
|
||||
.t-checkbox:focus {
|
||||
outline: 0;
|
||||
}
|
||||
.t-checkbox--block {
|
||||
display: flex;
|
||||
padding: var(--td-checkbox-vertical-padding, 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-gray-color-4, #dcdcdc));
|
||||
font-size: var(--td-checkbox-icon-size, 48rpx);
|
||||
}
|
||||
.t-checkbox__icon:empty {
|
||||
display: none;
|
||||
}
|
||||
.t-checkbox__icon--checked {
|
||||
color: var(--td-checkbox-icon-checked-color, var(--td-primary-color, #0052d9));
|
||||
}
|
||||
.t-checkbox__icon--disabled {
|
||||
cursor: not-allowed;
|
||||
color: var(--td-checkbox-icon-disabled-color, var(--td-primary-color-3, #bbd3fb));
|
||||
}
|
||||
.t-checkbox__icon--left {
|
||||
margin-right: 16rpx;
|
||||
}
|
||||
.t-checkbox__icon-circle {
|
||||
width: 84rpx;
|
||||
height: 84rpx;
|
||||
border: 3px solid var(--td-checkbox-icon-color, 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-gray-color-2, #eeeeee));
|
||||
}
|
||||
.t-checkbox__icon-rectangle {
|
||||
width: 72rpx;
|
||||
height: 72rpx;
|
||||
border: 3px solid var(--td-checkbox-icon-color, var(--td-gray-color-4, #dcdcdc));
|
||||
border-radius: 4rpx;
|
||||
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-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-primary-color, #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-primary-color-3, #bbd3fb));
|
||||
}
|
||||
.t-checkbox__content {
|
||||
flex: 1;
|
||||
}
|
||||
.t-checkbox__title {
|
||||
color: var(--td-checkbox-title-color, var(--td-font-gray-1, rgba(0, 0, 0, 0.9)));
|
||||
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-font-gray-4, rgba(0, 0, 0, 0.26)));
|
||||
}
|
||||
.t-checkbox__description {
|
||||
color: var(--td-checkbox-description-color, var(--td-font-gray-2, rgba(0, 0, 0, 0.6)));
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
font-size: 28rpx;
|
||||
line-height: var(--td-checkbox-description-line-height, 44rpx);
|
||||
}
|
||||
.t-checkbox__description--disabled {
|
||||
color: var(--td-checkbox-description-disabled-color, 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-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: #f3f3f3;
|
||||
border-radius: 12rpx;
|
||||
}
|
||||
.t-checkbox--tag.t-checkbox--checked {
|
||||
color: var(--td-checkbox-tag-active-color, var(--td-primary-color, #0052d9));
|
||||
background-color: var(--td-checkbox-tag-active-bg-color, var(--td-primary-color-1, #ecf2fe));
|
||||
}
|
||||
.t-checkbox--tag .t-checkbox__title--checked {
|
||||
color: var(--td-checkbox-tag-active-color, var(--td-primary-color, #0052d9));
|
||||
}
|
||||
.t-checkbox--tag .t-checkbox__content {
|
||||
margin-right: 0;
|
||||
}
|
||||
@@ -1,3 +0,0 @@
|
||||
import { TdCheckboxProps } from './type';
|
||||
declare const props: TdCheckboxProps;
|
||||
export default props;
|
||||
@@ -1,70 +0,0 @@
|
||||
const props = {
|
||||
align: {
|
||||
type: String,
|
||||
value: 'left',
|
||||
},
|
||||
block: {
|
||||
type: Boolean,
|
||||
value: true,
|
||||
},
|
||||
checkAll: {
|
||||
type: Boolean,
|
||||
value: false,
|
||||
},
|
||||
checked: {
|
||||
type: Boolean,
|
||||
value: null,
|
||||
},
|
||||
defaultChecked: {
|
||||
type: Boolean,
|
||||
value: false,
|
||||
},
|
||||
content: {
|
||||
type: String,
|
||||
},
|
||||
contentDisabled: {
|
||||
type: Boolean,
|
||||
},
|
||||
customStyle: {
|
||||
type: String,
|
||||
value: '',
|
||||
},
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
value: undefined,
|
||||
},
|
||||
externalClasses: {
|
||||
type: Array,
|
||||
},
|
||||
icon: {
|
||||
type: null,
|
||||
value: 'circle',
|
||||
},
|
||||
indeterminate: {
|
||||
type: Boolean,
|
||||
value: false,
|
||||
},
|
||||
label: {
|
||||
type: String,
|
||||
},
|
||||
maxContentRow: {
|
||||
type: Number,
|
||||
value: 5,
|
||||
},
|
||||
maxLabelRow: {
|
||||
type: Number,
|
||||
value: 3,
|
||||
},
|
||||
name: {
|
||||
type: String,
|
||||
value: '',
|
||||
},
|
||||
readonly: {
|
||||
type: Boolean,
|
||||
value: false,
|
||||
},
|
||||
value: {
|
||||
type: null,
|
||||
},
|
||||
};
|
||||
export default props;
|
||||
@@ -1,74 +0,0 @@
|
||||
export interface TdCheckboxProps {
|
||||
align?: {
|
||||
type: StringConstructor;
|
||||
value?: 'left' | 'right';
|
||||
};
|
||||
block?: {
|
||||
type: BooleanConstructor;
|
||||
value?: boolean;
|
||||
};
|
||||
checkAll?: {
|
||||
type: BooleanConstructor;
|
||||
value?: boolean;
|
||||
};
|
||||
checked?: {
|
||||
type: BooleanConstructor;
|
||||
value?: boolean;
|
||||
};
|
||||
defaultChecked?: {
|
||||
type: BooleanConstructor;
|
||||
value?: boolean;
|
||||
};
|
||||
content?: {
|
||||
type: StringConstructor;
|
||||
value?: string;
|
||||
};
|
||||
contentDisabled?: {
|
||||
type: BooleanConstructor;
|
||||
value?: boolean;
|
||||
};
|
||||
customStyle?: {
|
||||
type: StringConstructor;
|
||||
value?: string;
|
||||
};
|
||||
disabled?: {
|
||||
type: BooleanConstructor;
|
||||
value?: boolean;
|
||||
};
|
||||
externalClasses?: {
|
||||
type: ArrayConstructor;
|
||||
value?: ['t-class', 't-class-icon', 't-class-label', 't-class-content', 't-class-border'];
|
||||
};
|
||||
icon?: {
|
||||
type: null;
|
||||
value?: 'circle' | 'line' | 'rectangle' | string[];
|
||||
};
|
||||
indeterminate?: {
|
||||
type: BooleanConstructor;
|
||||
value?: boolean;
|
||||
};
|
||||
label?: {
|
||||
type: StringConstructor;
|
||||
value?: string;
|
||||
};
|
||||
maxContentRow?: {
|
||||
type: NumberConstructor;
|
||||
value?: number;
|
||||
};
|
||||
maxLabelRow?: {
|
||||
type: NumberConstructor;
|
||||
value?: number;
|
||||
};
|
||||
name?: {
|
||||
type: StringConstructor;
|
||||
value?: string;
|
||||
};
|
||||
readonly?: {
|
||||
type: BooleanConstructor;
|
||||
value?: boolean;
|
||||
};
|
||||
value?: {
|
||||
type: null;
|
||||
value?: string | number | boolean;
|
||||
};
|
||||
}
|
||||
@@ -1 +0,0 @@
|
||||
export {};
|
||||
@@ -1,29 +0,0 @@
|
||||
:: BASE_DOC ::
|
||||
|
||||
## API
|
||||
### Message Props
|
||||
|
||||
name | type | default | description | required
|
||||
-- | -- | -- | -- | --
|
||||
action | String / Slot | - | operation | N
|
||||
align | String | left | options：left/center。Typescript：`MessageAlignType` `type MessageAlignType = 'left' \| 'center'`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/message/type.ts) | N
|
||||
close-btn | String / Boolean / Object / Slot | false | \- | N
|
||||
content | String / Slot | - | \- | N
|
||||
custom-style `v0.25.0` | String | - | \- | N
|
||||
duration | Number | 3000 | \- | N
|
||||
external-classes | Array | - | `['t-class', 't-class-content', 't-class-icon', 't-class-action', 't-class-close-btn']` | N
|
||||
icon | String / Boolean / Object/ Slot | true | Typescript：`boolean \| 'info' \| 'bell'` | N
|
||||
marquee | Boolean / Object | false | Typescript：`boolean \| DrawMarquee` `interface DrawMarquee { speed?: number; loop?: number; delay?: number }`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/message/type.ts) | N
|
||||
offset | Array | - | Typescript：`Array<string \| number>` | N
|
||||
theme | String | info | options：info/success/warning/error。Typescript：`MessageThemeList` `type MessageThemeList = 'info' \| 'success' \| 'warning' \| 'error'`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/message/type.ts) | N
|
||||
visible | Boolean | false | \- | N
|
||||
default-visible | Boolean | false | uncontrolled property | N
|
||||
z-index | Number | 15000 | \- | N
|
||||
|
||||
### Message Events
|
||||
|
||||
name | params | description
|
||||
-- | -- | --
|
||||
action-btn-click | - | \-
|
||||
close-btn-click | - | \-
|
||||
duration-end | \- | \-
|
||||
@@ -1,70 +0,0 @@
|
||||
---
|
||||
title: Message 消息通知
|
||||
description: 用于轻量级反馈或提示，不会打断用户操作。
|
||||
spline: message
|
||||
isComponent: true
|
||||
---
|
||||
|
||||
<span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20lines-94%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20functions-89%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20statements-94%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20branches-86%25-blue" /></span>
|
||||
## 引入
|
||||
|
||||
全局引入，在 miniprogram 根目录下的`app.json`中配置，局部引入，在需要引入的页面或组件的`index.json`中配置。
|
||||
|
||||
```json
|
||||
"usingComponents": {
|
||||
"t-message": "tdesign-miniprogram/message/message"
|
||||
}
|
||||
```
|
||||
|
||||
### 引入 API
|
||||
|
||||
若以 API 形式调用 Message，则需在页面 `page.js` 中引入组件 API：
|
||||
|
||||
```js
|
||||
import Message from 'tdesign-miniprogram/message/index';
|
||||
```
|
||||
|
||||
## 代码演示
|
||||
|
||||
### 组件类型
|
||||
|
||||
弹窗内容为纯文本、标题和副标题、带输入框，用 API `Message.info` 方法调用反馈类对话框。
|
||||
|
||||
|
||||
{{ base }}
|
||||
|
||||
|
||||
### 组件状态
|
||||
|
||||
消息通知类型为普通（info）、警示（warning）、成功（success）、错误（error）
|
||||
|
||||
{{ theme }}
|
||||
|
||||
## API
|
||||
### Message Props
|
||||
|
||||
名称 | 类型 | 默认值 | 说明 | 必传
|
||||
-- | -- | -- | -- | --
|
||||
action | String / Slot | - | 操作 | N
|
||||
align | String | left | 文本对齐方式。可选项：left/center。TS 类型：`MessageAlignType` `type MessageAlignType = 'left' \| 'center'`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/message/type.ts) | N
|
||||
close-btn | String / Boolean / Object / Slot | false | 关闭按钮，可以自定义。值为 true 显示默认关闭按钮，值为 false 不显示关闭按钮。值类型为 string ，如：'user'，则显示组件内置图标，为 'slot' 则表示使用插槽。值类型为 object ，则会透传至 icon 组件。| N
|
||||
content | String / Slot | - | 用于自定义消息弹出内容 | N
|
||||
custom-style `v0.25.0` | String | - | 自定义组件样式 | N
|
||||
duration | Number | 3000 | 消息内置计时器，计时到达时会触发 duration-end 事件。单位：毫秒。值为 0 则表示没有计时器。 | N
|
||||
external-classes | Array | - | 样式类名，分别用于设置 组件外层、消息内容、左侧图标、操作按钮、关闭按钮等元素类名。`['t-class', 't-class-content', 't-class-icon', 't-class-action', 't-class-close-btn']` | N
|
||||
icon | String / Boolean / Object / Slot | true | 消息提醒前面的图标，可以自定义。值为 true 则根据 theme 显示对应的图标，值为 false 则不显示图标。值为 true 显示默认关闭按钮，值为 false 不显示关闭按钮。值类型为 string ，如：'info'，则显示组件内置图标，为 'slot' 则表示使用插槽。值类型为 object ，则会透传至 icon 组件。| N
|
||||
marquee | Boolean / Object | false | 跑马灯效果。speed 指速度控制；loop 指循环播放次数，值为 -1 表示循环播放，值为 0 表示不循环播放；delay 表示延迟多久开始播放。TS 类型：`boolean \| DrawMarquee` `interface DrawMarquee { speed?: number; loop?: number
|
||||
; delay?: number }`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/message/type.ts) | N
|
||||
offset | Array | - | 相对于 placement 的偏移量，默认单位 rpx。示例：[-10, 20] 或 ['10rpx', '8rpx']。TS 类型：`Array<string \| number>` | N
|
||||
theme | String | info | 消息组件风格。可选项：info/success/warning/error。TS 类型：`MessageThemeList` `type MessageThemeList = 'info' \| 'success' \| 'warning' \| 'error'`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/message/type.ts) | N
|
||||
visible | Boolean | false | 是否显示，隐藏时默认销毁组件 | N
|
||||
default-visible | Boolean | false | 是否显示，隐藏时默认销毁组件。非受控属性 | N
|
||||
z-index | Number | 15000 | 元素层级，样式默认为 15000 | N
|
||||
|
||||
### Message Events
|
||||
|
||||
名称 | 参数 | 描述
|
||||
-- | -- | --
|
||||
action-btn-click | - | 当操作按钮存在时，用户点击操作按钮时触发
|
||||
close-btn-click | - | 当关闭按钮存在时，用户点击关闭按钮触发
|
||||
duration-end | \- | 计时结束后触发
|
||||
@@ -1,17 +0,0 @@
|
||||
/// <reference types="miniprogram-api-typings" />
|
||||
/// <reference types="miniprogram-api-typings" />
|
||||
/// <reference types="miniprogram-api-typings" />
|
||||
import { MessageProps } from './message.interface';
|
||||
declare type Context = WechatMiniprogram.Page.TrivialInstance | WechatMiniprogram.Component.TrivialInstance;
|
||||
interface MessageActionOptionsType extends Optional<MessageProps> {
|
||||
context?: Context;
|
||||
selector?: string;
|
||||
}
|
||||
declare const _default: {
|
||||
info(options: MessageActionOptionsType): WechatMiniprogram.Component.TrivialInstance;
|
||||
success(options: MessageActionOptionsType): WechatMiniprogram.Component.TrivialInstance;
|
||||
warning(options: MessageActionOptionsType): WechatMiniprogram.Component.TrivialInstance;
|
||||
error(options: MessageActionOptionsType): WechatMiniprogram.Component.TrivialInstance;
|
||||
hide(options: MessageActionOptionsType): void;
|
||||
};
|
||||
export default _default;
|
||||
@@ -1,46 +0,0 @@
|
||||
var __rest = (this && this.__rest) || function (s, e) {
|
||||
var t = {};
|
||||
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
||||
t[p] = s[p];
|
||||
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
||||
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
||||
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
||||
t[p[i]] = s[p[i]];
|
||||
}
|
||||
return t;
|
||||
};
|
||||
import { MessageType } from './message.interface';
|
||||
import { getInstance } from '../common/utils';
|
||||
const showMessage = function (options, theme = MessageType.info) {
|
||||
const { context, selector = '#t-message' } = options, otherOptions = __rest(options, ["context", "selector"]);
|
||||
const instance = getInstance(context, selector);
|
||||
if (instance) {
|
||||
instance.resetData(() => {
|
||||
instance.setData(Object.assign({ theme }, otherOptions), instance.show.bind(instance));
|
||||
});
|
||||
return instance;
|
||||
}
|
||||
console.error('未找到组件,请确认 selector && context 是否正确');
|
||||
};
|
||||
export default {
|
||||
info(options) {
|
||||
return showMessage(options, MessageType.info);
|
||||
},
|
||||
success(options) {
|
||||
return showMessage(options, MessageType.success);
|
||||
},
|
||||
warning(options) {
|
||||
return showMessage(options, MessageType.warning);
|
||||
},
|
||||
error(options) {
|
||||
return showMessage(options, MessageType.error);
|
||||
},
|
||||
hide(options) {
|
||||
const { context, selector = '#t-message' } = Object.assign({}, options);
|
||||
const instance = getInstance(context, selector);
|
||||
if (!instance) {
|
||||
return;
|
||||
}
|
||||
instance.hide();
|
||||
},
|
||||
};
|
||||
@@ -1,36 +0,0 @@
|
||||
/// <reference types="miniprogram-api-typings" />
|
||||
import { SuperComponent, ComponentsOptionsType } from '../common/src/index';
|
||||
import { MessageProps } from './message.interface';
|
||||
export default class Message extends SuperComponent {
|
||||
externalClasses: string[];
|
||||
options: ComponentsOptionsType;
|
||||
properties: MessageProps;
|
||||
data: {
|
||||
prefix: string;
|
||||
classPrefix: string;
|
||||
visible: boolean;
|
||||
loop: number;
|
||||
animation: any[];
|
||||
showAnimation: any[];
|
||||
wrapTop: number;
|
||||
};
|
||||
observers: {
|
||||
marquee(val: any): void;
|
||||
icon(icon: any): void;
|
||||
closeBtn(closeBtn: any): void;
|
||||
};
|
||||
closeTimeoutContext: number;
|
||||
nextAnimationContext: number;
|
||||
resetAnimation: WechatMiniprogram.Animation;
|
||||
ready(): void;
|
||||
memoInitalData(): void;
|
||||
resetData(cb: () => void): void;
|
||||
detached(): void;
|
||||
checkAnimation(): void;
|
||||
clearMessageAnimation(): void;
|
||||
show(): void;
|
||||
hide(): void;
|
||||
reset(): void;
|
||||
handleClose(): void;
|
||||
handleBtnClick(): void;
|
||||
}
|
||||
@@ -1,24 +0,0 @@
|
||||
export declare enum MessageType {
|
||||
info = "info",
|
||||
success = "success",
|
||||
warning = "warning",
|
||||
error = "error"
|
||||
}
|
||||
export interface MessageMarquee {
|
||||
speed?: number;
|
||||
loop?: number;
|
||||
delay?: number;
|
||||
}
|
||||
export interface MessageProps {
|
||||
visible?: boolean;
|
||||
content: string;
|
||||
align?: string;
|
||||
theme?: MessageType;
|
||||
icon?: boolean | string;
|
||||
closeBtn?: boolean;
|
||||
action?: string;
|
||||
marquee?: MessageMarquee;
|
||||
offset?: object;
|
||||
duration?: number;
|
||||
zIndex?: number;
|
||||
}
|
||||
@@ -1,7 +0,0 @@
|
||||
export var MessageType;
|
||||
(function (MessageType) {
|
||||
MessageType["info"] = "info";
|
||||
MessageType["success"] = "success";
|
||||
MessageType["warning"] = "warning";
|
||||
MessageType["error"] = "error";
|
||||
})(MessageType || (MessageType = {}));
|
||||
@@ -1,173 +0,0 @@
|
||||
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';
|
||||
import { getRect, unitConvert, setIcon } from '../common/utils';
|
||||
const { prefix } = config;
|
||||
const name = `${prefix}-message`;
|
||||
const SHOW_DURATION = 500;
|
||||
let Message = class Message extends SuperComponent {
|
||||
constructor() {
|
||||
super(...arguments);
|
||||
this.externalClasses = [
|
||||
`${prefix}-class`,
|
||||
`${prefix}-class-content`,
|
||||
`${prefix}-class-icon`,
|
||||
`${prefix}-class-action`,
|
||||
`${prefix}-class-close-btn`,
|
||||
];
|
||||
this.options = {
|
||||
styleIsolation: 'apply-shared',
|
||||
multipleSlots: true,
|
||||
};
|
||||
this.properties = Object.assign({}, props);
|
||||
this.data = {
|
||||
prefix,
|
||||
classPrefix: name,
|
||||
visible: false,
|
||||
loop: -1,
|
||||
animation: [],
|
||||
showAnimation: [],
|
||||
wrapTop: -999,
|
||||
};
|
||||
this.observers = {
|
||||
marquee(val) {
|
||||
if (JSON.stringify(val) === '{}') {
|
||||
this.setData({
|
||||
marquee: {
|
||||
speed: 50,
|
||||
loop: -1,
|
||||
delay: 5000,
|
||||
},
|
||||
});
|
||||
}
|
||||
},
|
||||
icon(icon) {
|
||||
const obj = setIcon('icon', icon, 'error-circle-filled');
|
||||
this.setData(Object.assign({}, obj));
|
||||
},
|
||||
closeBtn(closeBtn) {
|
||||
const obj = setIcon('closeBtn', closeBtn, 'close');
|
||||
this.setData(Object.assign({}, obj));
|
||||
},
|
||||
};
|
||||
this.closeTimeoutContext = 0;
|
||||
this.nextAnimationContext = 0;
|
||||
this.resetAnimation = wx.createAnimation({
|
||||
duration: 0,
|
||||
timingFunction: 'linear',
|
||||
});
|
||||
}
|
||||
ready() {
|
||||
this.memoInitalData();
|
||||
}
|
||||
memoInitalData() {
|
||||
this.initalData = Object.assign(Object.assign({}, this.properties), this.data);
|
||||
}
|
||||
resetData(cb) {
|
||||
this.setData(Object.assign({}, this.initalData), cb);
|
||||
}
|
||||
detached() {
|
||||
this.clearMessageAnimation();
|
||||
}
|
||||
checkAnimation() {
|
||||
if (!this.properties.marquee) {
|
||||
return;
|
||||
}
|
||||
const speeding = this.properties.marquee.speed;
|
||||
if (this.data.loop > 0) {
|
||||
this.data.loop -= 1;
|
||||
}
|
||||
else if (this.data.loop === 0) {
|
||||
this.setData({ animation: this.resetAnimation.translateX(0).step().export() });
|
||||
return;
|
||||
}
|
||||
if (this.nextAnimationContext) {
|
||||
this.clearMessageAnimation();
|
||||
}
|
||||
const warpID = `#${name}__text-wrap`;
|
||||
const nodeID = `#${name}__text`;
|
||||
Promise.all([getRect(this, nodeID), getRect(this, warpID)]).then(([nodeRect, wrapRect]) => {
|
||||
this.setData({
|
||||
animation: this.resetAnimation.translateX(wrapRect.width).step().export(),
|
||||
}, () => {
|
||||
const durationTime = ((nodeRect.width + wrapRect.width) / speeding) * 1000;
|
||||
const nextAnimation = wx
|
||||
.createAnimation({
|
||||
duration: durationTime,
|
||||
})
|
||||
.translateX(-nodeRect.width)
|
||||
.step()
|
||||
.export();
|
||||
setTimeout(() => {
|
||||
this.nextAnimationContext = setTimeout(this.checkAnimation.bind(this), durationTime);
|
||||
this.setData({ animation: nextAnimation });
|
||||
}, 20);
|
||||
});
|
||||
});
|
||||
}
|
||||
clearMessageAnimation() {
|
||||
clearTimeout(this.nextAnimationContext);
|
||||
this.nextAnimationContext = 0;
|
||||
}
|
||||
show() {
|
||||
const { duration, marquee, offset } = this.properties;
|
||||
this.setData({ visible: true, loop: marquee.loop });
|
||||
this.reset();
|
||||
this.checkAnimation();
|
||||
if (duration && duration > 0) {
|
||||
this.closeTimeoutContext = setTimeout(() => {
|
||||
this.hide();
|
||||
this.triggerEvent('durationEnd', { self: this });
|
||||
}, duration);
|
||||
}
|
||||
const wrapID = `#${name}`;
|
||||
getRect(this, wrapID).then((wrapRect) => {
|
||||
this.setData({ wrapTop: -wrapRect.height }, () => {
|
||||
this.setData({
|
||||
showAnimation: wx
|
||||
.createAnimation({ duration: SHOW_DURATION, timingFunction: 'ease' })
|
||||
.translateY(wrapRect.height + unitConvert(offset[0]))
|
||||
.step()
|
||||
.export(),
|
||||
});
|
||||
});
|
||||
});
|
||||
}
|
||||
hide() {
|
||||
this.reset();
|
||||
this.setData({
|
||||
showAnimation: wx
|
||||
.createAnimation({ duration: SHOW_DURATION, timingFunction: 'ease' })
|
||||
.translateY(this.data.wrapTop)
|
||||
.step()
|
||||
.export(),
|
||||
});
|
||||
setTimeout(() => {
|
||||
this.setData({ visible: false, animation: [] });
|
||||
}, SHOW_DURATION);
|
||||
}
|
||||
reset() {
|
||||
if (this.nextAnimationContext) {
|
||||
this.clearMessageAnimation();
|
||||
}
|
||||
clearTimeout(this.closeTimeoutContext);
|
||||
this.closeTimeoutContext = 0;
|
||||
}
|
||||
handleClose() {
|
||||
this.hide();
|
||||
this.triggerEvent('closeBtnClick');
|
||||
}
|
||||
handleBtnClick() {
|
||||
this.triggerEvent('actionBtnClick', { self: this });
|
||||
}
|
||||
};
|
||||
Message = __decorate([
|
||||
wxComponent()
|
||||
], Message);
|
||||
export default Message;
|
||||
@@ -1,7 +0,0 @@
|
||||
{
|
||||
"component": true,
|
||||
"usingComponents": {
|
||||
"t-icon": "../icon/icon",
|
||||
"t-button": "../button/button"
|
||||
}
|
||||
}
|
||||
@@ -1,56 +0,0 @@
|
||||
<wxs src="./message.wxs" module="this"></wxs>
|
||||
<import src="../common/template/icon.wxml" />
|
||||
|
||||
<block wx:if="{{visible}}">
|
||||
<view
|
||||
class="{{classPrefix}} {{prefix}}-class {{classPrefix}}--{{theme}}"
|
||||
style="{{this.getMessageStyles(zIndex, offset, wrapTop, customStyle)}}"
|
||||
animation="{{showAnimation}}"
|
||||
id="{{classPrefix}}"
|
||||
aria-role="alert"
|
||||
>
|
||||
<view wx:if="{{iconName || !this.isEmptyObj(iconData)}}" class="{{classPrefix}}__icon--left">
|
||||
<slot wx:if="{{iconName === 'slot'}}" name="icon" />
|
||||
<template
|
||||
wx:else
|
||||
is="icon"
|
||||
data="{{tClass: prefix + '-class-icon', ariaHidden: true, name: iconName, ...iconData}}"
|
||||
></template>
|
||||
</view>
|
||||
|
||||
<view
|
||||
class="{{classPrefix}}__text-wrap {{marquee ? '{{classPrefix}}__text-nowrap' : ''}}"
|
||||
style="text-align: {{align}}"
|
||||
id="{{classPrefix}}__text-wrap"
|
||||
>
|
||||
<view class="{{classPrefix}}__text {{prefix}}-class-content" id="{{classPrefix}}__text" animation="{{animation}}">
|
||||
<block wx:if="{{content}}">{{content}}</block>
|
||||
<slot name="content"></slot>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<t-button
|
||||
wx:if="{{action}}"
|
||||
t-class="{{classPrefix}}__btn--right {{prefix}}-class-action"
|
||||
theme="primary"
|
||||
variant="text"
|
||||
size="small"
|
||||
bind:tap="handleBtnClick"
|
||||
>{{action}}</t-button
|
||||
>
|
||||
<slot name="action" />
|
||||
|
||||
<view
|
||||
wx:if="{{ closeBtnName || !this.isEmptyObj(closeBtnData)}}"
|
||||
class="{{classPrefix}}__icon--right"
|
||||
bind:tap="handleClose"
|
||||
>
|
||||
<slot wx:if="{{closeBtnName === 'slot'}}" name="close-btn" />
|
||||
<template
|
||||
wx:else
|
||||
is="icon"
|
||||
data="{{tClass: prefix + '-class-close-btn', ariaRole: 'button', ariaLabel: '关闭', name: closeBtnName, ...closeBtnData}}"
|
||||
></template>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
@@ -1,24 +0,0 @@
|
||||
var isEmptyObj = function (obj) {
|
||||
return JSON.stringify(obj) === '{}';
|
||||
};
|
||||
|
||||
var changeNumToStr = function (arr) {
|
||||
return arr.map(function (item) {
|
||||
return typeof item === 'number' ? item + 'rpx' : item;
|
||||
});
|
||||
};
|
||||
|
||||
var getMessageStyles = function (zIndex, offset, wrapTop, customStyle) {
|
||||
var arr = changeNumToStr(offset);
|
||||
var styleOffset = '';
|
||||
styleOffset += 'top:' + changeNumToStr([wrapTop * 2]) + ';';
|
||||
styleOffset += 'right:' + arr[1] + ';';
|
||||
styleOffset += 'left:' + arr[1] + ';';
|
||||
var zIndexStyle = zIndex ? 'z-index:' + zIndex + ';' : '';
|
||||
return zIndexStyle + styleOffset + customStyle;
|
||||
};
|
||||
|
||||
module.exports = {
|
||||
getMessageStyles: getMessageStyles,
|
||||
isEmptyObj: isEmptyObj,
|
||||
};
|
||||
@@ -1,92 +0,0 @@
|
||||
.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-message {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
z-index: 15000;
|
||||
padding: 24rpx 32rpx;
|
||||
box-sizing: border-box;
|
||||
border-radius: var(--td-message-border-radius, var(--td-radius-default, 12rpx));
|
||||
line-height: 1;
|
||||
background-color: var(--td-message-bg-color, var(--td-bg-color-container, var(--td-white-color-1, #fff)));
|
||||
box-shadow: var(--td-message-box-shadow, var(--td-shadow-4, 0 2px 8px 0 rgba(0, 0, 0, 0.06)));
|
||||
}
|
||||
.t-message__text {
|
||||
display: inline-block;
|
||||
color: var(--td-message-content-font-color, var(--td-font-gray-1, rgba(0, 0, 0, 0.9)));
|
||||
font-size: var(--td-font-size-base, 28rpx);
|
||||
line-height: 44rpx;
|
||||
}
|
||||
.t-message__text-wrap {
|
||||
flex: 1 1 auto;
|
||||
overflow-x: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.t-message__text-nowrap {
|
||||
word-break: keep-all;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.t-message--info {
|
||||
color: var(--td-message-info-color, var(--td-primary-color, #0052d9));
|
||||
}
|
||||
.t-message--success {
|
||||
color: var(--td-message-success-color, var(--td-success-color, var(--td-success-color-5, #00a870)));
|
||||
}
|
||||
.t-message--warning {
|
||||
color: var(--td-message-warning-color, var(--td-warning-color, var(--td-warning-color-5, #ed7b2f)));
|
||||
}
|
||||
.t-message--error {
|
||||
color: var(--td-message-error-color, var(--td-error-color, var(--td-error-color-6, #e34d59)));
|
||||
}
|
||||
.t-message__icon--left,
|
||||
.t-message__icon--right {
|
||||
font-size: 44rpx;
|
||||
}
|
||||
.t-message__icon--left {
|
||||
margin-right: var(--td-spacer, 16rpx);
|
||||
}
|
||||
.t-message__icon--right {
|
||||
color: var(--td-message-close-icon-color, var(--td-font-gray-3, rgba(0, 0, 0, 0.4)));
|
||||
}
|
||||
.t-message__icon--right,
|
||||
.t-message .t-message__btn--right {
|
||||
flex: 0 0 auto;
|
||||
margin-left: var(--td-spacer, 16rpx);
|
||||
}
|
||||
.t-message .t-message__btn--right {
|
||||
font-size: var(--td-font-size-base, 28rpx);
|
||||
line-height: 44rpx;
|
||||
height: 44rpx;
|
||||
border-radius: var(--td-message-border-radius, var(--td-radius-default, 12rpx));
|
||||
padding: 0;
|
||||
}
|
||||
@@ -1,3 +0,0 @@
|
||||
import { TdMessageProps } from './type';
|
||||
declare const props: TdMessageProps;
|
||||
export default props;
|
||||
@@ -1,55 +0,0 @@
|
||||
const props = {
|
||||
action: {
|
||||
type: String,
|
||||
},
|
||||
align: {
|
||||
type: String,
|
||||
value: 'left',
|
||||
},
|
||||
closeBtn: {
|
||||
type: null,
|
||||
value: false,
|
||||
},
|
||||
content: {
|
||||
type: String,
|
||||
},
|
||||
customStyle: {
|
||||
type: String,
|
||||
value: '',
|
||||
},
|
||||
duration: {
|
||||
type: Number,
|
||||
value: 3000,
|
||||
},
|
||||
externalClasses: {
|
||||
type: Array,
|
||||
},
|
||||
icon: {
|
||||
type: null,
|
||||
value: true,
|
||||
},
|
||||
marquee: {
|
||||
type: null,
|
||||
value: false,
|
||||
},
|
||||
offset: {
|
||||
type: Array,
|
||||
},
|
||||
theme: {
|
||||
type: String,
|
||||
value: 'info',
|
||||
},
|
||||
visible: {
|
||||
type: Boolean,
|
||||
value: false,
|
||||
},
|
||||
defaultVisible: {
|
||||
type: Boolean,
|
||||
value: false,
|
||||
},
|
||||
zIndex: {
|
||||
type: Number,
|
||||
value: 15000,
|
||||
},
|
||||
};
|
||||
export default props;
|
||||
@@ -1,65 +0,0 @@
|
||||
export interface TdMessageProps {
|
||||
action?: {
|
||||
type: StringConstructor;
|
||||
value?: string;
|
||||
};
|
||||
align?: {
|
||||
type: StringConstructor;
|
||||
value?: MessageAlignType;
|
||||
};
|
||||
closeBtn?: {
|
||||
type: null;
|
||||
value?: string | boolean;
|
||||
};
|
||||
content?: {
|
||||
type: StringConstructor;
|
||||
value?: string;
|
||||
};
|
||||
customStyle?: {
|
||||
type: StringConstructor;
|
||||
value?: string;
|
||||
};
|
||||
duration?: {
|
||||
type: NumberConstructor;
|
||||
value?: number;
|
||||
};
|
||||
externalClasses?: {
|
||||
type: ArrayConstructor;
|
||||
value?: ['t-class', 't-class-content', 't-class-icon', 't-class-action', 't-class-close-btn'];
|
||||
};
|
||||
icon?: {
|
||||
type: null;
|
||||
value?: boolean | 'info' | 'bell';
|
||||
};
|
||||
marquee?: {
|
||||
type: null;
|
||||
value?: boolean | DrawMarquee;
|
||||
};
|
||||
offset?: {
|
||||
type: ArrayConstructor;
|
||||
value?: Array<string | number>;
|
||||
};
|
||||
theme?: {
|
||||
type: StringConstructor;
|
||||
value?: MessageThemeList;
|
||||
};
|
||||
visible?: {
|
||||
type: BooleanConstructor;
|
||||
value?: boolean;
|
||||
};
|
||||
defaultVisible?: {
|
||||
type: BooleanConstructor;
|
||||
value?: boolean;
|
||||
};
|
||||
zIndex?: {
|
||||
type: NumberConstructor;
|
||||
value?: number;
|
||||
};
|
||||
}
|
||||
export declare type MessageAlignType = 'left' | 'center';
|
||||
export interface DrawMarquee {
|
||||
speed?: number;
|
||||
loop?: number;
|
||||
delay?: number;
|
||||
}
|
||||
export declare type MessageThemeList = 'info' | 'success' | 'warning' | 'error';
|
||||
@@ -1 +0,0 @@
|
||||
export {};
|
||||
@@ -1,25 +0,0 @@
|
||||
import { SuperComponent, RelationsOptions } from '../common/src/index';
|
||||
export default class PickerItem extends SuperComponent {
|
||||
relations: RelationsOptions;
|
||||
properties: import("./type").TdPickerItemProps;
|
||||
observers: {
|
||||
options(this: PickerItem): void;
|
||||
};
|
||||
data: {
|
||||
classPrefix: string;
|
||||
offset: number;
|
||||
duration: number;
|
||||
value: string;
|
||||
curIndex: number;
|
||||
};
|
||||
methods: {
|
||||
onTouchStart(event: any): void;
|
||||
onTouchMove(event: any): void;
|
||||
onTouchEnd(): void;
|
||||
update(): void;
|
||||
resetOrigin(): void;
|
||||
getCount(): any;
|
||||
};
|
||||
calculateViewDeltaY(touchDeltaY: number): number;
|
||||
created(): void;
|
||||
}
|
||||
@@ -1,114 +0,0 @@
|
||||
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}-picker-item`;
|
||||
const itemHeight = 80;
|
||||
const DefaultDuration = 240;
|
||||
const { windowWidth } = wx.getSystemInfoSync();
|
||||
const rpx2px = (rpx) => Math.floor((windowWidth * rpx) / 750);
|
||||
const range = function (num, min, max) {
|
||||
return Math.min(Math.max(num, min), max);
|
||||
};
|
||||
let PickerItem = class PickerItem extends SuperComponent {
|
||||
constructor() {
|
||||
super(...arguments);
|
||||
this.relations = {
|
||||
'../picker/picker': {
|
||||
type: 'parent',
|
||||
},
|
||||
};
|
||||
this.properties = props;
|
||||
this.observers = {
|
||||
options() {
|
||||
this.update();
|
||||
},
|
||||
};
|
||||
this.data = {
|
||||
classPrefix: name,
|
||||
offset: 0,
|
||||
duration: 0,
|
||||
value: '',
|
||||
curIndex: 0,
|
||||
};
|
||||
this.methods = {
|
||||
onTouchStart(event) {
|
||||
this.StartY = event.touches[0].clientY;
|
||||
this.StartOffset = this.data.offset;
|
||||
this.setData({ duration: 0 });
|
||||
},
|
||||
onTouchMove(event) {
|
||||
const { StartY, StartOffset, itemHeight } = this;
|
||||
const touchDeltaY = event.touches[0].clientY - StartY;
|
||||
const deltaY = this.calculateViewDeltaY(touchDeltaY);
|
||||
this.setData({
|
||||
offset: range(StartOffset + deltaY, -(this.getCount() * itemHeight), 0),
|
||||
duration: DefaultDuration,
|
||||
});
|
||||
},
|
||||
onTouchEnd() {
|
||||
const { offset } = this.data;
|
||||
const { options } = this.properties;
|
||||
if (offset === this.StartOffset) {
|
||||
return;
|
||||
}
|
||||
const index = range(Math.round(-offset / this.itemHeight), 0, this.getCount() - 1);
|
||||
this.setData({
|
||||
curIndex: index,
|
||||
offset: -index * this.itemHeight,
|
||||
});
|
||||
if (index === this._selectedIndex) {
|
||||
return;
|
||||
}
|
||||
wx.nextTick(() => {
|
||||
var _a, _b, _c;
|
||||
this._selectedIndex = index;
|
||||
this._selectedValue = (_a = options[index]) === null || _a === void 0 ? void 0 : _a.value;
|
||||
this._selectedLabel = (_b = options[index]) === null || _b === void 0 ? void 0 : _b.label;
|
||||
(_c = this.$parent) === null || _c === void 0 ? void 0 : _c.triggerColumnChange({
|
||||
index,
|
||||
column: this.columnIndex || 0,
|
||||
});
|
||||
});
|
||||
},
|
||||
update() {
|
||||
var _a, _b;
|
||||
const { options, value } = this.data;
|
||||
const index = options.findIndex((item) => item.value === value);
|
||||
const selectedIndex = index > 0 ? index : 0;
|
||||
this.setData({
|
||||
offset: -selectedIndex * this.itemHeight,
|
||||
curIndex: selectedIndex,
|
||||
});
|
||||
this._selectedIndex = selectedIndex;
|
||||
this._selectedValue = (_a = options[selectedIndex]) === null || _a === void 0 ? void 0 : _a.value;
|
||||
this._selectedLabel = (_b = options[selectedIndex]) === null || _b === void 0 ? void 0 : _b.label;
|
||||
},
|
||||
resetOrigin() {
|
||||
this.update();
|
||||
},
|
||||
getCount() {
|
||||
var _a, _b;
|
||||
return (_b = (_a = this.data) === null || _a === void 0 ? void 0 : _a.options) === null || _b === void 0 ? void 0 : _b.length;
|
||||
},
|
||||
};
|
||||
}
|
||||
calculateViewDeltaY(touchDeltaY) {
|
||||
return Math.abs(touchDeltaY) > itemHeight ? 1.2 * touchDeltaY : touchDeltaY;
|
||||
}
|
||||
created() {
|
||||
this.StartY = 0;
|
||||
this.StartOffset = 0;
|
||||
this.itemHeight = rpx2px(itemHeight);
|
||||
}
|
||||
};
|
||||
PickerItem = __decorate([
|
||||
wxComponent()
|
||||
], PickerItem);
|
||||
export default PickerItem;
|
||||
@@ -1,4 +0,0 @@
|
||||
{
|
||||
"component": true,
|
||||
"usingComponents": {}
|
||||
}
|
||||
@@ -1,24 +0,0 @@
|
||||
<wxs src="../common/utils.wxs" module="_" />
|
||||
<view
|
||||
style="{{ customStyle }}"
|
||||
class="{{_.cls(classPrefix + '__group', [['narrow', siblingCount > 4], ['roomy', siblingCount <= 2]])}}"
|
||||
bind:touchstart="onTouchStart"
|
||||
catch:touchmove="onTouchMove"
|
||||
bind:touchend="onTouchEnd"
|
||||
bind:touchcancel="onTouchEnd"
|
||||
>
|
||||
<view
|
||||
class="{{classPrefix}}__wrapper"
|
||||
style="transition: transform {{ duration }}ms cubic-bezier(0.215, 0.61, 0.355, 1); transform: translate3d(0, {{ offset }}px, 0)"
|
||||
>
|
||||
<view
|
||||
class="{{_.cls(classPrefix + '__item', [['active', curIndex == index]])}}"
|
||||
wx:for="{{options}}"
|
||||
wx:key="index"
|
||||
wx:for-item="option"
|
||||
data-index="{{ index }}"
|
||||
>
|
||||
{{option.label}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
@@ -1,58 +0,0 @@
|
||||
.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);
|
||||
}
|
||||
:host {
|
||||
display: flex;
|
||||
}
|
||||
.t-picker-item__group {
|
||||
height: var(--td-picker-group-height, 400rpx);
|
||||
overflow: hidden;
|
||||
flex: 1;
|
||||
z-index: 1;
|
||||
padding: 0 40rpx;
|
||||
}
|
||||
.t-picker-item__group--roomy {
|
||||
padding: 0 64rpx;
|
||||
}
|
||||
.t-picker-item__group--narrow {
|
||||
padding: 0 16rpx;
|
||||
}
|
||||
.t-picker-item__wrapper {
|
||||
padding: 144rpx 0;
|
||||
}
|
||||
.t-picker-item__item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: var(--td-picker-item-height, 80rpx);
|
||||
line-height: var(--td-picker-item-height, 80rpx);
|
||||
color: var(--td-picker-item-color, var(--td-font-gray-2, rgba(0, 0, 0, 0.6)));
|
||||
}
|
||||
.t-picker-item__item--active {
|
||||
color: var(--td-picker-item-active-color, var(--td-font-gray-1, rgba(0, 0, 0, 0.9)));
|
||||
font-weight: 600;
|
||||
}
|
||||
@@ -1,3 +0,0 @@
|
||||
import { TdPickerItemProps } from './type';
|
||||
declare const props: TdPickerItemProps;
|
||||
export default props;
|
||||
@@ -1,14 +0,0 @@
|
||||
const props = {
|
||||
customStyle: {
|
||||
type: String,
|
||||
value: '',
|
||||
},
|
||||
format: {
|
||||
type: null,
|
||||
},
|
||||
options: {
|
||||
type: Array,
|
||||
value: [],
|
||||
},
|
||||
};
|
||||
export default props;
|
||||
@@ -1,18 +0,0 @@
|
||||
export interface TdPickerItemProps {
|
||||
customStyle?: {
|
||||
type: StringConstructor;
|
||||
value?: string;
|
||||
};
|
||||
format?: {
|
||||
type: undefined;
|
||||
value?: (option: PickerItemOption) => string;
|
||||
};
|
||||
options?: {
|
||||
type: ArrayConstructor;
|
||||
value?: PickerItemOption[];
|
||||
};
|
||||
}
|
||||
export interface PickerItemOption {
|
||||
label: string;
|
||||
value: string | number;
|
||||
}
|
||||
@@ -1 +0,0 @@
|
||||
export {};
|
||||
@@ -1,36 +0,0 @@
|
||||
:: BASE_DOC ::
|
||||
|
||||
## API
|
||||
### Picker Props
|
||||
|
||||
name | type | default | description | required
|
||||
-- | -- | -- | -- | --
|
||||
auto-close | Boolean | true | \- | N
|
||||
cancel-btn | String / Boolean / Object | true | Typescript：`boolean \| string \| ButtonProps` | N
|
||||
columns | Array / Function | [] | required。Typescript：`Array<PickerColumn> \| ((item: Array<PickerValue>) => Array<PickerColumn>)` `type PickerColumn = PickerColumnItem[]` `interface PickerColumnItem { label: string,value: string}`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/picker/type.ts) | Y
|
||||
confirm-btn | String / Boolean / Object | true | Typescript：`boolean \| string \| ButtonProps`，[Button API Documents](./button?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/picker/type.ts) | N
|
||||
custom-style | String | - | `0.25.0` | N
|
||||
footer | Slot | - | \- | N
|
||||
header | Boolean / Slot | true | \- | N
|
||||
render-label | String / Function | - | Typescript：`(item: PickerColumnItem) => string` | N
|
||||
title | String | '' | \- | N
|
||||
value | Array | - | Typescript：`Array<PickerValue>` `type PickerValue = string \| number`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/picker/type.ts) | N
|
||||
default-value | Array | undefined | uncontrolled property。Typescript：`Array<PickerValue>` `type PickerValue = string \| number`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/picker/type.ts) | N
|
||||
visible | Boolean | false | \- | N
|
||||
|
||||
### Picker Events
|
||||
|
||||
name | params | description
|
||||
-- | -- | --
|
||||
cancel | - | \-
|
||||
change | `(value: Array<PickerValue>, label: string, columns: Array<{ column: number; index: number }> )` | \-
|
||||
confirm | `(value: Array<PickerValue>, label: string, columns: Array<{ column: number; index: number }> )` | \-
|
||||
pick | `(value: Array<PickerValue>, label: string, column: number, index: number)` | \-
|
||||
|
||||
### PickerItem Props
|
||||
|
||||
name | type | default | description | required
|
||||
-- | -- | -- | -- | --
|
||||
custom-style | String | - | `0.25.0` | N
|
||||
format | Function | - | Typescript：`(option: PickerItemOption) => string` | N
|
||||
options | Array | [] | Typescript：`PickerItemOption[]` `interface PickerItemOption { label: string; value: string \| number }`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/picker-item/type.ts) | N
|
||||
@@ -1,74 +0,0 @@
|
||||
---
|
||||
title: Picker 选择器
|
||||
description: 用于一组预设数据中的选择。
|
||||
spline: form
|
||||
isComponent: true
|
||||
---
|
||||
|
||||
<span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20lines-91%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20functions-90%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20statements-92%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20branches-89%25-blue" /></span>
|
||||
## 引入
|
||||
|
||||
全局引入，在 miniprogram 根目录下的`app.json`中配置，局部引入，在需要引入的页面或组件的`index.json`中配置。
|
||||
|
||||
```json
|
||||
"usingComponents": {
|
||||
"t-picker": "tdesign-miniprogram/picker/picker",
|
||||
"t-picker-item": "tdesign-miniprogram/picker-item/picker-item",
|
||||
}
|
||||
```
|
||||
|
||||
## 代码演示
|
||||
|
||||
### 组件类型
|
||||
#### 基础选择器
|
||||
|
||||
单项和多选选择
|
||||
|
||||
{{ base }}
|
||||
|
||||
#### 地区选择器
|
||||
|
||||
支持省市区切换，支持数据联动
|
||||
|
||||
{{ area }}
|
||||
|
||||
### 组件状态
|
||||
|
||||
是否带标题
|
||||
|
||||
{{ with-title }}
|
||||
|
||||
## API
|
||||
### Picker Props
|
||||
|
||||
名称 | 类型 | 默认值 | 说明 | 必传
|
||||
-- | -- | -- | -- | --
|
||||
auto-close | Boolean | true | 自动关闭；在确认、取消、点击遮罩层自动关闭，不需要手动设置 visible | N
|
||||
cancel-btn | String / Boolean / Object | true | 取消按钮文字。TS 类型：`boolean \| string \| ButtonProps` | N
|
||||
columns | Array / Function | [] | 必需。配置每一列的选项。TS 类型：`Array<PickerColumn> \| ((item: Array<PickerValue>) => Array<PickerColumn>)` `type PickerColumn = PickerColumnItem[]` `interface PickerColumnItem { label: string,value: string}`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/picker/type.ts) | Y
|
||||
confirm-btn | String / Boolean / Object | true | 确定按钮文字。TS 类型：`boolean \| string \| ButtonProps`，[Button API Documents](./button?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/picker/type.ts) | N
|
||||
custom-style | String | - | `0.25.0`。自定义组件样式 | N
|
||||
footer | Slot | - | 底部内容 | N
|
||||
header | Boolean / Slot | true | 头部内容。值为 true 显示空白头部，值为 false 不显示任何内容，值类型为 TNode 表示自定义头部内容 | N
|
||||
render-label | String / Function | - | 自定义label。TS 类型：`(item: PickerColumnItem) => string` | N
|
||||
title | String | '' | 标题 | N
|
||||
value | Array | - | 选中值。TS 类型：`Array<PickerValue>` `type PickerValue = string \| number`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/picker/type.ts) | N
|
||||
default-value | Array | undefined | 选中值。非受控属性。TS 类型：`Array<PickerValue>` `type PickerValue = string \| number`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/picker/type.ts) | N
|
||||
visible | Boolean | false | 是否显示 | N
|
||||
|
||||
### Picker Events
|
||||
|
||||
名称 | 参数 | 描述
|
||||
-- | -- | --
|
||||
cancel | - | 点击取消按钮时触发
|
||||
change | `(value: Array<PickerValue>, label: string, columns: Array<{ column: number; index: number }> )` | 选中变化时候触发，即确认变化时触发
|
||||
confirm | `(value: Array<PickerValue>, label: string, columns: Array<{ column: number; index: number }> )` | 点击确认按钮时触发
|
||||
pick | `(value: Array<PickerValue>, label: string, column: number, index: number)` | 任何一列选中都会触发，不同的列参数不同。`column` 表示第几列变化，`index` 表示变化那一列的选中项下标
|
||||
|
||||
### PickerItem Props
|
||||
|
||||
名称 | 类型 | 默认值 | 说明 | 必传
|
||||
-- | -- | -- | -- | --
|
||||
custom-style | String | - | `0.25.0`。自定义组件样式 | N
|
||||
format | Function | - | 格式化标签。TS 类型：`(option: PickerItemOption) => string` | N
|
||||
options | Array | [] | 数据源。TS 类型：`PickerItemOption[]` `interface PickerItemOption { label: string; value: string \| number }`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/picker-item/type.ts) | N
|
||||
@@ -1,30 +0,0 @@
|
||||
import { SuperComponent, RelationsOptions } from '../common/src/index';
|
||||
export default class Picker extends SuperComponent {
|
||||
properties: import("./type").TdPickerProps;
|
||||
externalClasses: string[];
|
||||
options: {
|
||||
multipleSlots: boolean;
|
||||
};
|
||||
relations: RelationsOptions;
|
||||
observers: {
|
||||
value(): void;
|
||||
};
|
||||
data: {
|
||||
prefix: string;
|
||||
classPrefix: string;
|
||||
};
|
||||
methods: {
|
||||
updateChildren(): void;
|
||||
getSelectedValue(): any[];
|
||||
getColumnIndexes(): any;
|
||||
onConfirm(): void;
|
||||
triggerColumnChange({ column, index }: {
|
||||
column: any;
|
||||
index: any;
|
||||
}): void;
|
||||
onCancel(): void;
|
||||
onPopupChange(e: any): void;
|
||||
close(): void;
|
||||
};
|
||||
ready(): void;
|
||||
}
|
||||
@@ -1,96 +0,0 @@
|
||||
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}-picker`;
|
||||
let Picker = class Picker extends SuperComponent {
|
||||
constructor() {
|
||||
super(...arguments);
|
||||
this.properties = props;
|
||||
this.externalClasses = [`${prefix}-class`, `${prefix}-class-confirm`, `${prefix}-class-cancel`, `${prefix}-class-title`];
|
||||
this.options = {
|
||||
multipleSlots: true,
|
||||
};
|
||||
this.relations = {
|
||||
'../picker-item/picker-item': {
|
||||
type: 'child',
|
||||
linked() {
|
||||
this.updateChildren();
|
||||
},
|
||||
},
|
||||
};
|
||||
this.observers = {
|
||||
value() {
|
||||
this.updateChildren();
|
||||
},
|
||||
};
|
||||
this.data = {
|
||||
prefix,
|
||||
classPrefix: name,
|
||||
};
|
||||
this.methods = {
|
||||
updateChildren() {
|
||||
const { value } = this.properties;
|
||||
this.$children.forEach((child, index) => {
|
||||
child.setData({
|
||||
value: (value === null || value === void 0 ? void 0 : value[index]) || '',
|
||||
siblingCount: this.$children.length,
|
||||
});
|
||||
child.update();
|
||||
});
|
||||
},
|
||||
getSelectedValue() {
|
||||
const value = this.$children.map((item) => item._selectedValue);
|
||||
const label = this.$children.map((item) => item._selectedLabel);
|
||||
return [value, label];
|
||||
},
|
||||
getColumnIndexes() {
|
||||
const columns = this.$children.map((pickerColumn, columnIndex) => {
|
||||
return {
|
||||
column: columnIndex,
|
||||
index: pickerColumn._selectedIndex,
|
||||
};
|
||||
});
|
||||
return columns;
|
||||
},
|
||||
onConfirm() {
|
||||
const [value, label] = this.getSelectedValue();
|
||||
const columns = this.getColumnIndexes();
|
||||
this.close();
|
||||
this.triggerEvent('change', { value, label, columns });
|
||||
this.triggerEvent('confirm', { value, label, columns });
|
||||
},
|
||||
triggerColumnChange({ column, index }) {
|
||||
const [value, label] = this.getSelectedValue();
|
||||
this.triggerEvent('pick', { value, label, column, index });
|
||||
},
|
||||
onCancel() {
|
||||
this.close();
|
||||
this.triggerEvent('cancel');
|
||||
},
|
||||
onPopupChange(e) {
|
||||
const { visible } = e.detail;
|
||||
this.close();
|
||||
this.triggerEvent('visible-change', { visible });
|
||||
},
|
||||
close() {
|
||||
if (this.data.autoClose) {
|
||||
this.setData({ visible: false });
|
||||
}
|
||||
},
|
||||
};
|
||||
}
|
||||
ready() {
|
||||
this.$children.map((column, index) => (column.columnIndex = index));
|
||||
}
|
||||
};
|
||||
Picker = __decorate([
|
||||
wxComponent()
|
||||
], Picker);
|
||||
export default Picker;
|
||||
@@ -1,6 +0,0 @@
|
||||
{
|
||||
"component": true,
|
||||
"usingComponents": {
|
||||
"t-popup": "../popup/popup"
|
||||
}
|
||||
}
|
||||
@@ -1,25 +0,0 @@
|
||||
<wxs src="../common/utils.wxs" module="_" />
|
||||
|
||||
<t-popup visible="{{visible}}" placement="bottom" bind:visible-change="onPopupChange">
|
||||
<view slot="content" style="{{ customStyle }}" class="{{classPrefix}} {{prefix}}-class">
|
||||
<view class="{{classPrefix}}__toolbar" wx:if="{{header}}">
|
||||
<view class="{{classPrefix}}__cancel {{prefix}}-class-cancel" wx:if="{{cancelBtn}}" bindtap="onCancel"
|
||||
>{{cancelBtn}}</view
|
||||
>
|
||||
<view class="{{classPrefix}}__title {{prefix}}-class-title">{{title}}</view>
|
||||
<view class="{{classPrefix}}__confirm {{prefix}}-class-confirm" wx:if="{{confirmBtn}}" bindtap="onConfirm"
|
||||
>{{confirmBtn}}</view
|
||||
>
|
||||
</view>
|
||||
<!-- 扩展插槽 -->
|
||||
<slot name="header" />
|
||||
<view class="{{_.cls(classPrefix + '__main', [])}}">
|
||||
<slot />
|
||||
<view class="{{classPrefix}}__mask {{classPrefix}}__mask--top" />
|
||||
<view class="{{classPrefix}}__mask {{classPrefix}}__mask--bottom" />
|
||||
<view class="{{classPrefix}}__indicator"></view>
|
||||
</view>
|
||||
<!-- 扩展插槽 -->
|
||||
<slot name="footer" />
|
||||
</view>
|
||||
</t-popup>
|
||||
@@ -1,102 +0,0 @@
|
||||
.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-picker {
|
||||
position: relative;
|
||||
background-color: var(--td-picker-bg-color, var(--td-bg-color-block, #fff));
|
||||
padding-bottom: constant(safe-area-inset-bottom);
|
||||
padding-bottom: env(safe-area-inset-bottom);
|
||||
border-top-left-radius: var(--td-picker-border-radius, 24rpx);
|
||||
border-top-right-radius: var(--td-picker-border-radius, 24rpx);
|
||||
}
|
||||
.t-picker__toolbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
overflow: hidden;
|
||||
height: var(--td-picker-toolbar-height, 116rpx);
|
||||
}
|
||||
.t-picker__title {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
color: var(--td-picker-title-color, var(--td-font-gray-1, rgba(0, 0, 0, 0.9)));
|
||||
line-height: var(--td-picker-title-line-height, 52rpx);
|
||||
font-weight: var(--td-picker-title-font-weight, 600);
|
||||
font-size: var(--td-picker-title-font-size, 36rpx);
|
||||
}
|
||||
.t-picker__cancel,
|
||||
.t-picker__confirm {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
user-select: none;
|
||||
font-size: var(--td-picker-button-font-size, 32rpx);
|
||||
height: 100%;
|
||||
padding: 0 32rpx;
|
||||
}
|
||||
.t-picker__cancel {
|
||||
color: var(--td-picker-cancel-color, var(--td-font-gray-2, rgba(0, 0, 0, 0.6)));
|
||||
}
|
||||
.t-picker__confirm {
|
||||
color: var(--td-picker-confirm-color, var(--td-primary-color, #0052d9));
|
||||
}
|
||||
.t-picker__main {
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
.t-picker__mask {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 3;
|
||||
backface-visibility: hidden;
|
||||
pointer-events: none;
|
||||
height: 96rpx;
|
||||
}
|
||||
.t-picker__mask--top {
|
||||
top: 0;
|
||||
background: linear-gradient(180deg, #fff 0%, rgba(255, 255, 255, 0) 100%);
|
||||
}
|
||||
.t-picker__mask--bottom {
|
||||
bottom: 0;
|
||||
background: linear-gradient(180deg, #fff 0%, rgba(255, 255, 255, 0) 100%);
|
||||
transform: matrix(1, 0, 0, -1, 0, 0);
|
||||
}
|
||||
.t-picker__indicator {
|
||||
height: var(--td-picker-item-height, 80rpx);
|
||||
position: absolute;
|
||||
left: 32rpx;
|
||||
right: 32rpx;
|
||||
top: 144rpx;
|
||||
pointer-events: none;
|
||||
background-color: var(--td-picker-indicator-bg-color, var(--td-gray-color-1, #f3f3f3));
|
||||
border-radius: var(--td-picker-indicator-border-radius, 12rpx);
|
||||
}
|
||||
@@ -1,3 +0,0 @@
|
||||
import { TdPickerProps } from './type';
|
||||
declare const props: TdPickerProps;
|
||||
export default props;
|
||||
@@ -1,45 +0,0 @@
|
||||
const props = {
|
||||
autoClose: {
|
||||
type: Boolean,
|
||||
value: true,
|
||||
},
|
||||
cancelBtn: {
|
||||
type: null,
|
||||
value: true,
|
||||
},
|
||||
columns: {
|
||||
type: null,
|
||||
value: [],
|
||||
},
|
||||
confirmBtn: {
|
||||
type: null,
|
||||
value: true,
|
||||
},
|
||||
customStyle: {
|
||||
type: String,
|
||||
value: '',
|
||||
},
|
||||
header: {
|
||||
type: Boolean,
|
||||
value: true,
|
||||
},
|
||||
renderLabel: {
|
||||
type: null,
|
||||
},
|
||||
title: {
|
||||
type: String,
|
||||
value: '',
|
||||
},
|
||||
value: {
|
||||
type: Array,
|
||||
value: null,
|
||||
},
|
||||
defaultValue: {
|
||||
type: Array,
|
||||
},
|
||||
visible: {
|
||||
type: Boolean,
|
||||
value: false,
|
||||
},
|
||||
};
|
||||
export default props;
|
||||
@@ -1,53 +0,0 @@
|
||||
import { ButtonProps } from '../button/index';
|
||||
export interface TdPickerProps {
|
||||
autoClose?: {
|
||||
type: BooleanConstructor;
|
||||
value?: boolean;
|
||||
};
|
||||
cancelBtn?: {
|
||||
type: null;
|
||||
value?: boolean | string | ButtonProps;
|
||||
};
|
||||
columns: {
|
||||
type: ArrayConstructor;
|
||||
value?: Array<PickerColumn> | ((item: Array<PickerValue>) => Array<PickerColumn>);
|
||||
};
|
||||
confirmBtn?: {
|
||||
type: null;
|
||||
value?: boolean | string | ButtonProps;
|
||||
};
|
||||
customStyle?: {
|
||||
type: StringConstructor;
|
||||
value?: string;
|
||||
};
|
||||
header?: {
|
||||
type: BooleanConstructor;
|
||||
value?: boolean;
|
||||
};
|
||||
renderLabel?: {
|
||||
type: StringConstructor;
|
||||
value?: (item: PickerColumnItem) => string;
|
||||
};
|
||||
title?: {
|
||||
type: StringConstructor;
|
||||
value?: string;
|
||||
};
|
||||
value?: {
|
||||
type: ArrayConstructor;
|
||||
value?: Array<PickerValue>;
|
||||
};
|
||||
defaultValue?: {
|
||||
type: ArrayConstructor;
|
||||
value?: Array<PickerValue>;
|
||||
};
|
||||
visible?: {
|
||||
type: BooleanConstructor;
|
||||
value?: boolean;
|
||||
};
|
||||
}
|
||||
export declare type PickerColumn = PickerColumnItem[];
|
||||
export interface PickerColumnItem {
|
||||
label: string;
|
||||
value: string;
|
||||
}
|
||||
export declare type PickerValue = string | number;
|
||||
@@ -1 +0,0 @@
|
||||
export {};
|
||||
@@ -1,60 +0,0 @@
|
||||
---
|
||||
title: radio-group
|
||||
description: 组合单选框。
|
||||
spline: form
|
||||
isComponent: true
|
||||
---
|
||||
|
||||
### 特性及兼容性
|
||||
|
||||
无
|
||||
|
||||
## 引入
|
||||
|
||||
### 引入组件
|
||||
|
||||
在 `app.json` 或 `page.json` 中引入组件：
|
||||
|
||||
```json
|
||||
"usingComponents": {
|
||||
"t-radio": "tdesign-miniprogram/radio/radio",
|
||||
"t-radio-group": "tdesign-miniprogram/radio-group/radio-group"
|
||||
}
|
||||
```
|
||||
|
||||
## 用法
|
||||
|
||||
### 组件方式
|
||||
|
||||
```html
|
||||
<!-- page.wxml -->
|
||||
<t-radio-group value="radio1" bind:change="onChange">
|
||||
<t-radio title="单行标题" name="radio1" />
|
||||
<t-radio title="单行标题" label="辅助信息" name="radio2" />
|
||||
</t-radio-group>
|
||||
```
|
||||
|
||||
## API
|
||||
|
||||
### `<t-radio-group>` 组件
|
||||
|
||||
组件路径：`tdesign-miniprogram/radio-group/radio-group`
|
||||
|
||||
#### Props
|
||||
|
||||
| 属性 | 值类型 | 默认值 | 必传 | 说明 |
|
||||
| -------- | --------- | ------ | ---- | ---------------------- |
|
||||
| value | `String` | - | N | 当前选中项的标识符 |
|
||||
| name | `String` | - | N | 在表单内提交时的标识符 |
|
||||
|
||||
### Slots
|
||||
|
||||
| 名称 | 说明 |
|
||||
| ---- | -------------- |
|
||||
| 默认 | `t-radio` 组件 |
|
||||
|
||||
#### Events
|
||||
|
||||
| 事件 | event.detail | 说明 |
|
||||
| ----------- | ------------------------- | ------------------------ |
|
||||
| bind:change | {name:当前选中项的标识符} | 当绑定值变化时触发的事件 |
|
||||
@@ -1,3 +0,0 @@
|
||||
import { TdRadioGroupProps } from './type';
|
||||
declare const props: TdRadioGroupProps;
|
||||
export default props;
|
||||
@@ -1,40 +0,0 @@
|
||||
const props = {
|
||||
align: {
|
||||
type: String,
|
||||
value: null,
|
||||
},
|
||||
borderless: {
|
||||
type: Boolean,
|
||||
value: false,
|
||||
},
|
||||
customStyle: {
|
||||
type: String,
|
||||
value: '',
|
||||
},
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
value: undefined,
|
||||
},
|
||||
icon: {
|
||||
type: null,
|
||||
value: 'fill-circle',
|
||||
},
|
||||
keys: {
|
||||
type: Object,
|
||||
},
|
||||
name: {
|
||||
type: String,
|
||||
value: '',
|
||||
},
|
||||
options: {
|
||||
type: Array,
|
||||
},
|
||||
value: {
|
||||
type: null,
|
||||
value: null,
|
||||
},
|
||||
defaultValue: {
|
||||
type: null,
|
||||
},
|
||||
};
|
||||
export default props;
|
||||
@@ -1,25 +0,0 @@
|
||||
import { SuperComponent, RelationsOptions } from '../common/src/index';
|
||||
export default class RadioGroup extends SuperComponent {
|
||||
externalClasses: string[];
|
||||
data: {
|
||||
prefix: string;
|
||||
classPrefix: string;
|
||||
radioOptions: any[];
|
||||
};
|
||||
relations: RelationsOptions;
|
||||
properties: import("./type").TdRadioGroupProps<import("../radio/type").RadioValue>;
|
||||
controlledProps: {
|
||||
key: string;
|
||||
event: string;
|
||||
}[];
|
||||
observers: {
|
||||
value(v: any): void;
|
||||
options(): void;
|
||||
};
|
||||
methods: {
|
||||
getChilds(): any;
|
||||
updateValue(value: any): void;
|
||||
handleRadioChange(e: any): void;
|
||||
initWithOptions(): void;
|
||||
};
|
||||
}
|
||||
@@ -1,105 +0,0 @@
|
||||
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-group`;
|
||||
let RadioGroup = class RadioGroup extends SuperComponent {
|
||||
constructor() {
|
||||
super(...arguments);
|
||||
this.externalClasses = [`${prefix}-class`];
|
||||
this.data = {
|
||||
prefix,
|
||||
classPrefix: name,
|
||||
radioOptions: [],
|
||||
};
|
||||
this.relations = {
|
||||
'../radio/radio': {
|
||||
type: 'descendant',
|
||||
linked(target) {
|
||||
const { value, disabled } = this.data;
|
||||
target.setData({
|
||||
checked: value === target.data.value,
|
||||
});
|
||||
target.setDisabled(disabled);
|
||||
},
|
||||
},
|
||||
};
|
||||
this.properties = props;
|
||||
this.controlledProps = [
|
||||
{
|
||||
key: 'value',
|
||||
event: 'change',
|
||||
},
|
||||
];
|
||||
this.observers = {
|
||||
value(v) {
|
||||
this.getChilds().forEach((item) => {
|
||||
item.setData({
|
||||
checked: v === item.data.value,
|
||||
});
|
||||
});
|
||||
},
|
||||
options() {
|
||||
this.initWithOptions();
|
||||
},
|
||||
};
|
||||
this.methods = {
|
||||
getChilds() {
|
||||
let items = this.$children;
|
||||
if (!(items === null || items === void 0 ? void 0 : items.length)) {
|
||||
items = this.selectAllComponents(`.${prefix}-radio-option`);
|
||||
}
|
||||
return items;
|
||||
},
|
||||
updateValue(value) {
|
||||
this._trigger('change', { value });
|
||||
},
|
||||
handleRadioChange(e) {
|
||||
const { value, index } = e.target.dataset;
|
||||
this._trigger('change', { value, index });
|
||||
},
|
||||
initWithOptions() {
|
||||
const { options, value, keys } = this.data;
|
||||
if (!(options === null || options === void 0 ? void 0 : options.length) || !Array.isArray(options)) {
|
||||
this.setData({
|
||||
radioOptions: [],
|
||||
});
|
||||
return;
|
||||
}
|
||||
const optionsValue = [];
|
||||
try {
|
||||
options.forEach((element) => {
|
||||
var _a, _b, _c;
|
||||
const typeName = typeof element;
|
||||
if (typeName === 'number' || typeName === 'string') {
|
||||
optionsValue.push({
|
||||
label: `${element}`,
|
||||
value: element,
|
||||
checked: value === element,
|
||||
});
|
||||
}
|
||||
else if (typeName === 'object') {
|
||||
optionsValue.push(Object.assign(Object.assign({}, element), { label: element[(_a = keys === null || keys === void 0 ? void 0 : keys.label) !== null && _a !== void 0 ? _a : 'label'], value: element[(_b = keys === null || keys === void 0 ? void 0 : keys.value) !== null && _b !== void 0 ? _b : 'value'], checked: value === element[(_c = keys === null || keys === void 0 ? void 0 : keys.value) !== null && _c !== void 0 ? _c : 'value'] }));
|
||||
}
|
||||
});
|
||||
this.setData({
|
||||
radioOptions: optionsValue,
|
||||
});
|
||||
}
|
||||
catch (error) {
|
||||
console.error('error', error);
|
||||
}
|
||||
},
|
||||
};
|
||||
}
|
||||
};
|
||||
RadioGroup = __decorate([
|
||||
wxComponent()
|
||||
], RadioGroup);
|
||||
export default RadioGroup;
|
||||
@@ -1,6 +0,0 @@
|
||||
{
|
||||
"component": true,
|
||||
"usingComponents": {
|
||||
"t-radio": "../radio/radio"
|
||||
}
|
||||
}
|
||||
@@ -1,18 +0,0 @@
|
||||
<view style="{{ customStyle }}" class="{{classPrefix}} {{prefix}}-class" aria-role="radiogroup">
|
||||
<slot />
|
||||
<block wx:for="{{radioOptions}}" wx:key="value">
|
||||
<t-radio
|
||||
class="{{prefix}}-radio-option"
|
||||
label="{{item.label}}"
|
||||
value="{{item.value}}"
|
||||
checked="{{item.checked}}"
|
||||
data-index="{{index}}"
|
||||
data-value="{{item.value}}"
|
||||
disabled="{{item.disabled}}"
|
||||
align="{{align}}"
|
||||
icon="{{icon}}"
|
||||
borderless="{{borderless}}"
|
||||
bind:change="handleRadioChange"
|
||||
/>
|
||||
</block>
|
||||
</view>
|
||||
@@ -1,50 +0,0 @@
|
||||
import { RadioValue } from '../radio/type';
|
||||
import { KeysType } from '../common/common';
|
||||
export interface TdRadioGroupProps<T = RadioValue> {
|
||||
align?: {
|
||||
type: StringConstructor;
|
||||
value?: 'left' | 'right';
|
||||
};
|
||||
borderless?: {
|
||||
type: BooleanConstructor;
|
||||
value?: boolean;
|
||||
};
|
||||
customStyle?: {
|
||||
type: StringConstructor;
|
||||
value?: string;
|
||||
};
|
||||
disabled?: {
|
||||
type: BooleanConstructor;
|
||||
value?: boolean;
|
||||
};
|
||||
icon?: {
|
||||
type: null;
|
||||
value?: 'fill-circle' | 'stroke-line' | Array<string>;
|
||||
};
|
||||
keys?: {
|
||||
type: ObjectConstructor;
|
||||
value?: KeysType;
|
||||
};
|
||||
name?: {
|
||||
type: StringConstructor;
|
||||
value?: string;
|
||||
};
|
||||
options?: {
|
||||
type: ArrayConstructor;
|
||||
value?: Array<RadioOption>;
|
||||
};
|
||||
value?: {
|
||||
type: null;
|
||||
value?: T;
|
||||
};
|
||||
defaultValue?: {
|
||||
type: null;
|
||||
value?: T;
|
||||
};
|
||||
}
|
||||
export declare type RadioOption = string | number | RadioOptionObj;
|
||||
export interface RadioOptionObj {
|
||||
label?: string;
|
||||
value?: string | number;
|
||||
disabled?: boolean;
|
||||
}
|
||||
@@ -1 +0,0 @@
|
||||
export {};
|
||||
@@ -1,50 +0,0 @@
|
||||
:: BASE_DOC ::
|
||||
|
||||
## API
|
||||
### Radio Props
|
||||
|
||||
name | type | default | description | required
|
||||
-- | -- | -- | -- | --
|
||||
align | String | left | options：left/right | N
|
||||
allow-uncheck | Boolean | false | \- | N
|
||||
block | Boolean | true | \- | N
|
||||
checked | Boolean | false | \- | N
|
||||
default-checked | Boolean | undefined | uncontrolled property | N
|
||||
content | String / Slot | - | \- | N
|
||||
content-disabled | Boolean | false | \- | N
|
||||
custom-style `v0.25.0` | String | - | \- | N
|
||||
disabled | Boolean | undefined | \- | N
|
||||
external-classes | Array | - | `['t-class', 't-class-icon', 't-class-label', 't-class-content', 't-class-border']` | N
|
||||
icon | String / Array | 'circle' | Typescript：`'circle' \| 'line' \| Array<string>` | N
|
||||
label | String / Slot | - | \- | N
|
||||
max-content-row | Number | 5 | \- | N
|
||||
max-label-row | Number | 3 | \- | N
|
||||
name | String | - | \- | N
|
||||
value | String / Number / Boolean | false | Typescript：`T` | N
|
||||
|
||||
### Radio Events
|
||||
|
||||
name | params | description
|
||||
-- | -- | --
|
||||
change | `(checked: boolean)` | \-
|
||||
|
||||
### RadioGroup Props
|
||||
|
||||
name | type | default | description | required
|
||||
-- | -- | -- | -- | --
|
||||
align | String | left | options：left/right | N
|
||||
borderless | Boolean | false | \- | N
|
||||
custom-style `v0.25.0` | String | - | \- | N
|
||||
disabled | Boolean | undefined | \- | N
|
||||
icon | String / Array | 'circle' | Typescript：`'circle' | 'line' | Array<string>` | N
|
||||
keys | Object | - | Typescript：`KeysType` | N
|
||||
name | String | - | \- | N
|
||||
options | Array | - | Typescript：`Array<RadioOption>` `type RadioOption = string \| number \| RadioOptionObj` `interface RadioOptionObj { label?: string; value?: string \| number; disabled?: boolean }`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/radio-group/type.ts) | N
|
||||
value | String / Number / Boolean | - | Typescript：`T` | N
|
||||
default-value | String / Number / Boolean | undefined | uncontrolled property。Typescript：`T` | N
|
||||
|
||||
### RadioGroup Events
|
||||
|
||||
name | params | description
|
||||
-- | -- | --
|
||||
change | `(value: T)` | \-
|
||||
@@ -1,97 +0,0 @@
|
||||
---
|
||||
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"
|
||||
}
|
||||
```
|
||||
|
||||
## 代码演示
|
||||
|
||||
### 纵向单选框
|
||||
|
||||
{{ base }}
|
||||
|
||||
### 横向单选框
|
||||
|
||||
{{ horizontal }}
|
||||
|
||||
### 单选框状态
|
||||
|
||||
{{ status }}
|
||||
|
||||
### 勾选样式
|
||||
|
||||
{{ theme }}
|
||||
|
||||
### 勾选显示位置
|
||||
|
||||
{{ align }}
|
||||
|
||||
### 非通栏单选样式
|
||||
|
||||
{{ card }}
|
||||
|
||||
### 特殊样式
|
||||
|
||||
{{ special }}
|
||||
|
||||
## API
|
||||
### Radio Props
|
||||
|
||||
名称 | 类型 | 默认值 | 说明 | 必传
|
||||
-- | -- | -- | -- | --
|
||||
align | String | left | 复选框和内容相对位置。可选项：left/right | N
|
||||
allow-uncheck | Boolean | false | 【开发中】是否允许取消选中 | N
|
||||
block | Boolean | true | 是否为块级元素 | N
|
||||
checked | Boolean | false | 是否选中 | N
|
||||
default-checked | Boolean | undefined | 是否选中。非受控属性 | N
|
||||
content | String / Slot | - | 单选内容 | N
|
||||
content-disabled | Boolean | false | 是否禁用组件内容（content）触发选中 | N
|
||||
custom-style `v0.25.0` | String | - | 自定义组件样式 | N
|
||||
disabled | Boolean | undefined | 是否为禁用态 | N
|
||||
external-classes | Array | - | 组件类名，分别用于设置 组件外层、单选图标、主文案、内容 等元素类名。`['t-class', 't-class-icon', 't-class-label', 't-class-content', 't-class-border']` | N
|
||||
icon | String / Array | 'circle' | 自定义选中图标和非选中图标。使用 Array 时表示：`[选中态图标，非选中态图标]`。使用 String 时，值为 circle 表示填充型图标、值为 line 表示描边型图标、值为 dot 表示圆点图标。TS 类型：`'circle' | 'line' ｜ 'dot' | Array<string>` | N
|
||||
label | String / Slot | - | 主文案 | N
|
||||
max-content-row | Number | 5 | 内容最大行数限制 | N
|
||||
max-label-row | Number | 3 | 主文案最大行数限制 | N
|
||||
name | String | - | HTML 元素原生属性 | N
|
||||
value | String / Number / Boolean | false | 单选按钮的值。TS 类型：`RadioValue` `type RadioValue = string | number | boolean`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/radio/type.ts) | N
|
||||
|
||||
### Radio Events
|
||||
|
||||
名称 | 参数 | 描述
|
||||
-- | -- | --
|
||||
change | `(checked: boolean)` | 值变化时触发
|
||||
|
||||
### RadioGroup Props
|
||||
|
||||
名称 | 类型 | 默认值 | 说明 | 必传
|
||||
-- | -- | -- | -- | --
|
||||
align | String | null | 复选框和内容相对位置；仅在使用 options 时生效。可选项：left/right | N
|
||||
borderless | Boolean | false | 是否开启无边框模式 | N
|
||||
custom-style `v0.25.0` | String | - | 自定义组件样式 | N
|
||||
disabled | Boolean | undefined | 是否禁用全部子单选框 | N
|
||||
icon | String / Array | 'fill-circle' | 自定义选中图标和非选中图标。示例：[选中态图标，非选中态图标]。值为 fill-circle 表示图标为填充型图标，值为 stroke-line 表示图标为描边型图标；仅在使用 options 时生效。TS 类型：`'fill-circle' | 'stroke-line' | Array<string>` | N
|
||||
keys | Object | - | 用来定义 value / label 在 `options` 中对应的字段别名。TS 类型：`KeysType` | 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; disabled?: boolean }`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/radio-group/type.ts) | N
|
||||
value | String / Number / Boolean | false | 选中的值。TS 类型：`RadioValue` | N
|
||||
default-value | String / Number / Boolean | undefined | 选中的值。非受控属性。TS 类型：`RadioValue` | N
|
||||
|
||||
### RadioGroup Events
|
||||
|
||||
名称 | 参数 | 描述
|
||||
-- | -- | --
|
||||
change | `(value: RadioValue)` | 选中值发生变化时触发
|
||||
@@ -1,3 +0,0 @@
|
||||
import { TdRadioProps } from './type';
|
||||
declare const props: TdRadioProps;
|
||||
export default props;
|
||||
@@ -1,64 +0,0 @@
|
||||
const props = {
|
||||
align: {
|
||||
type: String,
|
||||
value: 'left',
|
||||
},
|
||||
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,
|
||||
},
|
||||
customStyle: {
|
||||
type: String,
|
||||
value: '',
|
||||
},
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
value: undefined,
|
||||
},
|
||||
externalClasses: {
|
||||
type: Array,
|
||||
},
|
||||
icon: {
|
||||
type: null,
|
||||
value: 'circle',
|
||||
},
|
||||
label: {
|
||||
type: String,
|
||||
},
|
||||
maxContentRow: {
|
||||
type: Number,
|
||||
value: 5,
|
||||
},
|
||||
maxLabelRow: {
|
||||
type: Number,
|
||||
value: 3,
|
||||
},
|
||||
name: {
|
||||
type: String,
|
||||
value: '',
|
||||
},
|
||||
value: {
|
||||
type: null,
|
||||
value: false,
|
||||
},
|
||||
};
|
||||
export default props;
|
||||
@@ -1,101 +0,0 @@
|
||||
import { SuperComponent, RelationsOptions } from '../common/src/index';
|
||||
export default class Radio extends SuperComponent {
|
||||
externalClasses: string[];
|
||||
behaviors: string[];
|
||||
parent: any;
|
||||
relations: RelationsOptions;
|
||||
options: {
|
||||
multipleSlots: boolean;
|
||||
};
|
||||
lifetimes: {
|
||||
attached(): void;
|
||||
};
|
||||
properties: {
|
||||
borderless: {
|
||||
type: BooleanConstructor;
|
||||
value: boolean;
|
||||
};
|
||||
align?: {
|
||||
type: StringConstructor;
|
||||
value?: "left" | "right";
|
||||
};
|
||||
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;
|
||||
};
|
||||
customStyle?: {
|
||||
type: StringConstructor;
|
||||
value?: string;
|
||||
};
|
||||
disabled?: {
|
||||
type: BooleanConstructor;
|
||||
value?: boolean;
|
||||
};
|
||||
externalClasses?: {
|
||||
type: ArrayConstructor;
|
||||
value?: ["t-class", "t-class-icon", "t-class-label", "t-class-content", "t-class-border"];
|
||||
};
|
||||
icon?: {
|
||||
type: null;
|
||||
value?: string[] | "circle" | "line";
|
||||
};
|
||||
label?: {
|
||||
type: StringConstructor;
|
||||
value?: string;
|
||||
};
|
||||
maxContentRow?: {
|
||||
type: NumberConstructor;
|
||||
value?: number;
|
||||
};
|
||||
maxLabelRow?: {
|
||||
type: NumberConstructor;
|
||||
value?: number;
|
||||
};
|
||||
name?: {
|
||||
type: StringConstructor;
|
||||
value?: string;
|
||||
};
|
||||
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[];
|
||||
};
|
||||
methods: {
|
||||
handleTap(e: any): void;
|
||||
doChange(): void;
|
||||
initStatus(): void;
|
||||
setDisabled(disabled: Boolean): void;
|
||||
};
|
||||
}
|
||||
@@ -1,107 +0,0 @@
|
||||
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`;
|
||||
const iconDefault = {
|
||||
'fill-circle': ['check-circle-filled', 'circle'],
|
||||
'stroke-line': ['check', ''],
|
||||
};
|
||||
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.parent = null;
|
||||
this.relations = {
|
||||
'../radio-group/radio-group': {
|
||||
type: 'ancestor',
|
||||
linked(parent) {
|
||||
this.parent = parent;
|
||||
if (parent.data.align) {
|
||||
this.setData({ align: parent.data.align });
|
||||
}
|
||||
if (parent.data.borderless) {
|
||||
this.setData({ borderless: true });
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
this.options = {
|
||||
multipleSlots: true,
|
||||
};
|
||||
this.lifetimes = {
|
||||
attached() {
|
||||
this.initStatus();
|
||||
},
|
||||
};
|
||||
this.properties = Object.assign(Object.assign({}, Props), { borderless: {
|
||||
type: Boolean,
|
||||
value: false,
|
||||
} });
|
||||
this.controlledProps = [
|
||||
{
|
||||
key: 'checked',
|
||||
event: 'change',
|
||||
},
|
||||
];
|
||||
this.data = {
|
||||
prefix,
|
||||
classPrefix: name,
|
||||
customIcon: false,
|
||||
slotIcon: false,
|
||||
optionLinked: false,
|
||||
iconVal: [],
|
||||
};
|
||||
this.methods = {
|
||||
handleTap(e) {
|
||||
if (this.data.disabled)
|
||||
return;
|
||||
const { target } = e.currentTarget.dataset;
|
||||
if (target === 'text' && this.data.contentDisabled)
|
||||
return;
|
||||
this.doChange();
|
||||
},
|
||||
doChange() {
|
||||
const { value, checked } = this.data;
|
||||
if (this.$parent) {
|
||||
this.$parent.updateValue(value);
|
||||
}
|
||||
else {
|
||||
this._trigger('change', { checked: !checked });
|
||||
}
|
||||
},
|
||||
initStatus() {
|
||||
var _a;
|
||||
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 ? iconDefault[icon] : this.data.icon,
|
||||
});
|
||||
},
|
||||
setDisabled(disabled) {
|
||||
this.setData({
|
||||
disabled: this.data.disabled || disabled,
|
||||
});
|
||||
},
|
||||
};
|
||||
}
|
||||
};
|
||||
Radio = __decorate([
|
||||
wxComponent()
|
||||
], Radio);
|
||||
export default Radio;
|
||||
@@ -1,7 +0,0 @@
|
||||
{
|
||||
"component": true,
|
||||
"usingComponents": {
|
||||
"t-cell": "../cell/cell",
|
||||
"t-icon": "../icon/icon"
|
||||
}
|
||||
}
|
||||
@@ -1,57 +0,0 @@
|
||||
<wxs src="../common/utils.wxs" module="_" />
|
||||
|
||||
<view
|
||||
style="{{ customStyle }}"
|
||||
class="{{_.cls(classPrefix, [align, ['block', block]])}} {{prefix}}-class"
|
||||
disabled="{{disabled}}"
|
||||
aria-role="radio"
|
||||
aria-checked="{{checked}}"
|
||||
aria-label="{{label + content}}"
|
||||
aria-disabled="{{disabled}}"
|
||||
tabindex="{{tabindex}}"
|
||||
bind:tap="handleTap"
|
||||
>
|
||||
<view
|
||||
class="{{_.cls(classPrefix + '__icon', [align, ['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]])}}"
|
||||
></view>
|
||||
<!-- line && unchecked 为空 需要展位元素 -->
|
||||
<view wx:if="{{!checked && icon == 'line'}}" class="placeholder"></view>
|
||||
</block>
|
||||
</view>
|
||||
|
||||
<view class="{{classPrefix}}__content" data-target="text" catch:tap="handleTap">
|
||||
<view
|
||||
class="{{classPrefix}}__title {{disabled ? classPrefix + '__title--disabled' : ''}} {{prefix}}-class-label"
|
||||
style="-webkit-line-clamp:{{maxLabelRow}}"
|
||||
>
|
||||
{{label}}
|
||||
<slot />
|
||||
</view>
|
||||
|
||||
<view
|
||||
class="{{classPrefix}}__description {{disabled ? classPrefix + '__description--disabled' : ''}} {{prefix}}-class-content "
|
||||
style="-webkit-line-clamp:{{maxContentRow}}"
|
||||
>{{content}}</view
|
||||
>
|
||||
</view>
|
||||
|
||||
<view wx:if="{{!borderless}}" class="{{_.cls(classPrefix + '__border', [align])}} {{prefix}}-class-border" />
|
||||
</view>
|
||||
@@ -1,193 +0,0 @@
|
||||
.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 {
|
||||
display: inline-flex;
|
||||
vertical-align: middle;
|
||||
font-size: var(--td-radio-font-size, 32rpx);
|
||||
background: var(--td-radio-bg-color, var(--td-bg-color-block, #fff));
|
||||
position: relative;
|
||||
}
|
||||
.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;
|
||||
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-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-primary-color, #0052d9));
|
||||
}
|
||||
.t-radio__icon--disabled {
|
||||
cursor: not-allowed;
|
||||
color: var(--td-radio-icon-disabled-color, var(--td-primary-color-3, #bbd3fb));
|
||||
}
|
||||
.t-radio__icon-circle {
|
||||
width: 84rpx;
|
||||
height: 84rpx;
|
||||
border: 3px solid var(--td-radio-icon-color, 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-radio__icon-circle--disabled {
|
||||
background: var(--td-radio-icon-disabled-bg-color, 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-primary-color, #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-primary-color-3, #bbd3fb));
|
||||
}
|
||||
.t-radio__icon-dot {
|
||||
width: 84rpx;
|
||||
height: 84rpx;
|
||||
border: 3px solid var(--td-radio-icon-checked-color, var(--td-primary-color, #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: 48rpx;
|
||||
height: 48rpx;
|
||||
background: var(--td-radio-icon-checked-color, var(--td-primary-color, #0052d9));
|
||||
border-radius: 50%;
|
||||
}
|
||||
.t-radio__icon-dot--disabled {
|
||||
border-color: var(--td-radio-icon-disabled-color, var(--td-primary-color-3, #bbd3fb));
|
||||
}
|
||||
.t-radio__icon-dot--disabled::after {
|
||||
background: var(--td-radio-icon-disabled-color, var(--td-primary-color-3, #bbd3fb));
|
||||
}
|
||||
.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-font-gray-1, rgba(0, 0, 0, 0.9)));
|
||||
line-height: var(--td-radio-label-line-height, 48rpx);
|
||||
}
|
||||
.t-radio__title--disabled {
|
||||
cursor: not-allowed;
|
||||
color: var(--td-radio-label-disabled-color, 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-font-gray-2, rgba(0, 0, 0, 0.6)));
|
||||
font-size: 28rpx;
|
||||
line-height: var(--td-radio-content-line-height, 44rpx);
|
||||
}
|
||||
.t-radio__description--disabled {
|
||||
cursor: not-allowed;
|
||||
color: var(--td-radio-content-disabled-color, 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-gray-color-3, #e7e7e7));
|
||||
left: 96rpx;
|
||||
right: 0;
|
||||
transform: scaleY(0.5);
|
||||
}
|
||||
.t-radio__border--right {
|
||||
left: 32rpx;
|
||||
}
|
||||
@@ -1,67 +0,0 @@
|
||||
export interface TdRadioProps<T = RadioValue> {
|
||||
align?: {
|
||||
type: StringConstructor;
|
||||
value?: 'left' | 'right';
|
||||
};
|
||||
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;
|
||||
};
|
||||
customStyle?: {
|
||||
type: StringConstructor;
|
||||
value?: string;
|
||||
};
|
||||
disabled?: {
|
||||
type: BooleanConstructor;
|
||||
value?: boolean;
|
||||
};
|
||||
externalClasses?: {
|
||||
type: ArrayConstructor;
|
||||
value?: ['t-class', 't-class-icon', 't-class-label', 't-class-content', 't-class-border'];
|
||||
};
|
||||
icon?: {
|
||||
type: null;
|
||||
value?: 'circle' | 'line' | Array<string>;
|
||||
};
|
||||
label?: {
|
||||
type: StringConstructor;
|
||||
value?: string;
|
||||
};
|
||||
maxContentRow?: {
|
||||
type: NumberConstructor;
|
||||
value?: number;
|
||||
};
|
||||
maxLabelRow?: {
|
||||
type: NumberConstructor;
|
||||
value?: number;
|
||||
};
|
||||
name?: {
|
||||
type: StringConstructor;
|
||||
value?: string;
|
||||
};
|
||||
value?: {
|
||||
type: null;
|
||||
value?: T;
|
||||
};
|
||||
}
|
||||
export declare type RadioValue = string | number | boolean;
|
||||
@@ -1 +0,0 @@
|
||||
export {};
|
||||
@@ -1,3 +0,0 @@
|
||||
import { TdSideBarItemProps } from './type';
|
||||
declare const props: TdSideBarItemProps;
|
||||
export default props;
|
||||
@@ -1,17 +0,0 @@
|
||||
const props = {
|
||||
badgeProps: {
|
||||
type: Object,
|
||||
},
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
value: false,
|
||||
},
|
||||
label: {
|
||||
type: String,
|
||||
value: '',
|
||||
},
|
||||
value: {
|
||||
type: null,
|
||||
},
|
||||
};
|
||||
export default props;
|
||||
@@ -1,18 +0,0 @@
|
||||
import { SuperComponent, RelationsOptions } from '../common/src/index';
|
||||
export default class SideBarItem extends SuperComponent {
|
||||
externalClasses: string[];
|
||||
properties: import("./type").TdSideBarItemProps;
|
||||
relations: RelationsOptions;
|
||||
observers: {};
|
||||
data: {
|
||||
classPrefix: string;
|
||||
prefix: string;
|
||||
active: boolean;
|
||||
isPre: boolean;
|
||||
isNext: boolean;
|
||||
};
|
||||
methods: {
|
||||
updateActive(value: any): void;
|
||||
handleClick(): void;
|
||||
};
|
||||
}
|
||||
@@ -1,54 +0,0 @@
|
||||
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}-side-bar-item`;
|
||||
let SideBarItem = class SideBarItem extends SuperComponent {
|
||||
constructor() {
|
||||
super(...arguments);
|
||||
this.externalClasses = [`${prefix}-class`];
|
||||
this.properties = props;
|
||||
this.relations = {
|
||||
'../side-bar/side-bar': {
|
||||
type: 'parent',
|
||||
linked(parent) {
|
||||
this.parent = parent;
|
||||
this.updateActive(parent.data.value);
|
||||
},
|
||||
},
|
||||
};
|
||||
this.observers = {};
|
||||
this.data = {
|
||||
classPrefix: name,
|
||||
prefix,
|
||||
active: false,
|
||||
isPre: false,
|
||||
isNext: false,
|
||||
};
|
||||
this.methods = {
|
||||
updateActive(value) {
|
||||
const active = value === this.data.value;
|
||||
this.setData({
|
||||
active,
|
||||
});
|
||||
},
|
||||
handleClick() {
|
||||
var _a;
|
||||
if (this.data.disabled)
|
||||
return;
|
||||
const { value, label } = this.data;
|
||||
(_a = this.parent) === null || _a === void 0 ? void 0 : _a.doChange({ value, label });
|
||||
},
|
||||
};
|
||||
}
|
||||
};
|
||||
SideBarItem = __decorate([
|
||||
wxComponent()
|
||||
], SideBarItem);
|
||||
export default SideBarItem;
|
||||
@@ -1,6 +0,0 @@
|
||||
{
|
||||
"component": true,
|
||||
"usingComponents": {
|
||||
"t-badge": "../badge/badge"
|
||||
}
|
||||
}
|
||||
@@ -1,20 +0,0 @@
|
||||
<import src="../common/template/badge" />
|
||||
<wxs src="../common/utils.wxs" module="_" />
|
||||
|
||||
<view
|
||||
class="{{_.cls(classPrefix, [['active', active], ['disabled', disabled]])}} {{prefix}}-class"
|
||||
bind:tap="handleClick"
|
||||
aria-role="button"
|
||||
aria-label="{{ active ? '已选中' + label : label}}"
|
||||
aria-disabled="{{disabled}}"
|
||||
>
|
||||
<block wx:if="{{active}}">
|
||||
<view class="{{classPrefix}}__line"></view>
|
||||
<view class="{{classPrefix}}__prefix"></view>
|
||||
<view class="{{classPrefix}}__suffix"></view>
|
||||
</block>
|
||||
<block wx:if="{{badgeProps}}">
|
||||
<template is="badge" data="{{ ...badgeProps, content: label }}" />
|
||||
</block>
|
||||
<block wx:else>{{label}}</block>
|
||||
</view>
|
||||
@@ -1,85 +0,0 @@
|
||||
.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-side-bar-item {
|
||||
position: relative;
|
||||
padding: 32rpx;
|
||||
font-size: var(--td-side-bar-font-size, 32rpx);
|
||||
color: var(--td-side-bar-color, var(--td-font-gray-1, rgba(0, 0, 0, 0.9)));
|
||||
background: var(--td-side-bar-bg-color, var(--td-gray-color-1, #f3f3f3));
|
||||
min-height: var(--td-side-bar-item-height, 112rpx);
|
||||
box-sizing: border-box;
|
||||
white-space: wrap;
|
||||
line-height: var(--td-side-bar-item-line-height, 48rpx);
|
||||
}
|
||||
.t-side-bar-item--active {
|
||||
font-weight: 600;
|
||||
background: var(--td-bg-color-block, #fff);
|
||||
color: var(--td-side-bar-active-color, var(--td-primary-color, #0052d9));
|
||||
}
|
||||
.t-side-bar-item__prefix,
|
||||
.t-side-bar-item__suffix {
|
||||
z-index: 1;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
width: calc(var(--td-side-bar-border-radius, 18rpx) * 2);
|
||||
height: calc(var(--td-side-bar-border-radius, 18rpx) * 2);
|
||||
background: #fff;
|
||||
}
|
||||
.t-side-bar-item__prefix::after,
|
||||
.t-side-bar-item__suffix::after {
|
||||
content: '';
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: var(--td-side-bar-bg-color, var(--td-gray-color-1, #f3f3f3));
|
||||
}
|
||||
.t-side-bar-item__prefix {
|
||||
top: calc(var(--td-side-bar-border-radius, 18rpx) * -2);
|
||||
}
|
||||
.t-side-bar-item__prefix::after {
|
||||
border-bottom-right-radius: var(--td-side-bar-border-radius, 18rpx);
|
||||
}
|
||||
.t-side-bar-item__suffix {
|
||||
bottom: calc(var(--td-side-bar-border-radius, 18rpx) * -2);
|
||||
}
|
||||
.t-side-bar-item__suffix::after {
|
||||
border-top-right-radius: var(--td-side-bar-border-radius, 18rpx);
|
||||
}
|
||||
.t-side-bar-item--disabled {
|
||||
color: var(--td-side-bar-disabled-color, var(--td-font-gray-4, rgba(0, 0, 0, 0.26)));
|
||||
}
|
||||
.t-side-bar-item__line {
|
||||
width: 6rpx;
|
||||
height: 28rpx;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
background: var(--td-side-bar-active-color, var(--td-primary-color, #0052d9));
|
||||
border-radius: 8rpx;
|
||||
}
|
||||
@@ -1,18 +0,0 @@
|
||||
export interface TdSideBarItemProps {
|
||||
badgeProps?: {
|
||||
type: ObjectConstructor;
|
||||
value?: object;
|
||||
};
|
||||
disabled?: {
|
||||
type: BooleanConstructor;
|
||||
value?: boolean;
|
||||
};
|
||||
label?: {
|
||||
type: StringConstructor;
|
||||
value?: string;
|
||||
};
|
||||
value?: {
|
||||
type: null;
|
||||
value?: string | number;
|
||||
};
|
||||
}
|
||||
@@ -1 +0,0 @@
|
||||
export {};
|
||||
@@ -1,25 +0,0 @@
|
||||
:: BASE_DOC ::
|
||||
|
||||
## API
|
||||
### SideBar Props
|
||||
|
||||
name | type | default | description | required
|
||||
-- | -- | -- | -- | --
|
||||
value | String / Number | - | \- | N
|
||||
default-value | String / Number | undefined | uncontrolled property | N
|
||||
|
||||
### SideBar Events
|
||||
|
||||
name | params | description
|
||||
-- | -- | --
|
||||
change | `(value: number \| string, label: string)` | \-
|
||||
click | `(value: number \| string, label: string)` | \-
|
||||
|
||||
### SideBarItem Props
|
||||
|
||||
name | type | default | description | required
|
||||
-- | -- | -- | -- | --
|
||||
badge-props | Object | - | \- | N
|
||||
disabled | Boolean | false | \- | N
|
||||
label | String | - | \- | N
|
||||
value | String / Number | - | \- | N
|
||||
@@ -1,60 +0,0 @@
|
||||
---
|
||||
title: SideBar 侧边导航
|
||||
description: 用于内容分类后的展示切换。
|
||||
spline: navigation
|
||||
isComponent: true
|
||||
---
|
||||
|
||||
<div style="background: #ecf2fe; display: flex; align-items: center; line-height: 20px; padding: 14px 24px; border-radius: 3px; color: #555a65">
|
||||
<svg fill="none" viewBox="0 0 16 16" width="16px" height="16px" style="margin-right: 5px">
|
||||
<path fill="#0052d9" d="M8 15A7 7 0 108 1a7 7 0 000 14zM7.4 4h1.2v1.2H7.4V4zm.1 2.5h1V12h-1V6.5z" fillOpacity="0.9"></path>
|
||||
</svg>
|
||||
该组件于 0.25.0 版本上线，请留意版本。
|
||||
</div>
|
||||
|
||||
## 引入
|
||||
|
||||
全局引入，在 miniprogram 根目录下的`app.json`中配置，局部引入，在需要引入的页面或组件的`index.json`中配置。
|
||||
|
||||
```json
|
||||
{
|
||||
"usingComponents": {
|
||||
"t-side-bar": "tdesign-miniprogram/side-bar/side-bar",
|
||||
"t-side-bar-item": "tdesign-miniprogram/side-bar-item/side-bar-item",
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## 代码演示
|
||||
|
||||
### 锚点用法
|
||||
|
||||
{{ base }}
|
||||
|
||||
### 切页用法
|
||||
|
||||
{{ switch }}
|
||||
|
||||
## API
|
||||
### SideBar Props
|
||||
|
||||
名称 | 类型 | 默认值 | 说明 | 必传
|
||||
-- | -- | -- | -- | --
|
||||
value | String / Number | - | 选项值 | N
|
||||
default-value | String / Number | undefined | 选项值。非受控属性 | N
|
||||
|
||||
### SideBar Events
|
||||
|
||||
名称 | 参数 | 描述
|
||||
-- | -- | --
|
||||
change | `(value: number \| string, label: string)` | 选项值发生变化时触发
|
||||
click | `(value: number \| string, label: string)` | 点击选项时触发
|
||||
|
||||
### SideBarItem Props
|
||||
|
||||
名称 | 类型 | 默认值 | 说明 | 必传
|
||||
-- | -- | -- | -- | --
|
||||
badge-props | Object | - | 透传至 Badge 组件 | N
|
||||
disabled | Boolean | false | 是否禁用 | N
|
||||
label | String | - | 展示的标签 | N
|
||||
value | String / Number | - | 当前选项的值 | N
|
||||
@@ -1,3 +0,0 @@
|
||||
import { TdSideBarProps } from './type';
|
||||
declare const props: TdSideBarProps;
|
||||
export default props;
|
||||
@@ -1,10 +0,0 @@
|
||||
const props = {
|
||||
value: {
|
||||
type: null,
|
||||
value: null,
|
||||
},
|
||||
defaultValue: {
|
||||
type: null,
|
||||
},
|
||||
};
|
||||
export default props;
|
||||
@@ -1,24 +0,0 @@
|
||||
import { SuperComponent, RelationsOptions } from '../common/src/index';
|
||||
export default class SideBar extends SuperComponent {
|
||||
externalClasses: string[];
|
||||
childs: any[];
|
||||
relations: RelationsOptions;
|
||||
controlledProps: {
|
||||
key: string;
|
||||
event: string;
|
||||
}[];
|
||||
properties: import("./type").TdSideBarProps;
|
||||
observers: {
|
||||
value(v: any): void;
|
||||
};
|
||||
data: {
|
||||
classPrefix: string;
|
||||
prefix: string;
|
||||
};
|
||||
methods: {
|
||||
doChange({ value, label }: {
|
||||
value: any;
|
||||
label: any;
|
||||
}): void;
|
||||
};
|
||||
}
|
||||
@@ -1,58 +0,0 @@
|
||||
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}-side-bar`;
|
||||
const relationsPath = '../side-bar-item/side-bar-item';
|
||||
let SideBar = class SideBar extends SuperComponent {
|
||||
constructor() {
|
||||
super(...arguments);
|
||||
this.externalClasses = [`${prefix}-class`];
|
||||
this.childs = [];
|
||||
this.relations = {
|
||||
[relationsPath]: {
|
||||
type: 'child',
|
||||
linked(child) {
|
||||
this.childs.push(child);
|
||||
},
|
||||
unlinked(child) {
|
||||
const index = this.childs.findIndex((item) => item === child);
|
||||
this.childs.splice(index, 1);
|
||||
},
|
||||
},
|
||||
};
|
||||
this.controlledProps = [
|
||||
{
|
||||
key: 'value',
|
||||
event: 'change',
|
||||
},
|
||||
];
|
||||
this.properties = props;
|
||||
this.observers = {
|
||||
value(v) {
|
||||
this.$children.forEach((item) => {
|
||||
item.updateActive(v);
|
||||
});
|
||||
},
|
||||
};
|
||||
this.data = {
|
||||
classPrefix: name,
|
||||
prefix,
|
||||
};
|
||||
this.methods = {
|
||||
doChange({ value, label }) {
|
||||
this._trigger('change', { value, label });
|
||||
},
|
||||
};
|
||||
}
|
||||
};
|
||||
SideBar = __decorate([
|
||||
wxComponent()
|
||||
], SideBar);
|
||||
export default SideBar;
|
||||
@@ -1,6 +0,0 @@
|
||||
{
|
||||
"component": true,
|
||||
"usingComponents": {
|
||||
"t-side-bar-item": "../side-bar-item/side-bar-item"
|
||||
}
|
||||
}
|
||||
@@ -1,4 +0,0 @@
|
||||
<view class="{{classPrefix}} {{prefix}}-class">
|
||||
<slot />
|
||||
<view class="{{classPrefix}}__padding"></view>
|
||||
</view>
|
||||
@@ -1,38 +0,0 @@
|
||||
.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-side-bar {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: var(--td-side-bar-width, 206rpx);
|
||||
height: var(--td-side-bar-height, 100%);
|
||||
overflow-y: auto;
|
||||
}
|
||||
.t-side-bar__padding {
|
||||
flex: 1;
|
||||
background-color: var(--td-side-bar-bg-color, var(--td-gray-color-1, #f3f3f3));
|
||||
}
|
||||
@@ -1,10 +0,0 @@
|
||||
export interface TdSideBarProps {
|
||||
value?: {
|
||||
type: null;
|
||||
value?: string | number;
|
||||
};
|
||||
defaultValue?: {
|
||||
type: null;
|
||||
value?: string | number;
|
||||
};
|
||||
}
|
||||
@@ -1 +0,0 @@
|
||||
export {};
|
||||
@@ -1,19 +0,0 @@
|
||||
:: BASE_DOC ::
|
||||
|
||||
## API
|
||||
|
||||
### SwipeCell Props
|
||||
|
||||
name | type | default | description | required
|
||||
-- | -- | -- | -- | --
|
||||
custom-style | String | - | \- | N
|
||||
disabled | Boolean | - | \- | N
|
||||
opened | Boolean / Array | false | \- | N
|
||||
left | Array / Slot | - | Typescript：`Array<SwipeActionItem>` | N
|
||||
right | Array / Slot | - | Typescript：`Array<SwipeActionItem>` `interface SwipeActionItem {text?: string; icon?: string | object; className?: string; style?: string; onClick?: () => void; [key: string]: any }`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/swipe-cell/type.ts) | N
|
||||
|
||||
### SwipeCell Events
|
||||
|
||||
name | params | description
|
||||
-- | -- | --
|
||||
click | `(action: SwipeActionItem, source: SwipeSource)` | [see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/swipe-cell/type.ts)。<br/>`type SwipeSource = 'left' \| 'right'`<br/>
|
||||
@@ -1,52 +0,0 @@
|
||||
---
|
||||
title: SwipeCell 滑动操作
|
||||
description: 用于承载列表中的更多操作，通过左右滑动来展示，按钮的宽度固定高度根据列表高度而变化。
|
||||
spline: message
|
||||
isComponent: true
|
||||
---
|
||||
|
||||
<span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20lines-95%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20functions-83%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20statements-92%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-swipe-cell": "tdesign-miniprogram/swipe-cell/swipe-cell"
|
||||
}
|
||||
```
|
||||
|
||||
### 组件类型
|
||||
|
||||
左滑单操作
|
||||
|
||||
{{ left }}
|
||||
|
||||
右滑单操作
|
||||
|
||||
{{ right }}
|
||||
|
||||
左右滑操作
|
||||
|
||||
{{ double }}
|
||||
|
||||
带图标的滑动操作
|
||||
|
||||
{{ icon }}
|
||||
|
||||
## API
|
||||
### SwipeCell Props
|
||||
|
||||
名称 | 类型 | 默认值 | 说明 | 必传
|
||||
-- | -- | -- | -- | --
|
||||
custom-style | String | - | 自定义组件样式 | N
|
||||
disabled | Boolean | - | 是否禁用滑动 | N
|
||||
opened | Boolean / Array | false | 操作项是否呈现为打开态，值为数组时表示分别控制左右滑动的展开和收起状态。TS 类型：`boolean| Array<boolean>` | N |
|
||||
left | Array / Slot | - | 左侧滑动操作项。所有行为同 `right`。TS 类型：`Array<SwipeActionItem>` | N
|
||||
right | Array / Slot | - | 右侧滑动操作项。有两种定义方式，一种是使用数组，二种是使用插槽。`right.text` 表示操作文本，`right.className` 表示操作项类名，`right.style` 表示操作项样式，`right.onClick` 表示点击操作项后执行的回调函数。示例：`[{ text: '删除', icon: 'delete', style: 'background-color: red', onClick: () => {} }]`。TS 类型：`Array<SwipeActionItem>` `interface SwipeActionItem {text?: string; icon?: string | object, className?: string; style?: string; onClick?: () => void; [key: string]: any }`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/swipe-cell/type.ts) | N
|
||||
|
||||
### SwipeCell Events
|
||||
|
||||
名称 | 参数 | 描述
|
||||
-- | -- | --
|
||||
click | `(action: SwipeActionItem, source: SwipeSource)` | 操作项点击时触发（插槽写法组件不触发，业务侧自定义内容和事件）。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/swipe-cell/type.ts)。<br/>`type SwipeSource = 'left' \| 'right'`<br/>
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user