[Improvement] Field: support clearable (#1309)
This commit is contained in:
neverland
@@ -5,18 +5,22 @@
|
||||
ref="field"
|
||||
rows="1"
|
||||
autosize
|
||||
:clearable="!isAndroid"
|
||||
type="textarea"
|
||||
maxlength="200"
|
||||
:value="value"
|
||||
:error="error"
|
||||
:label="$t('label')"
|
||||
:placeholder="$t('placeholder')"
|
||||
@click-icon="onClickIcon"
|
||||
>
|
||||
<div slot="icon">
|
||||
<span v-if="showIcon && isAndroid" :class="b('finish')">{{ $t('complete') }}</span>
|
||||
<icon v-else-if="showIcon" name="clear" />
|
||||
</div>
|
||||
<span
|
||||
v-if="showIcon && isAndroid"
|
||||
slot="icon"
|
||||
:class="b('finish')"
|
||||
@click="$refs.field.blur()"
|
||||
>
|
||||
{{ $t('complete') }}
|
||||
</span>
|
||||
</field>
|
||||
<cell
|
||||
v-if="showSearchList"
|
||||
@@ -66,14 +70,6 @@ export default create({
|
||||
},
|
||||
|
||||
methods: {
|
||||
onClickIcon() {
|
||||
if (this.isAndroid) {
|
||||
this.$refs.field.blur();
|
||||
} else {
|
||||
this.$emit('input', '');
|
||||
}
|
||||
},
|
||||
|
||||
onSelect(express) {
|
||||
this.$emit('input', `${express.address || ''} ${express.name || ''}`.trim());
|
||||
this.$emit('select-search', express);
|
||||
|
||||
@@ -11,9 +11,12 @@ exports[`renders demo correctly 1`] = `
|
||||
<!---->
|
||||
</div>
|
||||
<div class="van-cell__value">
|
||||
<input type="text" maxlength="15" placeholder="名字" value="" class="van-field__control">
|
||||
<!---->
|
||||
<!---->
|
||||
<div class="van-field__body">
|
||||
<input type="text" maxlength="15" placeholder="名字" value="" class="van-field__control">
|
||||
<!---->
|
||||
<!---->
|
||||
<!---->
|
||||
</div>
|
||||
<!---->
|
||||
</div>
|
||||
<!---->
|
||||
@@ -24,9 +27,12 @@ exports[`renders demo correctly 1`] = `
|
||||
<!---->
|
||||
</div>
|
||||
<div class="van-cell__value">
|
||||
<input type="tel" placeholder="手机或固定电话" value="" class="van-field__control">
|
||||
<!---->
|
||||
<!---->
|
||||
<div class="van-field__body">
|
||||
<input type="tel" placeholder="手机或固定电话" value="" class="van-field__control">
|
||||
<!---->
|
||||
<!---->
|
||||
<!---->
|
||||
</div>
|
||||
<!---->
|
||||
</div>
|
||||
<!---->
|
||||
@@ -37,26 +43,28 @@ exports[`renders demo correctly 1`] = `
|
||||
<!---->
|
||||
</div>
|
||||
<div class="van-cell__value">
|
||||
<input type="text" readonly="readonly" placeholder="收件地区" value="" class="van-field__control">
|
||||
<!---->
|
||||
<!---->
|
||||
<div class="van-field__body">
|
||||
<input type="text" readonly="readonly" placeholder="收件地区" value="" class="van-field__control">
|
||||
<!---->
|
||||
<!---->
|
||||
<!---->
|
||||
</div>
|
||||
<!---->
|
||||
</div>
|
||||
<!---->
|
||||
</div>
|
||||
<div>
|
||||
<div rows="1" maxlength="200" placeholder="如街道、楼层、门牌号等" class="van-cell van-hairline van-field van-field--has-icon">
|
||||
<div rows="1" maxlength="200" placeholder="如街道、楼层、门牌号等" class="van-cell van-hairline van-field">
|
||||
<!---->
|
||||
<div class="van-cell__title"><span>详细地址</span>
|
||||
<!---->
|
||||
</div>
|
||||
<div class="van-cell__value">
|
||||
<textarea rows="1" maxlength="200" placeholder="如街道、楼层、门牌号等" class="van-field__control"></textarea>
|
||||
<!---->
|
||||
<div class="van-field__icon">
|
||||
<div>
|
||||
<!---->
|
||||
</div>
|
||||
<div class="van-field__body">
|
||||
<textarea rows="1" maxlength="200" placeholder="如街道、楼层、门牌号等" class="van-field__control"></textarea>
|
||||
<!---->
|
||||
<!---->
|
||||
<!---->
|
||||
</div>
|
||||
<!---->
|
||||
</div>
|
||||
@@ -69,9 +77,12 @@ exports[`renders demo correctly 1`] = `
|
||||
<!---->
|
||||
</div>
|
||||
<div class="van-cell__value">
|
||||
<input type="tel" maxlength="6" placeholder="邮政编码" value="" class="van-field__control">
|
||||
<!---->
|
||||
<!---->
|
||||
<div class="van-field__body">
|
||||
<input type="tel" maxlength="6" placeholder="邮政编码" value="" class="van-field__control">
|
||||
<!---->
|
||||
<!---->
|
||||
<!---->
|
||||
</div>
|
||||
<!---->
|
||||
</div>
|
||||
<!---->
|
||||
|
||||
@@ -9,9 +9,12 @@ exports[`create a AddressEdit 1`] = `
|
||||
<!---->
|
||||
</div>
|
||||
<div class="van-cell__value">
|
||||
<input type="text" maxlength="15" placeholder="名字" value="" class="van-field__control">
|
||||
<!---->
|
||||
<!---->
|
||||
<div class="van-field__body">
|
||||
<input type="text" maxlength="15" placeholder="名字" value="" class="van-field__control">
|
||||
<!---->
|
||||
<!---->
|
||||
<!---->
|
||||
</div>
|
||||
<!---->
|
||||
</div>
|
||||
<!---->
|
||||
@@ -22,9 +25,12 @@ exports[`create a AddressEdit 1`] = `
|
||||
<!---->
|
||||
</div>
|
||||
<div class="van-cell__value">
|
||||
<input type="tel" placeholder="手机或固定电话" value="" class="van-field__control">
|
||||
<!---->
|
||||
<!---->
|
||||
<div class="van-field__body">
|
||||
<input type="tel" placeholder="手机或固定电话" value="" class="van-field__control">
|
||||
<!---->
|
||||
<!---->
|
||||
<!---->
|
||||
</div>
|
||||
<!---->
|
||||
</div>
|
||||
<!---->
|
||||
@@ -35,26 +41,28 @@ exports[`create a AddressEdit 1`] = `
|
||||
<!---->
|
||||
</div>
|
||||
<div class="van-cell__value">
|
||||
<input type="text" readonly="readonly" placeholder="收件地区" value="" class="van-field__control">
|
||||
<!---->
|
||||
<!---->
|
||||
<div class="van-field__body">
|
||||
<input type="text" readonly="readonly" placeholder="收件地区" value="" class="van-field__control">
|
||||
<!---->
|
||||
<!---->
|
||||
<!---->
|
||||
</div>
|
||||
<!---->
|
||||
</div>
|
||||
<!---->
|
||||
</div>
|
||||
<div>
|
||||
<div rows="1" maxlength="200" placeholder="如街道、楼层、门牌号等" class="van-cell van-hairline van-field van-field--has-icon">
|
||||
<div rows="1" maxlength="200" placeholder="如街道、楼层、门牌号等" class="van-cell van-hairline van-field">
|
||||
<!---->
|
||||
<div class="van-cell__title"><span>详细地址</span>
|
||||
<!---->
|
||||
</div>
|
||||
<div class="van-cell__value">
|
||||
<textarea rows="1" maxlength="200" placeholder="如街道、楼层、门牌号等" class="van-field__control"></textarea>
|
||||
<!---->
|
||||
<div class="van-field__icon">
|
||||
<div>
|
||||
<!---->
|
||||
</div>
|
||||
<div class="van-field__body">
|
||||
<textarea rows="1" maxlength="200" placeholder="如街道、楼层、门牌号等" class="van-field__control"></textarea>
|
||||
<!---->
|
||||
<!---->
|
||||
<!---->
|
||||
</div>
|
||||
<!---->
|
||||
</div>
|
||||
@@ -98,9 +106,12 @@ exports[`create a AddressEdit with props 1`] = `
|
||||
<!---->
|
||||
</div>
|
||||
<div class="van-cell__value">
|
||||
<input type="text" maxlength="15" placeholder="名字" value="测试" class="van-field__control">
|
||||
<!---->
|
||||
<!---->
|
||||
<div class="van-field__body">
|
||||
<input type="text" maxlength="15" placeholder="名字" value="测试" class="van-field__control">
|
||||
<!---->
|
||||
<!---->
|
||||
<!---->
|
||||
</div>
|
||||
<!---->
|
||||
</div>
|
||||
<!---->
|
||||
@@ -111,9 +122,12 @@ exports[`create a AddressEdit with props 1`] = `
|
||||
<!---->
|
||||
</div>
|
||||
<div class="van-cell__value">
|
||||
<input type="tel" placeholder="手机或固定电话" value="13000000000" class="van-field__control">
|
||||
<!---->
|
||||
<!---->
|
||||
<div class="van-field__body">
|
||||
<input type="tel" placeholder="手机或固定电话" value="13000000000" class="van-field__control">
|
||||
<!---->
|
||||
<!---->
|
||||
<!---->
|
||||
</div>
|
||||
<!---->
|
||||
</div>
|
||||
<!---->
|
||||
@@ -124,26 +138,28 @@ exports[`create a AddressEdit with props 1`] = `
|
||||
<!---->
|
||||
</div>
|
||||
<div class="van-cell__value">
|
||||
<input type="text" readonly="readonly" placeholder="收件地区" value="北京市 北京市 朝阳区" class="van-field__control">
|
||||
<!---->
|
||||
<!---->
|
||||
<div class="van-field__body">
|
||||
<input type="text" readonly="readonly" placeholder="收件地区" value="北京市 北京市 朝阳区" class="van-field__control">
|
||||
<!---->
|
||||
<!---->
|
||||
<!---->
|
||||
</div>
|
||||
<!---->
|
||||
</div>
|
||||
<!---->
|
||||
</div>
|
||||
<div>
|
||||
<div rows="1" maxlength="200" placeholder="如街道、楼层、门牌号等" class="van-cell van-hairline van-field van-field--has-icon">
|
||||
<div rows="1" maxlength="200" placeholder="如街道、楼层、门牌号等" class="van-cell van-hairline van-field">
|
||||
<!---->
|
||||
<div class="van-cell__title"><span>详细地址</span>
|
||||
<!---->
|
||||
</div>
|
||||
<div class="van-cell__value">
|
||||
<textarea rows="1" maxlength="200" placeholder="如街道、楼层、门牌号等" class="van-field__control">详细地址</textarea>
|
||||
<!---->
|
||||
<div class="van-field__icon">
|
||||
<div>
|
||||
<!---->
|
||||
</div>
|
||||
<div class="van-field__body">
|
||||
<textarea rows="1" maxlength="200" placeholder="如街道、楼层、门牌号等" class="van-field__control">详细地址</textarea>
|
||||
<!---->
|
||||
<!---->
|
||||
<!---->
|
||||
</div>
|
||||
<!---->
|
||||
</div>
|
||||
@@ -156,9 +172,12 @@ exports[`create a AddressEdit with props 1`] = `
|
||||
<!---->
|
||||
</div>
|
||||
<div class="van-cell__value">
|
||||
<input type="tel" maxlength="6" placeholder="邮政编码" value="10000" class="van-field__control">
|
||||
<!---->
|
||||
<!---->
|
||||
<div class="van-field__body">
|
||||
<input type="tel" maxlength="6" placeholder="邮政编码" value="10000" class="van-field__control">
|
||||
<!---->
|
||||
<!---->
|
||||
<!---->
|
||||
</div>
|
||||
<!---->
|
||||
</div>
|
||||
<!---->
|
||||
|
||||
@@ -2,7 +2,6 @@
|
||||
import { mount } from '@vue/test-utils';
|
||||
import { renderToString } from '@vue/server-test-utils';
|
||||
import AddressEdit from '../';
|
||||
import AddressDetail from '../Detail';
|
||||
import areaList from '../../area/demo/area.simple';
|
||||
import { later, transitionStub } from '../../../test/utils';
|
||||
|
||||
@@ -151,38 +150,6 @@ test('on change detail', () => {
|
||||
expect(wrapper.emitted('change-detail')[0][0]).toEqual('123');
|
||||
});
|
||||
|
||||
test('clear address detail in ios', () => {
|
||||
const wrapper = mount(AddressEdit, {
|
||||
propsData: {
|
||||
addressInfo: {
|
||||
address_detail: '123'
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
wrapper.vm.isAndroid = false;
|
||||
wrapper.findAll('.van-field__control').at(2).trigger('focus');
|
||||
wrapper.find('.van-field__icon').trigger('touchstart');
|
||||
expect(wrapper.vm.data.address_detail).toEqual('');
|
||||
});
|
||||
|
||||
test('finish edit address detail in android', () => {
|
||||
const wrapper = mount(AddressDetail, {
|
||||
propsData: {
|
||||
value: '123'
|
||||
}
|
||||
});
|
||||
|
||||
wrapper.vm.$on('input', val => {
|
||||
wrapper.vm.value = val;
|
||||
});
|
||||
|
||||
wrapper.setData({ isAndroid: true });
|
||||
wrapper.find('.van-field__control').trigger('focus');
|
||||
wrapper.find('.van-field__icon').trigger('touchstart');
|
||||
expect(wrapper.vm.value).toEqual('123');
|
||||
});
|
||||
|
||||
test('watch address info', () => {
|
||||
const wrapper = mount(AddressEdit);
|
||||
wrapper.setProps({ addressInfo: { name: '123' }});
|
||||
|
||||
Reference in New Issue
Block a user