mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
0d686313e0
* fix: Tabbar icon line-height * [new feature] progress add showPivot prop * [new feature] TabItem support vue-router * [new feature] update document header style * [Doc] add toast english ducoment * [bugfix] Search box-sizing wrong * [Doc] update vant-demo respo * [Doc] translate theme & demo pages * [Doc] add Internationalization document * [bugfix] remove unnecessary props * [fix] optimize clickoutside * [new feature] optimize find-parent * [new feature]: change document title accordinng to language * [new feature] Pagination code review * [improvement] adjust icon-font unicode * [improvement] Icon spinner color inherit * [improvement] icon default width * [bugfix] DateTimePicker validate date props * [bugfix] Tab item text ellipsis * [improvement] optimize single line ellipsis * [Improvement] optimzie staticClass * [Improvement] Button: use sfc instread of jsx * [Improvement] update actionsheet close icon style * fix: yarn.lock * fix: icon test cases * [bugfix] errors during ssr
112 lines
2.6 KiB
Vue
112 lines
2.6 KiB
Vue
<template>
|
|
<div ref="root">
|
|
<van-field
|
|
:label="$t('label.address')"
|
|
:placeholder="$t('placeholder.address')"
|
|
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">{{ $t('complete') }}</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';
|
|
import { i18n } from '../locale';
|
|
|
|
export default {
|
|
name: 'van-address-edit-detail',
|
|
|
|
mixins: [i18n],
|
|
|
|
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) {
|
|
// wait for click event finished
|
|
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>
|