mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
[improvement] AddressList: jsx (#2504)
This commit is contained in:
neverland
GitHub
parent
25c00b1023
commit
05e85f2eb0
47
packages/address-list/Item.js
Normal file
47
packages/address-list/Item.js
Normal file
@ -0,0 +1,47 @@
|
||||
import { use } from '../utils';
|
||||
import Icon from '../icon';
|
||||
import Cell from '../cell';
|
||||
import Radio from '../radio';
|
||||
|
||||
const [sfc, bem] = use('address-item');
|
||||
|
||||
export default sfc({
|
||||
props: {
|
||||
data: Object,
|
||||
disabled: Boolean,
|
||||
switchable: Boolean
|
||||
},
|
||||
|
||||
methods: {
|
||||
onSelect() {
|
||||
if (this.switchable) {
|
||||
this.$emit('select');
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
render(h) {
|
||||
const { data, disabled, switchable } = this;
|
||||
return (
|
||||
<Cell
|
||||
class={bem({ disabled, unswitchable: !switchable })}
|
||||
is-link={!disabled && switchable}
|
||||
onClick={this.onSelect}
|
||||
>
|
||||
<Radio name={data.id}>
|
||||
<div class={bem('name')}>{`${data.name}，${data.tel}`}</div>
|
||||
<div class={bem('address')}>{data.address}</div>
|
||||
</Radio>
|
||||
<Icon
|
||||
slot="right-icon"
|
||||
name="edit"
|
||||
class={bem('edit')}
|
||||
onClick={event => {
|
||||
event.stopPropagation();
|
||||
this.$emit('edit');
|
||||
}}
|
||||
/>
|
||||
</Cell>
|
||||
);
|
||||
}
|
||||
});
|
||||
@ -1,48 +0,0 @@
|
||||
<template>
|
||||
<cell
|
||||
:class="b({ disabled, unswitchable: !switchable })"
|
||||
:is-link="!disabled && switchable"
|
||||
@click="onSelect"
|
||||
>
|
||||
<radio :name="data.id">
|
||||
<div :class="b('name')">{{ data.name }}，{{ data.tel }}</div>
|
||||
<div
|
||||
v-text="data.address"
|
||||
:class="b('address')"
|
||||
/>
|
||||
</radio>
|
||||
<icon
|
||||
slot="right-icon"
|
||||
name="edit"
|
||||
:class="b('edit')"
|
||||
@click.stop="$emit('edit')"
|
||||
/>
|
||||
</cell>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Radio from '../radio';
|
||||
import create from '../utils/create';
|
||||
|
||||
export default create({
|
||||
name: 'address-item',
|
||||
|
||||
components: {
|
||||
Radio
|
||||
},
|
||||
|
||||
props: {
|
||||
data: Object,
|
||||
disabled: Boolean,
|
||||
switchable: Boolean
|
||||
},
|
||||
|
||||
methods: {
|
||||
onSelect() {
|
||||
if (this.switchable) {
|
||||
this.$emit('select');
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
63
packages/address-list/index.js
Normal file
63
packages/address-list/index.js
Normal file
@ -0,0 +1,63 @@
|
||||
import { use } from '../utils';
|
||||
import Button from '../button';
|
||||
import RadioGroup from '../radio-group';
|
||||
import AddressItem from './Item';
|
||||
|
||||
const [sfc, bem, t] = use('address-list');
|
||||
|
||||
export default sfc({
|
||||
props: {
|
||||
list: Array,
|
||||
disabledList: Array,
|
||||
disabledText: String,
|
||||
addButtonText: String,
|
||||
value: [String, Number],
|
||||
switchable: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
}
|
||||
},
|
||||
|
||||
render(h) {
|
||||
const getList = (list, disabled) =>
|
||||
list.map((item, index) => (
|
||||
<AddressItem
|
||||
data={item}
|
||||
key={item.id}
|
||||
disabled={disabled}
|
||||
switchable={this.switchable && !disabled}
|
||||
onSelect={() => {
|
||||
this.$emit(disabled ? 'select-disabled' : 'select', item, index);
|
||||
}}
|
||||
onEdit={() => {
|
||||
this.$emit(disabled ? 'edit-disabled' : 'edit', item, index);
|
||||
}}
|
||||
/>
|
||||
));
|
||||
|
||||
const List = getList(this.list);
|
||||
const DisabledList = getList(this.disabledList, true);
|
||||
|
||||
return (
|
||||
<div class={bem()}>
|
||||
{this.$slots.top}
|
||||
<RadioGroup value={this.value} onInput={event => this.$emit('input', event)}>
|
||||
{List}
|
||||
</RadioGroup>
|
||||
{this.disabledText && <div class={bem('disabled-text')}>{this.disabledText}</div>}
|
||||
{DisabledList}
|
||||
{this.$slots.default}
|
||||
<Button
|
||||
square
|
||||
size="large"
|
||||
type="danger"
|
||||
class={bem('add')}
|
||||
text={this.addButtonText || t('add')}
|
||||
onClick={() => {
|
||||
this.$emit('add');
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
});
|
||||
@ -1,73 +0,0 @@
|
||||
<template>
|
||||
<div :class="b()">
|
||||
<slot name="top" />
|
||||
<radio-group
|
||||
:value="value"
|
||||
@input="$emit('input', $event)"
|
||||
>
|
||||
<cell-group>
|
||||
<address-item
|
||||
v-for="(item, index) in list"
|
||||
:data="item"
|
||||
:key="item.id"
|
||||
:switchable="switchable"
|
||||
@select="$emit('select', item, index)"
|
||||
@edit="$emit('edit', item, index)"
|
||||
/>
|
||||
</cell-group>
|
||||
</radio-group>
|
||||
<div
|
||||
v-if="disabledText"
|
||||
v-text="disabledText"
|
||||
:class="b('disabled-text')"
|
||||
/>
|
||||
<cell-group v-if="disabledList.length">
|
||||
<address-item
|
||||
v-for="(item, index) in disabledList"
|
||||
disabled
|
||||
:data="item"
|
||||
:key="item.id"
|
||||
@select="$emit('select-disabled', item, index)"
|
||||
@edit="$emit('edit-disabled', item, index)"
|
||||
/>
|
||||
</cell-group>
|
||||
<slot />
|
||||
<van-button
|
||||
square
|
||||
size="large"
|
||||
type="danger"
|
||||
:class="b('add')"
|
||||
:text="addButtonText || $t('add')"
|
||||
@click="$emit('add')"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import create from '../utils/create';
|
||||
import RadioGroup from '../radio-group';
|
||||
import VanButton from '../button';
|
||||
import AddressItem from './Item';
|
||||
|
||||
export default create({
|
||||
name: 'address-list',
|
||||
|
||||
components: {
|
||||
RadioGroup,
|
||||
VanButton,
|
||||
AddressItem
|
||||
},
|
||||
|
||||
props: {
|
||||
list: Array,
|
||||
disabledList: Array,
|
||||
disabledText: String,
|
||||
addButtonText: String,
|
||||
value: [String, Number],
|
||||
switchable: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
@ -5,39 +5,40 @@ exports[`renders demo correctly 1`] = `
|
||||
<div>
|
||||
<div class="van-address-list">
|
||||
<div class="van-radio-group">
|
||||
<div class="van-cell-group van-hairline--top-bottom">
|
||||
<div class="van-cell van-cell--clickable van-address-item">
|
||||
|
||||
<div class="van-cell__value van-cell__value--alone">
|
||||
<div class="van-radio"><span class="van-radio__input"><input type="radio" value="1" checked="checked" class="van-radio__control"> <i class="van-icon van-icon-checked" style="color:undefined;font-size:undefined;"> <!----> <!----></i></span> <span class="van-radio__label"><div class="van-address-item__name">张三，13000000000</div> <div class="van-address-item__address">浙江省杭州市西湖区文三路 138 号东方通信大厦 7 楼 501 室</div></span></div>
|
||||
</div>
|
||||
<i class="van-icon van-icon-edit van-address-item__edit" style="color:undefined;font-size:undefined;">
|
||||
<!---->
|
||||
<!----></i>
|
||||
</div>
|
||||
<div class="van-cell van-cell--clickable van-address-item">
|
||||
|
||||
<div class="van-cell__value van-cell__value--alone">
|
||||
<div class="van-radio"><span class="van-radio__input"><input type="radio" value="2" 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-address-item__name">李四，1310000000</div> <div class="van-address-item__address">浙江省杭州市拱墅区莫干山路 50 号</div></span></div>
|
||||
</div>
|
||||
<i class="van-icon van-icon-edit van-address-item__edit" style="color:undefined;font-size:undefined;">
|
||||
<!---->
|
||||
<!----></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-address-list__disabled-text">以下地址超出配送范围</div>
|
||||
<div class="van-cell-group van-hairline--top-bottom">
|
||||
<div class="van-cell van-address-item van-address-item--disabled van-address-item--unswitchable">
|
||||
<div class="van-cell van-cell--clickable van-address-item">
|
||||
|
||||
<div class="van-cell__value van-cell__value--alone">
|
||||
<div class="van-radio"><span class="van-radio__input"><input type="radio" value="3" 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-address-item__name">王五，1320000000</div> <div class="van-address-item__address">浙江省杭州市滨江区江南大道 15 号</div></span></div>
|
||||
<div class="van-radio"><span class="van-radio__input"><input type="radio" value="1" checked="checked" class="van-radio__control"> <i class="van-icon van-icon-checked" style="color:undefined;font-size:undefined;"> <!----> <!----></i></span> <span class="van-radio__label"><div class="van-address-item__name">张三，13000000000</div>
|
||||
<div class="van-address-item__address">浙江省杭州市西湖区文三路 138 号东方通信大厦 7 楼 501 室</div></span></div>
|
||||
</div>
|
||||
<i class="van-icon van-icon-edit van-address-item__edit" style="color:undefined;font-size:undefined;">
|
||||
<!---->
|
||||
<!----></i>
|
||||
</div>
|
||||
</div> <button class="van-button van-button--danger van-button--large van-button--square van-address-list__add"><span class="van-button__text">新增地址</span></button>
|
||||
<div class="van-cell van-cell--clickable van-address-item">
|
||||
|
||||
<div class="van-cell__value van-cell__value--alone">
|
||||
<div class="van-radio"><span class="van-radio__input"><input type="radio" value="2" 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-address-item__name">李四，1310000000</div>
|
||||
<div class="van-address-item__address">浙江省杭州市拱墅区莫干山路 50 号</div></span></div>
|
||||
</div>
|
||||
<i class="van-icon van-icon-edit van-address-item__edit" style="color:undefined;font-size:undefined;">
|
||||
<!---->
|
||||
<!----></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-address-list__disabled-text">以下地址超出配送范围</div>
|
||||
<div class="van-cell van-address-item van-address-item--disabled van-address-item--unswitchable">
|
||||
|
||||
<div class="van-cell__value van-cell__value--alone">
|
||||
<div class="van-radio"><span class="van-radio__input"><input type="radio" value="3" 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-address-item__name">王五，1320000000</div>
|
||||
<div class="van-address-item__address">浙江省杭州市滨江区江南大道 15 号</div></span></div>
|
||||
</div>
|
||||
<i class="van-icon van-icon-edit van-address-item__edit" style="color:undefined;font-size:undefined;">
|
||||
<!---->
|
||||
<!----></i>
|
||||
</div>
|
||||
|
||||
<button class="van-button van-button--danger van-button--large van-button--square van-address-list__add"><span class="van-button__text">新增地址</span></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user