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

[improvement] ContactList: jsx (#2509)

Browse Source
This commit is contained in:
neverland 2019-01-12 16:40:13 +08:00 committed by GitHub
parent fb89ac9dfb
commit 2eccc06a2a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 68 additions and 72 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
packages/contact-card/test/__snapshots__/demo.spec.js.snap
View File

@ -13,16 +13,14 @@ exports[`renders demo correctly 1`] = `
<div name="popup-slide-bottom" class="van-popup van-popup--bottom" style="display:none;">
<div class="van-contact-list">
<div class="van-radio-group">
<div class="van-cell-group van-hairline--top-bottom">
<div class="van-cell van-cell--clickable">
<div class="van-cell__value van-cell__value--alone">
<div class="van-radio"><span class="van-radio__input"><input type="radio" value="0" class="van-radio__control"> <i class="van-icon van-icon-circle" style="color:undefined;font-size:undefined;"> <!----> <!----></i></span> <span class="van-radio__label"><div class="van-contact-list__name">张三，13000000000</div></span></div>
</div><i class="van-icon van-icon-edit van-contact-list__edit" style="color:undefined;font-size:undefined;">
<!---->
<!----></i>
</div>
<div class="van-cell van-cell--clickable">
<div class="van-cell__value van-cell__value--alone">
<div class="van-radio"><span class="van-radio__input"><input type="radio" value="0" class="van-radio__control"> <i class="van-icon van-icon-circle" style="color:undefined;font-size:undefined;"> <!----> <!----></i></span> <span class="van-radio__label"><div class="van-contact-list__name">张三，13000000000</div></span></div>
</div><i class="van-icon van-icon-edit van-contact-list__edit" style="color:undefined;font-size:undefined;">
<!---->
<!----></i>
</div>
</div> <button class="van-button van-button--danger van-button--large van-button--square van-contact-list__add"><span class="van-button__text">新建联系人</span></button>
</div><button class="van-button van-button--danger van-button--large van-button--square van-contact-list__add"><span class="van-button__text">新建联系人</span></button>
</div>
</div>
<div name="popup-slide-bottom" class="van-popup van-popup--bottom" style="display:none;">

4
packages/contact-card/test/__snapshots__/index.spec.js.snap
View File

@ -2,8 +2,6 @@
exports[`ContactList render 1`] = `
<div class="van-contact-list">
<div class="van-radio-group">
<div class="van-cell-group van-hairline--top-bottom"></div>
</div> <button class="van-button van-button--danger van-button--large van-button--square van-contact-list__add"><span class="van-button__text">新建联系人</span></button>
<div class="van-radio-group"></div><button class="van-button van-button--danger van-button--large van-button--square van-contact-list__add"><span class="van-button__text">新建联系人</span></button>
</div>
`;

60
packages/contact-list/index.js Normal file
View File

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

60
packages/contact-list/index.vue
View File

@ -1,60 +0,0 @@
<template>
<div :class="b()">
<radio-group
:value="value"
@input="$emit('input', $event)"
>
<cell-group>
<cell
v-for="(item, index) in list"
:key="item.id"
is-link
>
<radio
:name="item.id"
@click="$emit('select', item, index)"
>
<div :class="b('name')">{{ item.name }}，{{ item.tel }}</div>
</radio>
<icon
slot="right-icon"
name="edit"
:class="b('edit')"
@click="$emit('edit', item, index)"
/>
</cell>
</cell-group>
</radio-group>
<van-button
square
size="large"
type="danger"
:class="b('add')"
:text="addText || $t('addText')"
@click="$emit('add')"
/>
</div>
</template>
<script>
import Radio from '../radio';
import VanButton from '../button';
import RadioGroup from '../radio-group';
import create from '../utils/create';
export default create({
name: 'contact-list',
components: {
Radio,
VanButton,
RadioGroup
},
props: {
value: null,
list: Array,
addText: String
}
});
</script>