mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-05-22 14:39:16 +08:00
feat(AddressEdit): add click feedback of area cell (#5120)
This commit is contained in:
parent
592bcafda0
commit
d8e30bdcac
@ -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} />;
|
||||
}
|
||||
}
|
||||
}}
|
||||
/>
|
||||
));
|
||||
|
@ -272,6 +272,7 @@ export default createComponent({
|
||||
<Field
|
||||
vShow={this.showArea}
|
||||
readonly
|
||||
clickable
|
||||
label={t('area')}
|
||||
placeholder={t('areaPlaceholder')}
|
||||
rightIcon="arrow"
|
||||
|
@ -26,7 +26,7 @@
|
||||
padding: 0;
|
||||
|
||||
&__search-item {
|
||||
background-color: #f2f3f5;
|
||||
background-color: @gray-2;
|
||||
}
|
||||
|
||||
&__keyword {
|
||||
|
@ -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">
|
||||
|
@ -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">
|
||||
|
@ -42,7 +42,7 @@
|
||||
left: 0;
|
||||
z-index: @contact-list-add-button-z-index;
|
||||
padding: 5px 16px;
|
||||
background-color: #fff;
|
||||
background-color: @white;
|
||||
}
|
||||
|
||||
&__add {
|
||||
|
@ -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}
|
||||
/>
|
||||
|
Loading…
x
Reference in New Issue
Block a user