mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
3d19ddb573
* [bugfix] CouponList always show empty info * [bugfix] add click feedback of buttons in components * [Doc] add custom theme document * [new feature] Notice bar support more props * [bugfix] PullRefresh test cases * [bugfix] unused NoticeBar style * [bugfix] Swipe width calc error * [Doc] english document of all action components * [Doc] change document site path to /zanui/vant * [Doc] fix * [bugfix] uploader style error * [bugfix] tabs document demo * [new feature] Cell support vue-router target route * [bugfix] add cell test cases * update yarn.lock * [bugfix] Tabbar cann't display info when use icon slot * [Doc] update document title * [bugfix] Dialog should reset button text when showed * [new feature] CouponList add showCloseButton prop * [new feature] Swipe add 'initialSwipe' prop * [bugfix] NoticeBar text disappeared when page back * [new feature] ImagePreview support startPosition * fix: improve imagePreview test cases * [bugfix] Steps style error when has more than 4 items * [new feature] normalize size of all icons * [new feature] Stepper add plus & minus event * fix: yarn.lock * [bugfix] addressEdit icon render failed
109 lines
2.6 KiB
Vue
109 lines
2.6 KiB
Vue
<template>
|
|
<div ref="root">
|
|
<van-field
|
|
label="详细地址"
|
|
placeholder="如街道、楼层、门牌号等"
|
|
maxlength="200"
|
|
type="textarea"
|
|
autosize
|
|
rows="1"
|
|
:value="value"
|
|
:error="isError"
|
|
:onIconClick="onIconClick"
|
|
@input="$emit('input', $event)"
|
|
@focus="handleFocus"
|
|
@blur="handleBlur"
|
|
>
|
|
<div slot="icon">
|
|
<span v-if="showIcon && isAndroid" class="van-address-edit-detail__finish-edit">完成</span>
|
|
<van-icon v-else-if="showIcon" name="clear" />
|
|
</div>
|
|
</van-field>
|
|
|
|
<van-cell-group class="van-address-edit-detail__suggest-list" v-if="showSearchList">
|
|
<van-cell
|
|
v-for="express in searchResult"
|
|
:key="express.name + express.address"
|
|
class="van-address-edit-detail__suggest-item"
|
|
@click="onSuggestSelect(express)">
|
|
<van-icon name="location" class="van-address-edit-detail__location" />
|
|
<div class="van-address-edit-detail__item-info">
|
|
<p class="van-address-edit-detail__title">{{ express.name }}</p>
|
|
<p class="van-address-edit-detail__subtitle">{{ express.address }}</p>
|
|
</div>
|
|
</van-cell>
|
|
</van-cell-group>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import Icon from '../icon';
|
|
import Field from '../field';
|
|
import Cell from '../cell';
|
|
import CellGroup from '../cell-group';
|
|
import isAndroid from '../utils/env/is-android';
|
|
|
|
export default {
|
|
name: 'van-address-edit-detail',
|
|
|
|
components: {
|
|
[Field.name]: Field,
|
|
[Icon.name]: Icon,
|
|
[Cell.name]: Cell,
|
|
[CellGroup.name]: CellGroup
|
|
},
|
|
|
|
props: {
|
|
value: {},
|
|
isError: Boolean,
|
|
searchResult: Array,
|
|
showSearchResult: Boolean
|
|
},
|
|
|
|
data() {
|
|
return {
|
|
isAndroid: isAndroid(),
|
|
isFocused: false
|
|
};
|
|
},
|
|
|
|
computed: {
|
|
showSearchList() {
|
|
return this.showSearchResult && this.isFocused && this.searchResult.length > 0;
|
|
},
|
|
|
|
showIcon() {
|
|
return this.value && this.isFocused;
|
|
}
|
|
},
|
|
|
|
methods: {
|
|
handleFocus(e) {
|
|
this.isFocused = true;
|
|
this.$emit('focus', e);
|
|
this.$refs.root.scrollIntoView();
|
|
},
|
|
|
|
handleBlur(e) {
|
|
// 等待其他地方点击事件完了以后，再触发
|
|
setTimeout(() => {
|
|
this.isFocused = false;
|
|
this.$emit('blur', e);
|
|
}, 100);
|
|
},
|
|
|
|
onIconClick() {
|
|
if (this.isAndroid) {
|
|
this.$refs.root.querySelector('.van-field__control').blur();
|
|
} else {
|
|
this.$emit('input', '');
|
|
}
|
|
},
|
|
|
|
onSuggestSelect(express) {
|
|
this.$emit('input', `${express.address || ''} ${express.name || ''}`.trim());
|
|
}
|
|
}
|
|
};
|
|
</script>
|