blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-06 03:57:59 +08:00
Code Issues Projects Releases Wiki Activity

feat: migrate Contact component

Browse Source
This commit is contained in:
chenjiahan 2020-08-17 12:04:13 +08:00
parent ec64d803be
commit 6d13094a20
6 changed files with 27 additions and 228 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
components.js
View File

@ -70,4 +70,7 @@ module.exports = [
'address-list',
'area',
'card',
'contact-card',
'contact-edit',
'contact-list',
];

4
src/contact-card/demo/index.vue
View File

@ -8,7 +8,7 @@
@click="showList = true"
/>
<van-popup v-model="showList" position="bottom" :lazy-render="false">
<van-popup v-model:show="showList" position="bottom" :lazy-render="false">
<van-contact-list
v-model="chosenContactId"
:list="list"
@ -19,7 +19,7 @@
/>
</van-popup>
<van-popup v-model="showEdit" position="bottom" :lazy-render="false">
<van-popup v-model:show="showEdit" position="bottom" :lazy-render="false">
<van-contact-edit
show-set-default
:set-default-label="t('defaultLabel')"

77
src/contact-card/index.tsx
View File

@ -1,77 +0,0 @@
// Utils
import { createNamespace } from '../utils';
import { emit, inherit } from '../utils/functional';
// Components
import Cell from '../cell';
// Types
import { CreateElement, RenderContext } from 'vue/types';
import { DefaultSlots } from '../utils/types';
const [createComponent, bem, t] = createNamespace('contact-card');
export type ContactCardProps = {
tel?: string;
name?: string;
type?: string;
addText: string;
editable: boolean;
};
function ContactCard(
h: CreateElement,
props: ContactCardProps,
slots: DefaultSlots,
ctx: RenderContext<ContactCardProps>
) {
const { type, editable } = props;
function onClick(event: Event) {
if (editable) {
emit(ctx, 'click', event);
}
}
function Content() {
if (type === 'add') {
return props.addText || t('addText');
}
return [
<div>{`${t('name')}：${props.name}`}</div>,
<div>{`${t('tel')}：${props.tel}`}</div>,
];
}
return (
<Cell
center
border={false}
isLink={editable}
class={bem([type])}
valueClass={bem('value')}
icon={type === 'edit' ? 'contact' : 'add-square'}
onClick={onClick}
{...inherit(ctx)}
>
{Content()}
</Cell>
);
}
ContactCard.props = {
tel: String,
name: String,
addText: String,
editable: {
type: Boolean,
default: true,
},
type: {
type: String,
default: 'add',
},
};
export default createComponent<ContactCardProps>(ContactCard);

24
src/contact-edit/index.js
View File

@ -33,6 +33,8 @@ export default createComponent({
},
},
emits: ['save', 'delete', 'change-default'],
data() {
return {
data: {
@ -121,19 +123,21 @@ export default createComponent({
</div>
{this.showSetDefault && (
<Cell
v-slots={{
'right-icon': () => (
<Switch
vModel={data.isDefault}
size={24}
onChange={(event) => {
this.$emit('change-default', event);
}}
/>
),
}}
title={this.setDefaultLabel}
class={bem('switch-cell')}
border={false}
>
<Switch
vModel={data.isDefault}
size={24}
slot="right-icon"
onChange={(event) => {
this.$emit('change-default', event);
}}
/>
</Cell>
></Cell>
)}
<div class={bem('buttons')}>
<Button

131
src/contact-list/index.tsx
View File

@ -1,131 +0,0 @@
// Utils
import { createNamespace } from '../utils';
import { RED } from '../utils/constant';
import { emit, inherit } from '../utils/functional';
// Components
import Tag from '../tag';
import Icon from '../icon';
import Cell from '../cell';
import Radio from '../radio';
import Button from '../button';
import RadioGroup from '../radio-group';
// Types
import { DefaultSlots } from '../utils/types';
import { CreateElement, RenderContext, VNode } from 'vue/types';
export type ContactListItem = {
id: string | number;
tel: string | number;
name: string;
isDefault: boolean;
};
export type ContactListProps = {
value?: any;
list?: ContactListItem[];
addText?: string;
defaultTagText?: string;
};
const [createComponent, bem, t] = createNamespace('contact-list');
function ContactList(
h: CreateElement,
props: ContactListProps,
slots: DefaultSlots,
ctx: RenderContext<ContactListProps>
) {
const List =
props.list &&
props.list.map((item, index) => {
function onClick() {
emit(ctx, 'input', item.id);
emit(ctx, 'select', item, index);
}
function RightIcon() {
return (
<Radio
name={item.id}
iconSize={16}
checkedColor={RED}
onClick={onClick}
/>
);
}
function LeftIcon() {
return (
<Icon
name="edit"
class={bem('edit')}
onClick={(event) => {
event.stopPropagation();
emit(ctx, 'edit', item, index);
}}
/>
);
}
function Content() {
const nodes = ([`${item.name}，${item.tel}`] as unknown[]) as VNode[];
if (item.isDefault && props.defaultTagText) {
nodes.push(
<Tag type="danger" round class={bem('item-tag')}>
{props.defaultTagText}
</Tag>
);
}
return nodes;
}
return (
<Cell
key={item.id}
isLink
center
class={bem('item')}
valueClass={bem('item-value')}
scopedSlots={{
icon: LeftIcon,
default: Content,
'right-icon': RightIcon,
}}
onClick={onClick}
/>
);
});
return (
<div class={bem()} {...inherit(ctx)}>
<RadioGroup value={props.value} class={bem('group')}>
{List}
</RadioGroup>
<div class={bem('bottom')}>
<Button
round
block
type="danger"
class={bem('add')}
text={props.addText || t('addText')}
onClick={() => {
emit(ctx, 'add');
}}
/>
</div>
</div>
);
}
ContactList.props = {
value: null as any,
list: Array,
addText: String,
defaultTagText: String,
};
export default createComponent(ContactList);

16
vant.config.js
View File

@ -339,10 +339,10 @@ module.exports = {
path: 'card',
title: 'Card 商品卡片',
},
// {
// path: 'contact-card',
// title: 'Contact 联系人',
// },
{
path: 'contact-card',
title: 'Contact 联系人',
},
// {
// path: 'coupon-list',
// title: 'Coupon 优惠券',
@ -673,10 +673,10 @@ module.exports = {
path: 'card',
title: 'Card',
},
// {
// path: 'contact-card',
// title: 'Contact',
// },
{
path: 'contact-card',
title: 'Contact',
},
// {
// path: 'coupon-list',
// title: 'Coupon',