1.22 分包

This commit is contained in:
zoujiandong
2024-01-22 08:56:07 +08:00
parent 2bd2fd31ac
commit 48a8c3ebab
237 changed files with 453 additions and 8541 deletions
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
-1
View File
@@ -1 +0,0 @@
export {};
@@ -1,31 +0,0 @@
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var component_1 = require("../common/component");
(0, component_1.VantComponent)({
props: {
show: Boolean,
mask: Boolean,
message: String,
forbidClick: Boolean,
zIndex: {
type: Number,
value: 1000,
},
type: {
type: String,
value: 'text',
},
loadingType: {
type: String,
value: 'circular',
},
position: {
type: String,
value: 'middle',
},
},
methods: {
// for prevent touchmove
noop: function () { },
},
});
@@ -1,9 +0,0 @@
{
"component": true,
"usingComponents": {
"van-icon": "../icon/index",
"van-loading": "../loading/index",
"van-overlay": "../overlay/index",
"van-transition": "../transition/index"
}
}
@@ -1,36 +0,0 @@
<van-overlay
wx:if="{{ mask || forbidClick }}"
show="{{ show }}"
z-index="{{ zIndex }}"
custom-style="{{ mask ? '' : 'background-color: transparent;' }}"
/>
<van-transition
show="{{ show }}"
custom-style="z-index: {{ zIndex }}"
custom-class="van-toast__container"
>
<view
class="van-toast van-toast--{{ (type === 'text' || type === 'html') ? 'text' : 'icon' }} van-toast--{{ position }}"
catch:touchmove="noop"
>
<!-- text only -->
<text wx:if="{{ type === 'text' }}">{{ message }}</text>
<!-- html only -->
<rich-text wx:elif="{{ type === 'html' }}" nodes="{{ message }}"></rich-text>
<!-- with icon -->
<block wx:else>
<van-loading
wx:if="{{ type === 'loading' }}"
color="white"
type="{{ loadingType }}"
custom-class="van-toast__loading"
/>
<van-icon wx:else class="van-toast__icon" name="{{ type }}" />
<text wx:if="{{ message }}" class="van-toast__text">{{ message }}</text>
</block>
<slot />
</view>
</van-transition>
@@ -1 +0,0 @@
@import '../common/index.wxss';.van-toast{word-wrap:break-word;align-items:center;background-color:var(--toast-background-color,rgba(0,0,0,.7));border-radius:var(--toast-border-radius,8px);box-sizing:initial;color:var(--toast-text-color,#fff);display:flex;flex-direction:column;font-size:var(--toast-font-size,14px);justify-content:center;line-height:var(--toast-line-height,20px);white-space:pre-wrap}.van-toast__container{left:50%;max-width:var(--toast-max-width,70%);position:fixed;top:50%;transform:translate(-50%,-50%);width:-webkit-fit-content;width:fit-content}.van-toast--text{min-width:var(--toast-text-min-width,96px);padding:var(--toast-text-padding,8px 12px)}.van-toast--icon{min-height:var(--toast-default-min-height,88px);padding:var(--toast-default-padding,16px);width:var(--toast-default-width,88px)}.van-toast--icon .van-toast__icon{font-size:var(--toast-icon-size,36px)}.van-toast--icon .van-toast__text{padding-top:8px}.van-toast__loading{margin:10px 0}.van-toast--top{transform:translateY(-30vh)}.van-toast--bottom{transform:translateY(30vh)}
-28
View File
@@ -1,28 +0,0 @@
/// <reference types="miniprogram-api-typings" />
/// <reference types="miniprogram-api-typings" />
declare type ToastMessage = string | number;
declare type ToastContext = WechatMiniprogram.Component.TrivialInstance | WechatMiniprogram.Page.TrivialInstance;
interface ToastOptions {
show?: boolean;
type?: string;
mask?: boolean;
zIndex?: number;
context?: (() => ToastContext) | ToastContext;
position?: string;
duration?: number;
selector?: string;
forbidClick?: boolean;
loadingType?: string;
message?: ToastMessage;
onClose?: () => void;
}
declare function Toast(toastOptions: ToastOptions | ToastMessage): WechatMiniprogram.Component.TrivialInstance | undefined;
declare namespace Toast {
var loading: (options: ToastMessage | ToastOptions) => WechatMiniprogram.Component.TrivialInstance | undefined;
var success: (options: ToastMessage | ToastOptions) => WechatMiniprogram.Component.TrivialInstance | undefined;
var fail: (options: ToastMessage | ToastOptions) => WechatMiniprogram.Component.TrivialInstance | undefined;
var clear: () => void;
var setDefaultOptions: (options: ToastOptions) => void;
var resetDefaultOptions: () => void;
}
export default Toast;
@@ -1,83 +0,0 @@
"use strict";
var __assign = (this && this.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
Object.defineProperty(exports, "__esModule", { value: true });
var validator_1 = require("../common/validator");
var defaultOptions = {
type: 'text',
mask: false,
message: '',
show: true,
zIndex: 1000,
duration: 2000,
position: 'middle',
forbidClick: false,
loadingType: 'circular',
selector: '#van-toast',
};
var queue = [];
var currentOptions = __assign({}, defaultOptions);
function parseOptions(message) {
return (0, validator_1.isObj)(message) ? message : { message: message };
}
function getContext() {
var pages = getCurrentPages();
return pages[pages.length - 1];
}
function Toast(toastOptions) {
var options = __assign(__assign({}, currentOptions), parseOptions(toastOptions));
var context = (typeof options.context === 'function'
? options.context()
: options.context) || getContext();
var toast = context.selectComponent(options.selector);
if (!toast) {
console.warn('未找到 van-toast 节点,请确认 selector 及 context 是否正确');
return;
}
delete options.context;
delete options.selector;
toast.clear = function () {
toast.setData({ show: false });
if (options.onClose) {
options.onClose();
}
};
queue.push(toast);
toast.setData(options);
clearTimeout(toast.timer);
if (options.duration != null && options.duration > 0) {
toast.timer = setTimeout(function () {
toast.clear();
queue = queue.filter(function (item) { return item !== toast; });
}, options.duration);
}
return toast;
}
var createMethod = function (type) { return function (options) {
return Toast(__assign({ type: type }, parseOptions(options)));
}; };
Toast.loading = createMethod('loading');
Toast.success = createMethod('success');
Toast.fail = createMethod('fail');
Toast.clear = function () {
queue.forEach(function (toast) {
toast.clear();
});
queue = [];
};
Toast.setDefaultOptions = function (options) {
Object.assign(currentOptions, options);
};
Toast.resetDefaultOptions = function () {
currentOptions = __assign({}, defaultOptions);
};
exports.default = Toast;
@@ -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 | optionsleft/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;
-74
View File
@@ -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 | optionsleft/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 | optionsinfo/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 | \- | 计时结束后触发
-17
View File
@@ -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;
-65
View File
@@ -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
-30
View File
@@ -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);
}
-3
View File
@@ -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;
-53
View File
@@ -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 | optionsleft/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 | optionsleft/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)` | 选中值发生变化时触发
-3
View File
@@ -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;
-101
View File
@@ -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;
}
-67
View File
@@ -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;

Some files were not shown because too many files have changed in this diff Show More