blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-10-27 01:32:10 +08:00
Code Issues Projects Releases Wiki Activity

[improvement] Functional: ContactList, NavBar, Panel, SubmitBar, SwitchCell, Tag (#2675)

Browse Source
This commit is contained in:
neverland 2019-02-02 16:04:54 +08:00 committed by GitHub
parent 3c6c32e305
commit 5926d02d38
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
11 changed files with 302 additions and 265 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

102
packages/contact-list/index.js
View File

@ -1,4 +1,4 @@
import { use } from '../utils'; import { use, noop } from '../utils';
import Icon from '../icon'; import Icon from '../icon';
import Cell from '../cell'; import Cell from '../cell';
import Button from '../button'; import Button from '../button';
@ -7,55 +7,57 @@ import RadioGroup from '../radio-group';
const [sfc, bem, t] = use('contact-list'); const [sfc, bem, t] = use('contact-list');
export default sfc({ export default sfc(
props: { {
value: null, props: {
list: Array, value: null,
addText: String list: Array,
}, addText: String
},
render(h) { render(h, context) {
return ( const { props, listeners } = context;
<div class={bem()}>
<RadioGroup const List = props.list.map((item, index) => (
value={this.value} <Cell
class={bem('group')} key={item.id}
onInput={event => { isLink
this.$emit('input', event); onClick={() => {
listeners.input && listeners.input(item.id);
listeners.select && listeners.select(item, index);
}} }}
> >
{this.list.map((item, index) => ( <Radio name={item.id}>
<Cell key={item.id} isLink> <div class={bem('name')}>{`${item.name}，${item.tel}`}</div>
<Radio </Radio>
name={item.id} <Icon
onClick={() => { slot="right-icon"
this.$emit('select', item, index); name="edit"
}} class={bem('edit')}
> onClick={event => {
<div class={bem('name')}>{`${item.name}，${item.tel}`}</div> event.stopPropagation();
</Radio> listeners.edit && listeners.edit(item, index);
<Icon }}
slot="right-icon" />
name="edit" </Cell>
class={bem('edit')} ));
onClick={() => {
this.$emit('edit', item, index); return (
}} <div class={bem()} {...context.data}>
/> <RadioGroup value={props.value} class={bem('group')}>
</Cell> {List}
))} </RadioGroup>
</RadioGroup> <Button
<Button square
square size="large"
size="large" type="danger"
type="danger" class={bem('add')}
class={bem('add')} text={props.addText || t('addText')}
text={this.addText || t('addText')} onClick={listeners.add || noop}
onClick={() => { />
this.$emit('add'); </div>
}} );
/> }
</div> },
); true
} );
});

16
packages/contact-list/index.less
View File

@ -19,16 +19,24 @@
margin-left: 27px; margin-left: 27px;
} }
.van-radio__input { .van-radio__icon {
top: 50%; top: 50%;
left: 0; left: 0;
font-size: 16px; height: 16px;
position: absolute; position: absolute;
line-height: 16px;
transform: translate(0, -50%); transform: translate(0, -50%);
.van-icon {
width: 16px;
height: 16px;
font-size: 12px;
}
} }
.van-icon-checked { .van-radio__icon--checked .van-icon {
color: @red; border-color: @red;
background-color: @red;
} }
&__group { &__group {

94
packages/nav-bar/index.js
View File

@ -1,53 +1,55 @@
import { use } from '../utils'; import { use, noop } from '../utils';
import Icon from '../icon'; import Icon from '../icon';
const [sfc, bem] = use('nav-bar'); const [sfc, bem] = use('nav-bar');
export default sfc({ export default sfc(
props: { {
title: String, props: {
fixed: Boolean, title: String,
leftText: String, fixed: Boolean,
rightText: String, leftText: String,
leftArrow: Boolean, rightText: String,
border: { leftArrow: Boolean,
type: Boolean, border: {
default: true type: Boolean,
default: true
},
zIndex: {
type: Number,
default: 1
}
}, },
zIndex: {
type: Number, render(h, context) {
default: 1 const { props, listeners } = context;
const slots = context.slots();
return (
<div
class={[bem({ fixed: props.fixed }), { 'van-hairline--bottom': props.border }]}
style={{ zIndex: props.zIndex }}
{...context.data}
>
<div
class={bem('left')}
onClick={listeners['click-left'] || noop}
>
{slots.left || [
props.leftArrow && <Icon class={bem('arrow')} name="arrow-left" />,
props.leftText && <span class={bem('text')}>{props.leftText}</span>
]}
</div>
<div class={[bem('title'), 'van-ellipsis']}>{slots.title || props.title}</div>
<div
class={bem('right')}
onClick={listeners['click-right'] || noop}
>
{slots.right || (props.rightText && <span class={bem('text')}>{props.rightText}</span>)}
</div>
</div>
);
} }
}, },
true
render(h) { );
return (
<div
class={[bem({ fixed: this.fixed }), { 'van-hairline--bottom': this.border }]}
style={{ zIndex: this.zIndex }}
>
<div
class={bem('left')}
onClick={() => {
this.$emit('click-left');
}}
>
{this.$slots.left || [
this.leftArrow && <Icon class={bem('arrow')} name="arrow-left" />,
this.leftText && <span class={bem('text')}>{this.leftText}</span>
]}
</div>
<div class={[bem('title'), 'van-ellipsis']}>{this.$slots.title || this.title}</div>
<div
class={bem('right')}
onClick={() => {
this.$emit('click-right');
}}
>
{this.$slots.right ||
(this.rightText && <span class={bem('text')}>{this.rightText}</span>)}
</div>
</div>
);
}
});

58
packages/panel/index.js
View File

@ -4,31 +4,35 @@ import CellGroup from '../cell-group';
const [sfc, bem] = use('panel'); const [sfc, bem] = use('panel');
export default sfc({ export default sfc(
props: { {
icon: String, props: {
desc: String, icon: String,
title: String, desc: String,
status: String title: String,
status: String
},
render(h, context) {
const { props } = context;
const slots = context.slots();
return (
<CellGroup class={bem()} {...context.data}>
{slots.header || (
<Cell
class={bem('header')}
icon={props.icon}
label={props.desc}
title={props.title}
value={props.status}
/>
)}
<div class={bem('content')}>{slots.default}</div>
{slots.footer && <div class={[bem('footer'), 'van-hairline--top']}>{slots.footer}</div>}
</CellGroup>
);
}
}, },
true
render(h) { );
const slots = this.$slots;
return (
<CellGroup class={bem()}>
{slots.header || (
<Cell
class={bem('header')}
icon={this.icon}
label={this.desc}
title={this.title}
value={this.status}
/>
)}
<div class={bem('content')}>{slots.default}</div>
{slots.footer && <div class={[bem('footer'), 'van-hairline--top']}>{slots.footer}</div>}
</CellGroup>
);
}
});

115
packages/submit-bar/index.js
View File

@ -1,63 +1,66 @@
import { use } from '../utils'; import { use, noop } from '../utils';
import Button from '../button'; import Button from '../button';
const [sfc, bem, t] = use('submit-bar'); const [sfc, bem, t] = use('submit-bar');
export default sfc({ export default sfc(
props: { {
tip: String, props: {
label: String, tip: String,
loading: Boolean, label: String,
disabled: Boolean, loading: Boolean,
buttonText: String, disabled: Boolean,
price: { buttonText: String,
type: Number, price: {
default: null type: Number,
default: null
},
currency: {
type: String,
default: '¥'
},
buttonType: {
type: String,
default: 'danger'
}
}, },
currency: {
type: String, render(h, context) {
default: '¥' const { props, listeners } = context;
}, const { tip, price } = props;
buttonType: { const slots = context.slots();
type: String, const hasPrice = typeof price === 'number';
default: 'danger'
return (
<div class={bem()} {...context.data}>
{slots.top}
{(slots.tip || tip) && (
<div class={bem('tip')}>
{tip}
{slots.tip}
</div>
)}
<div class={bem('bar')}>
{slots.default}
<div class={bem('text')}>
{hasPrice && [
<span>{props.label || t('label')}</span>,
<span class={bem('price')}>{`${props.currency} ${(price / 100).toFixed(2)}`}</span>
]}
</div>
<Button
square
size="large"
type={props.buttonType}
loading={props.loading}
disabled={props.disabled}
text={props.loading ? '' : props.buttonText}
onClick={listeners.submit || noop}
/>
</div>
</div>
);
} }
}, },
true
render(h) { );
const { tip, price, $slots } = this;
const hasPrice = typeof price === 'number';
return (
<div class={bem()}>
{$slots.top}
{($slots.tip || tip) && (
<div class={bem('tip')}>
{tip}
{$slots.tip}
</div>
)}
<div class={bem('bar')}>
{$slots.default}
<div class={bem('text')}>
{hasPrice && [
<span>{this.label || t('label')}</span>,
<span class={bem('price')}>{`${this.currency} ${(price / 100).toFixed(2)}`}</span>
]}
</div>
<Button
square
size="large"
type={this.buttonType}
loading={this.loading}
disabled={this.disabled}
text={this.loading ? '' : this.buttonText}
onClick={() => {
this.$emit('submit');
}}
/>
</div>
</div>
);
}
});

2
packages/submit-bar/test/__snapshots__/index.spec.js.snap
View File

@ -1,6 +1,6 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP // Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`submit 1`] = ` exports[`disable submit 1`] = `
<div class="van-submit-bar"> <div class="van-submit-bar">
<div class="van-submit-bar__bar"> <div class="van-submit-bar__bar">
<div class="van-submit-bar__text"><span>合计：</span><span class="van-submit-bar__price">¥ 0.00</span></div><button disabled="disabled" class="van-button van-button--danger van-button--large van-button--square van-button--disabled"><span class="van-button__text"></span></button> <div class="van-submit-bar__text"><span>合计：</span><span class="van-submit-bar__price">¥ 0.00</span></div><button disabled="disabled" class="van-button van-button--danger van-button--large van-button--square van-button--disabled"><span class="van-button__text"></span></button>

33
packages/submit-bar/test/index.spec.js
View File

@ -2,10 +2,30 @@ import SubmitBar from '..';
import { mount } from '../../../test/utils'; import { mount } from '../../../test/utils';
test('submit', () => { test('submit', () => {
const submit = jest.fn();
const wrapper = mount(SubmitBar, { const wrapper = mount(SubmitBar, {
propsData: { context: {
price: 0.01, props: {
disabled: true price: 0.01
},
on: { submit }
}
});
const button = wrapper.find('.van-button');
button.trigger('click');
expect(submit.mock.calls[0]).toBeTruthy();
});
test('disable submit', () => {
const submit = jest.fn();
const wrapper = mount(SubmitBar, {
context: {
props: {
price: 0.01,
disabled: true
},
on: { submit }
} }
}); });
@ -14,10 +34,5 @@ test('submit', () => {
// disabled // disabled
const button = wrapper.find('.van-button'); const button = wrapper.find('.van-button');
button.trigger('click'); button.trigger('click');
expect(wrapper.emitted('submit')).toBeFalsy(); expect(submit.mock.calls[0]).toBeFalsy();
// submit
wrapper.vm.disabled = false;
button.trigger('click');
expect(wrapper.emitted('submit')).toBeTruthy();
}); });

56
packages/switch-cell/index.js
View File

@ -5,34 +5,34 @@ import SwitchMixin from '../mixins/switch';
const [sfc, bem] = use('switch-cell'); const [sfc, bem] = use('switch-cell');
export default sfc({ export default sfc(
mixins: [SwitchMixin], {
mixins: [SwitchMixin],
props: { props: {
title: String, title: String,
border: Boolean, border: Boolean,
size: { size: {
type: String, type: String,
default: '24px' default: '24px'
}
},
render(h, context) {
const { props } = context;
return (
<Cell
center
title={props.title}
border={props.border}
style={context.style}
class={[bem(), context.class, context.staticClass]}
>
<Switch {...{ props, on: context.listeners }} />
</Cell>
);
} }
}, },
true
watch: { );
value() {
this.$emit('change', this.value);
}
},
render(h) {
return (
<Cell center title={this.title} border={this.border} class={bem()}>
<Switch
{...{ props: this.$props }}
onInput={value => {
this.$emit('input', value);
}}
/>
</Cell>
);
}
});

13
packages/switch-cell/test/index.spec.js
View File

@ -1,13 +1,20 @@
import SwitchCell from '..'; import SwitchCell from '..';
import { mount } from '../../../test/utils'; import { mount } from '../../../test/utils';
test('emit event', () => { test('change event', () => {
const wrapper = mount(SwitchCell); const onChange = jest.fn();
const wrapper = mount(SwitchCell, {
context: {
on: {
change: onChange
}
}
});
wrapper.vm.$on('input', value => { wrapper.vm.$on('input', value => {
wrapper.setProps({ value }); wrapper.setProps({ value });
}); });
wrapper.find('.van-switch').trigger('click'); wrapper.find('.van-switch').trigger('click');
expect(wrapper.emitted('change')).toBeTruthy(); expect(onChange.mock.calls[0]).toBeTruthy();
}); });

76
packages/tag/index.js
View File

@ -9,51 +9,45 @@ const COLOR_MAP = {
success: GREEN success: GREEN
}; };
export default sfc({ export default sfc(
props: { {
size: String, props: {
type: String, size: String,
mark: Boolean, type: String,
color: String, mark: Boolean,
plain: Boolean, color: String,
round: Boolean, plain: Boolean,
textColor: String round: Boolean,
}, textColor: String
},
computed: { render(h, context) {
style() { const { props } = context;
const color = this.color || COLOR_MAP[this.type] || GRAY_DARK; const { mark, plain, round, size } = context.props;
const key = this.plain ? 'color' : 'backgroundColor';
const color = props.color || COLOR_MAP[props.type] || GRAY_DARK;
const key = plain ? 'color' : 'backgroundColor';
const style = { [key]: color }; const style = { [key]: color };
if (this.textColor) { if (props.textColor) {
style.color = this.textColor; style.color = props.textColor;
} }
return style; return (
<span
style={style}
class={[
bem({ mark, plain, round, [size]: size }),
{
'van-hairline--surround': plain
}
]}
{...context.data}
>
{context.children}
</span>
);
} }
}, },
true
render(h) { );
const {
mark,
plain,
round,
size
} = this;
return (
<span
class={[
bem({ mark, plain, round, [size]: size }),
{
'van-hairline--surround': plain
}
]}
style={this.style}
>
{this.$slots.default}
</span>
);
}
});

2
packages/utils/index.js
View File

@ -4,6 +4,8 @@ export { use, useSlots } from './use';
export const isServer = Vue.prototype.$isServer; export const isServer = Vue.prototype.$isServer;
export function noop() {}
export function isDef(value) { export function isDef(value) {
return value !== undefined && value !== null; return value !== undefined && value !== null;
} }