feat(AddressEdit): add click feedback of area cell (#5120)

This commit is contained in:
neverland 2019-11-26 20:59:47 +08:00 committed by GitHub
parent 592bcafda0
commit d8e30bdcac
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 33 additions and 29 deletions

View File

@ -53,24 +53,25 @@ export default createComponent({
return searchResult.map(express => (
<Cell
key={express.name + express.address}
class={bem('search-item')}
label={express.address}
clickable
border={false}
icon="location-o"
clickable
label={express.address}
class={bem('search-item')}
onClick={() => {
this.onSelect(express);
}}
scopedSlots={{
title: () =>
express.name && (
<div
domPropsInnerHTML={express.name.replace(
title: () => {
if (express.name) {
const text = express.name.replace(
value,
`<span class=${bem('keyword')}>${value}</span>`
)}
/>
)
);
return <div domPropsInnerHTML={text} />;
}
}
}}
/>
));

View File

@ -272,6 +272,7 @@ export default createComponent({
<Field
vShow={this.showArea}
readonly
clickable
label={t('area')}
placeholder={t('areaPlaceholder')}
rightIcon="arrow"

View File

@ -26,7 +26,7 @@
padding: 0;
&__search-item {
background-color: #f2f3f5;
background-color: @gray-2;
}
&__keyword {

View File

@ -17,7 +17,7 @@ exports[`renders demo correctly 1`] = `
<div class="van-field__body"><input type="tel" placeholder="收货人手机号" class="van-field__control"></div>
</div>
</div>
<div class="van-cell van-field">
<div role="button" tabindex="0" class="van-cell van-cell--clickable van-field">
<div class="van-cell__title van-field__label"><span>地区</span></div>
<div class="van-cell__value">
<div class="van-field__body"><input type="text" placeholder="选择省 / 市 / 区" readonly="readonly" class="van-field__control">

View File

@ -15,7 +15,7 @@ exports[`create a AddressEdit 1`] = `
<div class="van-field__body"><input type="tel" placeholder="收货人手机号" class="van-field__control"></div>
</div>
</div>
<div class="van-cell van-field">
<div role="button" tabindex="0" class="van-cell van-cell--clickable van-field">
<div class="van-cell__title van-field__label"><span>地区</span></div>
<div class="van-cell__value">
<div class="van-field__body"><input type="text" placeholder="选择省 / 市 / 区" readonly="readonly" class="van-field__control">
@ -54,7 +54,7 @@ exports[`create a AddressEdit with props 1`] = `
<div class="van-field__body"><input type="tel" placeholder="收货人手机号" class="van-field__control"></div>
</div>
</div>
<div class="van-cell van-field">
<div role="button" tabindex="0" class="van-cell van-cell--clickable van-field">
<div class="van-cell__title van-field__label"><span>地区</span></div>
<div class="van-cell__value">
<div class="van-field__body"><input type="text" placeholder="选择省 / 市 / 区" readonly="readonly" class="van-field__control">
@ -107,7 +107,7 @@ exports[`set-default 1`] = `
<div class="van-field__body"><input type="tel" placeholder="收货人手机号" class="van-field__control"></div>
</div>
</div>
<div class="van-cell van-field">
<div role="button" tabindex="0" class="van-cell van-cell--clickable van-field">
<div class="van-cell__title van-field__label"><span>地区</span></div>
<div class="van-cell__value">
<div class="van-field__body"><input type="text" placeholder="选择省 / 市 / 区" readonly="readonly" class="van-field__control">
@ -160,7 +160,7 @@ exports[`show area component 1`] = `
<div class="van-field__body"><input type="tel" placeholder="收货人手机号" class="van-field__control"></div>
</div>
</div>
<div class="van-cell van-field">
<div role="button" tabindex="0" class="van-cell van-cell--clickable van-field">
<div class="van-cell__title van-field__label"><span>地区</span></div>
<div class="van-cell__value">
<div class="van-field__body"><input type="text" placeholder="选择省 / 市 / 区" readonly="readonly" class="van-field__control">
@ -213,7 +213,7 @@ exports[`show area component 2`] = `
<div class="van-field__body"><input type="tel" placeholder="收货人手机号" class="van-field__control"></div>
</div>
</div>
<div class="van-cell van-field">
<div role="button" tabindex="0" class="van-cell van-cell--clickable van-field">
<div class="van-cell__title van-field__label"><span>地区</span></div>
<div class="van-cell__value">
<div class="van-field__body"><input type="text" placeholder="选择省 / 市 / 区" readonly="readonly" class="van-field__control">
@ -266,7 +266,7 @@ exports[`valid area placeholder confirm 1`] = `
<div class="van-field__body"><input type="tel" placeholder="收货人手机号" class="van-field__control"></div>
</div>
</div>
<div class="van-cell van-field">
<div role="button" tabindex="0" class="van-cell van-cell--clickable van-field">
<div class="van-cell__title van-field__label"><span>地区</span></div>
<div class="van-cell__value">
<div class="van-field__body"><input type="text" placeholder="选择省 / 市 / 区" readonly="readonly" class="van-field__control">

View File

@ -42,7 +42,7 @@
left: 0;
z-index: @contact-list-add-button-z-index;
padding: 5px 16px;
background-color: #fff;
background-color: @white;
}
&__add {

View File

@ -9,7 +9,7 @@ import Radio from '../radio';
import RadioGroup from '../radio-group';
// Types
import { CreateElement, RenderContext } from 'vue/types';
import { CreateElement, RenderContext, VNode } from 'vue/types';
import { DefaultSlots } from '../utils/types';
export type ContactListItem = {
@ -67,14 +67,17 @@ function ContactList(
}
function Content() {
return [
`${item.name}${item.tel}`,
item.isDefault && props.defaultTagText && (
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 (
@ -84,11 +87,10 @@ function ContactList(
center
class={bem('item')}
valueClass={bem('item-value')}
// @ts-ignore
scopedSlots={{
icon: LeftIcon,
default: Content,
'right-icon': RightIcon,
icon: LeftIcon
}}
onClick={onClick}
/>