mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-08-29 02:54:45 +08:00
types(Checkbox): export more types (#9665)
* types(Checkbox): export more types * fix: label position
This commit is contained in:
parent
4bc2557c5a
commit
8970636575
@ -6,5 +6,6 @@ export default CheckboxGroup;
|
|||||||
export type { CheckboxGroupProps };
|
export type { CheckboxGroupProps };
|
||||||
export type {
|
export type {
|
||||||
CheckboxGroupInstance,
|
CheckboxGroupInstance,
|
||||||
|
CheckboxGroupDirection,
|
||||||
CheckboxGroupToggleAllOptions,
|
CheckboxGroupToggleAllOptions,
|
||||||
} from './types';
|
} from './types';
|
||||||
|
@ -1,6 +1,8 @@
|
|||||||
import type { ComponentPublicInstance } from 'vue';
|
import type { ComponentPublicInstance } from 'vue';
|
||||||
import type { CheckboxGroupProps } from './CheckboxGroup';
|
import type { CheckboxGroupProps } from './CheckboxGroup';
|
||||||
import type { CheckerParent } from '../checkbox/Checker';
|
import type { CheckerParent, CheckerDirection } from '../checkbox/Checker';
|
||||||
|
|
||||||
|
export type CheckboxGroupDirection = CheckerDirection;
|
||||||
|
|
||||||
export type CheckboxGroupToggleAllOptions =
|
export type CheckboxGroupToggleAllOptions =
|
||||||
| boolean
|
| boolean
|
||||||
|
@ -116,13 +116,10 @@ export default defineComponent({
|
|||||||
};
|
};
|
||||||
|
|
||||||
return () => {
|
return () => {
|
||||||
const nodes: (JSX.Element | undefined)[] = [renderIcon()];
|
const nodes: (JSX.Element | undefined)[] =
|
||||||
|
props.labelPosition === 'left'
|
||||||
if (props.labelPosition === 'left') {
|
? [renderLabel(), renderIcon()]
|
||||||
nodes.unshift(renderLabel());
|
: [renderIcon(), renderLabel()];
|
||||||
} else {
|
|
||||||
nodes.push(renderLabel());
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
|
@ -334,9 +334,12 @@ The component exports the following type definitions:
|
|||||||
```ts
|
```ts
|
||||||
import type {
|
import type {
|
||||||
CheckboxProps,
|
CheckboxProps,
|
||||||
|
CheckboxShape,
|
||||||
CheckboxInstance,
|
CheckboxInstance,
|
||||||
|
CheckboxLabelPosition,
|
||||||
CheckboxGroupProps,
|
CheckboxGroupProps,
|
||||||
CheckboxGroupInstance,
|
CheckboxGroupInstance,
|
||||||
|
CheckboxGroupDirection,
|
||||||
CheckboxGroupToggleAllOptions,
|
CheckboxGroupToggleAllOptions,
|
||||||
} from 'vant';
|
} from 'vant';
|
||||||
```
|
```
|
||||||
|
@ -352,9 +352,12 @@ checkboxGroup.toggleAll({
|
|||||||
```ts
|
```ts
|
||||||
import type {
|
import type {
|
||||||
CheckboxProps,
|
CheckboxProps,
|
||||||
|
CheckboxShape,
|
||||||
CheckboxInstance,
|
CheckboxInstance,
|
||||||
|
CheckboxLabelPosition,
|
||||||
CheckboxGroupProps,
|
CheckboxGroupProps,
|
||||||
CheckboxGroupInstance,
|
CheckboxGroupInstance,
|
||||||
|
CheckboxGroupDirection,
|
||||||
CheckboxGroupToggleAllOptions,
|
CheckboxGroupToggleAllOptions,
|
||||||
} from 'vant';
|
} from 'vant';
|
||||||
```
|
```
|
||||||
|
@ -4,4 +4,8 @@ import _Checkbox, { CheckboxProps } from './Checkbox';
|
|||||||
export const Checkbox = withInstall(_Checkbox);
|
export const Checkbox = withInstall(_Checkbox);
|
||||||
export default Checkbox;
|
export default Checkbox;
|
||||||
export type { CheckboxProps };
|
export type { CheckboxProps };
|
||||||
export type { CheckboxInstance } from './types';
|
export type {
|
||||||
|
CheckboxShape,
|
||||||
|
CheckboxInstance,
|
||||||
|
CheckboxLabelPosition,
|
||||||
|
} from './types';
|
||||||
|
@ -1,5 +1,9 @@
|
|||||||
import type { ComponentPublicInstance, ComputedRef } from 'vue';
|
import type { ComponentPublicInstance, ComputedRef } from 'vue';
|
||||||
import type { CheckboxProps } from './Checkbox';
|
import type { CheckboxProps } from './Checkbox';
|
||||||
|
import type { CheckerShape, CheckerLabelPosition } from './Checker';
|
||||||
|
|
||||||
|
export type CheckboxShape = CheckerShape;
|
||||||
|
export type CheckboxLabelPosition = CheckerLabelPosition;
|
||||||
|
|
||||||
export type CheckboxExpose = {
|
export type CheckboxExpose = {
|
||||||
toggle: (newValue?: boolean) => void;
|
toggle: (newValue?: boolean) => void;
|
||||||
|
@ -11,10 +11,12 @@ import type { CheckerDirection } from '../checkbox/Checker';
|
|||||||
|
|
||||||
const [name, bem] = createNamespace('radio-group');
|
const [name, bem] = createNamespace('radio-group');
|
||||||
|
|
||||||
|
export type RadioGroupDirection = CheckerDirection;
|
||||||
|
|
||||||
const props = {
|
const props = {
|
||||||
disabled: Boolean,
|
disabled: Boolean,
|
||||||
iconSize: numericProp,
|
iconSize: numericProp,
|
||||||
direction: String as PropType<CheckerDirection>,
|
direction: String as PropType<RadioGroupDirection>,
|
||||||
modelValue: unknownProp,
|
modelValue: unknownProp,
|
||||||
checkedColor: String,
|
checkedColor: String,
|
||||||
};
|
};
|
||||||
|
@ -1,5 +1,6 @@
|
|||||||
import { withInstall } from '../utils';
|
import { withInstall } from '../utils';
|
||||||
import _RadioGroup from './RadioGroup';
|
import _RadioGroup, { RadioGroupDirection } from './RadioGroup';
|
||||||
|
|
||||||
export const RadioGroup = withInstall(_RadioGroup);
|
export const RadioGroup = withInstall(_RadioGroup);
|
||||||
export default RadioGroup;
|
export default RadioGroup;
|
||||||
|
export type { RadioGroupDirection };
|
||||||
|
@ -156,6 +156,14 @@ export default {
|
|||||||
</van-radio-group>
|
</van-radio-group>
|
||||||
```
|
```
|
||||||
|
|
||||||
|
### Types
|
||||||
|
|
||||||
|
The component exports the following type definitions:
|
||||||
|
|
||||||
|
```ts
|
||||||
|
import type { RadioShape, RadioLabelPosition, RadioGroupDirection } from 'vant';
|
||||||
|
```
|
||||||
|
|
||||||
## API
|
## API
|
||||||
|
|
||||||
### Radio Props
|
### Radio Props
|
||||||
|
@ -181,7 +181,7 @@ export default {
|
|||||||
| disabled | 是否为禁用状态 | _boolean_ | `false` |
|
| disabled | 是否为禁用状态 | _boolean_ | `false` |
|
||||||
| label-disabled | 是否禁用文本内容点击 | _boolean_ | `false` |
|
| label-disabled | 是否禁用文本内容点击 | _boolean_ | `false` |
|
||||||
| label-position | 文本位置,可选值为 `left` | _string_ | `right` |
|
| label-position | 文本位置,可选值为 `left` | _string_ | `right` |
|
||||||
| icon-size | 图标大小,默认单位为`px` | _number \| string_ | `20px` |
|
| icon-size | 图标大小,默认单位为 `px` | _number \| string_ | `20px` |
|
||||||
| checked-color | 选中状态颜色 | _string_ | `#1989fa` |
|
| checked-color | 选中状态颜色 | _string_ | `#1989fa` |
|
||||||
|
|
||||||
### RadioGroup Props
|
### RadioGroup Props
|
||||||
@ -190,8 +190,8 @@ export default {
|
|||||||
| --- | --- | --- | --- |
|
| --- | --- | --- | --- |
|
||||||
| v-model | 当前选中项的标识符 | _any_ | - |
|
| v-model | 当前选中项的标识符 | _any_ | - |
|
||||||
| disabled | 是否禁用所有单选框 | _boolean_ | `false` |
|
| disabled | 是否禁用所有单选框 | _boolean_ | `false` |
|
||||||
| direction | 排列方向,可选值为`horizontal` | _string_ | `vertical` |
|
| direction | 排列方向,可选值为 `horizontal` | _string_ | `vertical` |
|
||||||
| icon-size | 所有单选框的图标大小,默认单位为`px` | _number \| string_ | `20px` |
|
| icon-size | 所有单选框的图标大小,默认单位为 `px` | _number \| string_ | `20px` |
|
||||||
| checked-color | 所有单选框的选中状态颜色 | _string_ | `#1989fa` |
|
| checked-color | 所有单选框的选中状态颜色 | _string_ | `#1989fa` |
|
||||||
|
|
||||||
### Radio Events
|
### Radio Events
|
||||||
@ -213,6 +213,14 @@ export default {
|
|||||||
| default | 自定义文本 | - |
|
| default | 自定义文本 | - |
|
||||||
| icon | 自定义图标 | _{ checked: boolean, disabled: boolean }_ |
|
| icon | 自定义图标 | _{ checked: boolean, disabled: boolean }_ |
|
||||||
|
|
||||||
|
### 类型定义
|
||||||
|
|
||||||
|
组件导出以下类型定义:
|
||||||
|
|
||||||
|
```ts
|
||||||
|
import type { RadioShape, RadioLabelPosition, RadioGroupDirection } from 'vant';
|
||||||
|
```
|
||||||
|
|
||||||
## 主题定制
|
## 主题定制
|
||||||
|
|
||||||
### 样式变量
|
### 样式变量
|
||||||
|
@ -8,7 +8,14 @@ import { RADIO_KEY } from '../radio-group/RadioGroup';
|
|||||||
import { useParent } from '@vant/use';
|
import { useParent } from '@vant/use';
|
||||||
|
|
||||||
// Components
|
// Components
|
||||||
import Checker, { checkerProps } from '../checkbox/Checker';
|
import Checker, {
|
||||||
|
checkerProps,
|
||||||
|
CheckerShape,
|
||||||
|
CheckerLabelPosition,
|
||||||
|
} from '../checkbox/Checker';
|
||||||
|
|
||||||
|
export type RadioShape = CheckerShape;
|
||||||
|
export type RadioLabelPosition = CheckerLabelPosition;
|
||||||
|
|
||||||
const [name, bem] = createNamespace('radio');
|
const [name, bem] = createNamespace('radio');
|
||||||
|
|
||||||
|
@ -1,5 +1,6 @@
|
|||||||
import { withInstall } from '../utils';
|
import { withInstall } from '../utils';
|
||||||
import _Radio from './Radio';
|
import _Radio, { RadioShape, RadioLabelPosition } from './Radio';
|
||||||
|
|
||||||
export const Radio = withInstall(_Radio);
|
export const Radio = withInstall(_Radio);
|
||||||
export default Radio;
|
export default Radio;
|
||||||
|
export type { RadioShape, RadioLabelPosition };
|
||||||
|
Loading…
x
Reference in New Issue
Block a user