mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
types(AddressList): use tsx (#8143)
This commit is contained in:
neverland
GitHub
parent
e943b081f8
commit
eaf01090cc
@ -1,3 +1,5 @@
|
||||
import { PropType } from 'vue';
|
||||
|
||||
// Utils
|
||||
import { createNamespace } from '../utils';
|
||||
|
||||
@ -9,12 +11,23 @@ import Radio from '../radio';
|
||||
|
||||
const [createComponent, bem] = createNamespace('address-item');
|
||||
|
||||
export type AddressListItem = {
|
||||
id: number | string;
|
||||
tel: number | string;
|
||||
name: string;
|
||||
address: string;
|
||||
isDefault?: boolean;
|
||||
};
|
||||
|
||||
export default createComponent({
|
||||
props: {
|
||||
data: Object,
|
||||
disabled: Boolean,
|
||||
switchable: Boolean,
|
||||
defaultTagText: String,
|
||||
address: {
|
||||
type: Object as PropType<AddressListItem>,
|
||||
required: true,
|
||||
},
|
||||
},
|
||||
|
||||
emits: ['edit', 'click', 'select'],
|
||||
@ -40,7 +53,7 @@ export default createComponent({
|
||||
);
|
||||
|
||||
const renderTag = () => {
|
||||
if (props.data.isDefault && props.defaultTagText) {
|
||||
if (props.address.isDefault && props.defaultTagText) {
|
||||
return (
|
||||
<Tag type="danger" round class={bem('tag')}>
|
||||
{props.defaultTagText}
|
||||
@ -50,19 +63,19 @@ export default createComponent({
|
||||
};
|
||||
|
||||
const renderContent = () => {
|
||||
const { data, disabled, switchable } = props;
|
||||
const { address, disabled, switchable } = props;
|
||||
|
||||
const Info = [
|
||||
<div class={bem('name')}>
|
||||
{`${data.name} ${data.tel}`}
|
||||
{`${address.name} ${address.tel}`}
|
||||
{renderTag()}
|
||||
</div>,
|
||||
<div class={bem('address')}>{data.address}</div>,
|
||||
<div class={bem('address')}>{address.address}</div>,
|
||||
];
|
||||
|
||||
if (switchable && !disabled) {
|
||||
return (
|
||||
<Radio name={data.id} iconSize={18}>
|
||||
<Radio name={address.id} iconSize={18}>
|
||||
{Info}
|
||||
</Radio>
|
||||
);
|
||||
@ -84,7 +97,7 @@ export default createComponent({
|
||||
border={false}
|
||||
valueClass={bem('value')}
|
||||
/>
|
||||
{slots.bottom?.({ ...props.data, disabled })}
|
||||
{slots.bottom?.({ ...props.address, disabled })}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@ -90,11 +90,11 @@ export default {
|
||||
| Event | Description | Arguments |
|
||||
| --- | --- | --- |
|
||||
| add | Emitted when the add button is clicked | - |
|
||||
| edit | Emitted when the edit icon of address is clicked | item: address object，index |
|
||||
| select | Emitted when an address is selected | item: address object，index |
|
||||
| edit-disabled | Emitted when the edit icon of disabled address is clicked | item: address object，index |
|
||||
| select-disabled | Emitted when a disabled address is selected | item: address object，index |
|
||||
| click-item | Emitted when an address item is clicked | item: address object，index |
|
||||
| edit | Emitted when the edit icon of address is clicked | _item: Address, index: number_ |
|
||||
| select | Emitted when an address is selected | _item: Address, index: number_ |
|
||||
| edit-disabled | Emitted when the edit icon of disabled address is clicked | _item: Address, index: number_ |
|
||||
| select-disabled | Emitted when a disabled address is selected | _item: Address, index: number_ |
|
||||
| click-item | Emitted when an address item is clicked | _item: Address, index: number_ |
|
||||
|
||||
### Data Structure of Address
|
||||
|
||||
@ -108,11 +108,11 @@ export default {
|
||||
|
||||
### Slots
|
||||
|
||||
| Name | Description | SlotProps |
|
||||
| ----------- | ------------------------------ | --------- |
|
||||
| default | Custom content after list | - |
|
||||
| top | Custom content before list | - |
|
||||
| item-bottom | Custom content after list item | item |
|
||||
| Name | Description | SlotProps |
|
||||
| ----------- | ------------------------------ | --------------- |
|
||||
| default | Custom content after list | - |
|
||||
| top | Custom content before list | - |
|
||||
| item-bottom | Custom content after list item | _item: Address_ |
|
||||
|
||||
### Less Variables
|
||||
|
||||
|
||||
@ -91,14 +91,14 @@ export default {
|
||||
|
||||
### Events
|
||||
|
||||
| 事件名 | 说明 | 回调参数 |
|
||||
| --------------- | ------------------------ | --------------------------- |
|
||||
| add | 点击新增按钮时触发 | - |
|
||||
| edit | 点击编辑按钮时触发 | item: 地址对象，index: 索引 |
|
||||
| select | 切换选中的地址时触发 | item: 地址对象，index: 索引 |
|
||||
| edit-disabled | 编辑不可配送的地址时触发 | item: 地址对象，index: 索引 |
|
||||
| select-disabled | 选中不可配送的地址时触发 | item: 地址对象，index: 索引 |
|
||||
| click-item | 点击任意地址时触发 | item: 地址对象，index: 索引 |
|
||||
| 事件名 | 说明 | 回调参数 |
|
||||
| --------------- | ------------------------ | ------------------------------ |
|
||||
| add | 点击新增按钮时触发 | - |
|
||||
| edit | 点击编辑按钮时触发 | _item: Address, index: number_ |
|
||||
| select | 切换选中的地址时触发 | _item: Address, index: number_ |
|
||||
| edit-disabled | 编辑不可配送的地址时触发 | _item: Address, index: number_ |
|
||||
| select-disabled | 选中不可配送的地址时触发 | _item: Address, index: number_ |
|
||||
| click-item | 点击任意地址时触发 | _item: Address, index: number_ |
|
||||
|
||||
### Address 数据结构
|
||||
|
||||
@ -112,11 +112,11 @@ export default {
|
||||
|
||||
### Slots
|
||||
|
||||
| 名称 | 说明 | 参数 |
|
||||
| ----------- | -------------------- | ---------- |
|
||||
| default | 在列表下方插入内容 | - |
|
||||
| top | 在顶部插入内容 | - |
|
||||
| item-bottom | 在列表项底部插入内容 | 列表项的值 |
|
||||
| 名称 | 说明 | 参数 |
|
||||
| ----------- | -------------------- | --------------- |
|
||||
| default | 在列表下方插入内容 | - |
|
||||
| top | 在顶部插入内容 | - |
|
||||
| item-bottom | 在列表项底部插入内容 | _item: Address_ |
|
||||
|
||||
### 样式变量
|
||||
|
||||
|
||||
@ -1,21 +1,29 @@
|
||||
import { PropType } from 'vue';
|
||||
|
||||
// Utils
|
||||
import { createNamespace } from '../utils';
|
||||
|
||||
// Components
|
||||
import Button from '../button';
|
||||
import RadioGroup from '../radio-group';
|
||||
import AddressItem from './Item';
|
||||
import AddressItem, { AddressListItem } from './Item';
|
||||
|
||||
const [createComponent, bem, t] = createNamespace('address-list');
|
||||
|
||||
export default createComponent({
|
||||
props: {
|
||||
list: Array,
|
||||
modelValue: [Number, String],
|
||||
disabledList: Array,
|
||||
disabledText: String,
|
||||
addButtonText: String,
|
||||
defaultTagText: String,
|
||||
list: {
|
||||
type: Array as PropType<AddressListItem[]>,
|
||||
default: () => [],
|
||||
},
|
||||
disabledList: {
|
||||
type: Array as PropType<AddressListItem[]>,
|
||||
default: () => [],
|
||||
},
|
||||
switchable: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
@ -33,7 +41,11 @@ export default createComponent({
|
||||
],
|
||||
|
||||
setup(props, { slots, emit }) {
|
||||
const renderItem = (item, index, disabled) => {
|
||||
const renderItem = (
|
||||
item: AddressListItem,
|
||||
index: number,
|
||||
disabled?: boolean
|
||||
) => {
|
||||
const onEdit = () => {
|
||||
const name = disabled ? 'edit-disabled' : 'edit';
|
||||
emit(name, item, index);
|
||||
@ -58,7 +70,7 @@ export default createComponent({
|
||||
bottom: slots['item-bottom'],
|
||||
}}
|
||||
key={item.id}
|
||||
data={item}
|
||||
address={item}
|
||||
disabled={disabled}
|
||||
switchable={props.switchable}
|
||||
defaultTagText={props.defaultTagText}
|
||||
@ -69,7 +81,7 @@ export default createComponent({
|
||||
);
|
||||
};
|
||||
|
||||
const renderList = (list, disabled) => {
|
||||
const renderList = (list: AddressListItem[], disabled?: boolean) => {
|
||||
if (list) {
|
||||
return list.map((item, index) => renderItem(item, index, disabled));
|
||||
}
|
||||
2
src/vue-tsx-shim.d.ts
vendored
2
src/vue-tsx-shim.d.ts
vendored
@ -10,12 +10,14 @@ declare module 'vue' {
|
||||
// see: https://github.com/vuejs/vue-next/issues/1553
|
||||
// https://github.com/vuejs/vue-next/issues/3029
|
||||
onBlur?: EventHandler;
|
||||
onEdit?: EventHandler;
|
||||
onFocus?: EventHandler;
|
||||
onInput?: EventHandler;
|
||||
onClick?: EventHandler;
|
||||
onCancel?: EventHandler;
|
||||
onClosed?: EventHandler;
|
||||
onChange?: EventHandler;
|
||||
onSelect?: EventHandler;
|
||||
onToggle?: EventHandler;
|
||||
onConfirm?: EventHandler;
|
||||
onClickStep?: EventHandler;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user