blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-06 03:57:59 +08:00
Code Issues Projects Releases Wiki Activity

[improvement] AddressEdit: remove border

Browse Source
This commit is contained in:
陈嘉涵 2018-11-01 10:16:31 +08:00
parent f55c6fc7dd
commit 5b2315fb3b
3 changed files with 263 additions and 271 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

116
packages/address-edit/index.vue
View File

@ -1,64 +1,62 @@
<template>
<div :class="b()">
<cell-group>
<field
v-model="data.name"
clearable
:label="$t('name')"
:placeholder="$t('namePlaceholder')"
:error="errorInfo.name"
@focus="onFocus('name')"
/>
<field
v-model="data.tel"
clearable
type="tel"
:label="$t('tel')"
:placeholder="$t('telPlaceholder')"
:error="errorInfo.tel"
@focus="onFocus('tel')"
/>
<field
v-show="showArea"
readonly
:label="$t('area')"
:placeholder="$t('areaPlaceholder')"
:value="areaText"
@click="showAreaPopup = true"
/>
<address-edit-detail
v-show="showDetail"
:focused="detailFocused"
:value="data.addressDetail"
:error="errorInfo.addressDetail"
:detail-rows="detailRows"
:search-result="searchResult"
:show-search-result="showSearchResult"
@focus="onFocus('addressDetail')"
@blur="detailFocused = false"
@input="onChangeDetail"
@select-search="$emit('select-search', $event)"
/>
<field
v-if="showPostal"
v-show="!hideBottomFields"
v-model="data.postalCode"
type="tel"
maxlength="6"
:label="$t('postal')"
:placeholder="$t('postal')"
:error="errorInfo.postalCode"
@focus="onFocus('postalCode')"
/>
<slot />
<switch-cell
v-if="showSetDefault"
v-show="!hideBottomFields"
v-model="data.isDefault"
:title="$t('defaultAddress')"
@change="$emit('change-default', $event)"
/>
</cell-group>
<field
v-model="data.name"
clearable
:label="$t('name')"
:placeholder="$t('namePlaceholder')"
:error="errorInfo.name"
@focus="onFocus('name')"
/>
<field
v-model="data.tel"
clearable
type="tel"
:label="$t('tel')"
:placeholder="$t('telPlaceholder')"
:error="errorInfo.tel"
@focus="onFocus('tel')"
/>
<field
v-show="showArea"
readonly
:label="$t('area')"
:placeholder="$t('areaPlaceholder')"
:value="areaText"
@click="showAreaPopup = true"
/>
<address-edit-detail
v-show="showDetail"
:focused="detailFocused"
:value="data.addressDetail"
:error="errorInfo.addressDetail"
:detail-rows="detailRows"
:search-result="searchResult"
:show-search-result="showSearchResult"
@focus="onFocus('addressDetail')"
@blur="detailFocused = false"
@input="onChangeDetail"
@select-search="$emit('select-search', $event)"
/>
<field
v-if="showPostal"
v-show="!hideBottomFields"
v-model="data.postalCode"
type="tel"
maxlength="6"
:label="$t('postal')"
:placeholder="$t('postal')"
:error="errorInfo.postalCode"
@focus="onFocus('postalCode')"
/>
<slot />
<switch-cell
v-if="showSetDefault"
v-show="!hideBottomFields"
v-model="data.isDefault"
:title="$t('defaultAddress')"
@change="$emit('change-default', $event)"
/>
<div v-show="!hideBottomFields" :class="b('buttons')">
<van-button block :loading="isSaving" @click="onSave" type="danger">

138
packages/address-edit/test/__snapshots__/demo.spec.js.snap
View File

@ -4,108 +4,106 @@ exports[`renders demo correctly 1`] = `
<div>
<div>
<div class="van-address-edit">
<div class="van-cell-group van-hairline--top-bottom">
<div placeholder="收货人姓名" class="van-cell van-field">
<div placeholder="收货人姓名" class="van-cell van-field">
<!---->
<div class="van-cell__title"><span>姓名</span>
<!---->
<div class="van-cell__title"><span>姓名</span>
</div>
<div class="van-cell__value">
<div class="van-field__body">
<input type="text" placeholder="收货人姓名" value="" class="van-field__control">
<!---->
<!---->
</div>
<div class="van-cell__value">
<div class="van-field__body">
<input type="text" placeholder="收货人姓名" value="" class="van-field__control">
<!---->
<!---->
<!---->
</div>
<!---->
</div>
<!---->
</div>
<div placeholder="收货人手机号" class="van-cell van-field">
<!---->
</div>
<div placeholder="收货人手机号" class="van-cell van-field">
<!---->
<div class="van-cell__title"><span>电话</span>
<!---->
<div class="van-cell__title"><span>电话</span>
</div>
<div class="van-cell__value">
<div class="van-field__body">
<input type="tel" placeholder="收货人手机号" value="" class="van-field__control">
<!---->
<!---->
</div>
<div class="van-cell__value">
<div class="van-field__body">
<input type="tel" placeholder="收货人手机号" value="" class="van-field__control">
<!---->
<!---->
<!---->
</div>
<!---->
</div>
<!---->
</div>
<div placeholder="选择省 / 市 / 区" class="van-cell van-field">
<!---->
</div>
<div placeholder="选择省 / 市 / 区" class="van-cell van-field">
<!---->
<div class="van-cell__title"><span>地区</span>
<!---->
<div class="van-cell__title"><span>地区</span>
</div>
<div class="van-cell__value">
<div class="van-field__body">
<input type="text" readonly="readonly" placeholder="选择省 / 市 / 区" value="" class="van-field__control">
<!---->
<!---->
</div>
<div class="van-cell__value">
<div class="van-field__body">
<input type="text" readonly="readonly" placeholder="选择省 / 市 / 区" value="" class="van-field__control">
<!---->
<!---->
<!---->
</div>
<!---->
</div>
<!---->
</div>
<div class="van-cell van-address-edit-detail">
<!---->
<!---->
<div class="van-cell__value van-cell__value--alone">
<div rows="1" maxlength="200" placeholder="街道门牌、楼层房间号等信息" class="van-cell van-field">
<!---->
</div>
<div class="van-cell van-address-edit-detail">
<!---->
<!---->
<div class="van-cell__value van-cell__value--alone">
<div rows="1" maxlength="200" placeholder="街道门牌、楼层房间号等信息" class="van-cell van-field">
<!---->
<div class="van-cell__title"><span>详细地址</span>
<!---->
<div class="van-cell__title"><span>详细地址</span>
</div>
<div class="van-cell__value">
<div class="van-field__body">
<textarea rows="1" maxlength="200" placeholder="街道门牌、楼层房间号等信息" class="van-field__control"></textarea>
<!---->
<!---->
</div>
<div class="van-cell__value">
<div class="van-field__body">
<textarea rows="1" maxlength="200" placeholder="街道门牌、楼层房间号等信息" class="van-field__control"></textarea>
<!---->
<!---->
<!---->
</div>
<!---->
</div>
<!---->
</div>
<!---->
</div>
</div>
<!---->
</div>
<div maxlength="6" placeholder="邮政编码" class="van-cell van-field">
<!---->
<div class="van-cell__title"><span>邮政编码</span>
<!---->
</div>
<div class="van-cell__value">
<div class="van-field__body">
<input type="tel" maxlength="6" placeholder="邮政编码" value="" class="van-field__control">
<!---->
<!---->
<!---->
</div>
<!---->
</div>
<div maxlength="6" placeholder="邮政编码" class="van-cell van-field">
<!---->
</div>
<div class="van-cell van-cell--center van-cell--borderless van-switch-cell">
<!---->
<div class="van-cell__title"><span>设为默认收货地址</span>
<!---->
<div class="van-cell__title"><span>邮政编码</span>
<!---->
</div>
<div class="van-cell__value">
<div class="van-field__body">
<input type="tel" maxlength="6" placeholder="邮政编码" value="" class="van-field__control">
<!---->
<!---->
</div>
<div class="van-cell__value">
<div title="设为默认收货地址" class="van-switch" style="font-size:26px;">
<div class="van-switch__node">
<!---->
</div>
<!---->
</div>
<!---->
</div>
<div class="van-cell van-cell--center van-cell--borderless van-switch-cell">
<!---->
<div class="van-cell__title"><span>设为默认收货地址</span>
<!---->
</div>
<div class="van-cell__value">
<div title="设为默认收货地址" class="van-switch" style="font-size:26px;">
<div class="van-switch__node">
<!---->
</div>
</div>
</div>
<!---->
</div>
<!---->
</div>
<div class="van-address-edit__buttons">
<button class="van-button van-button--danger van-button--normal van-button--block"><span class="van-button__text">

280
packages/address-edit/test/__snapshots__/index.spec.js.snap
View File

@ -2,81 +2,79 @@
exports[`create a AddressEdit 1`] = `
<div class="van-address-edit">
<div class="van-cell-group van-hairline--top-bottom">
<div placeholder="收货人姓名" class="van-cell van-field">
<!---->
<div class="van-cell__title"><span>姓名</span>
<!---->
</div>
<div class="van-cell__value">
<div class="van-field__body">
<input type="text" placeholder="收货人姓名" value="" class="van-field__control">
<!---->
<!---->
<!---->
</div>
<!---->
</div>
<!---->
</div>
<div placeholder="收货人手机号" class="van-cell van-field">
<!---->
<div class="van-cell__title"><span>电话</span>
<!---->
</div>
<div class="van-cell__value">
<div class="van-field__body">
<input type="tel" placeholder="收货人手机号" value="" class="van-field__control">
<!---->
<!---->
<!---->
</div>
<!---->
</div>
<!---->
</div>
<div placeholder="选择省 / 市 / 区" class="van-cell van-field">
<!---->
<div class="van-cell__title"><span>地区</span>
<!---->
</div>
<div class="van-cell__value">
<div class="van-field__body">
<input type="text" readonly="readonly" placeholder="选择省 / 市 / 区" value="" class="van-field__control">
<!---->
<!---->
<!---->
</div>
<!---->
</div>
<!---->
</div>
<div class="van-cell van-address-edit-detail">
<!---->
<!---->
<div class="van-cell__value van-cell__value--alone">
<div rows="1" maxlength="200" placeholder="街道门牌、楼层房间号等信息" class="van-cell van-field">
<!---->
<div class="van-cell__title"><span>详细地址</span>
<!---->
</div>
<div class="van-cell__value">
<div class="van-field__body">
<textarea rows="1" maxlength="200" placeholder="街道门牌、楼层房间号等信息" class="van-field__control"></textarea>
<!---->
<!---->
<!---->
</div>
<!---->
</div>
<!---->
</div>
</div>
<!---->
</div>
<div placeholder="收货人姓名" class="van-cell van-field">
<!---->
<div class="van-cell__title"><span>姓名</span>
<!---->
</div>
<div class="van-cell__value">
<div class="van-field__body">
<input type="text" placeholder="收货人姓名" value="" class="van-field__control">
<!---->
<!---->
<!---->
</div>
<!---->
</div>
<!---->
</div>
<div placeholder="收货人手机号" class="van-cell van-field">
<!---->
<div class="van-cell__title"><span>电话</span>
<!---->
</div>
<div class="van-cell__value">
<div class="van-field__body">
<input type="tel" placeholder="收货人手机号" value="" class="van-field__control">
<!---->
<!---->
<!---->
</div>
<!---->
</div>
<!---->
</div>
<div placeholder="选择省 / 市 / 区" class="van-cell van-field">
<!---->
<div class="van-cell__title"><span>地区</span>
<!---->
</div>
<div class="van-cell__value">
<div class="van-field__body">
<input type="text" readonly="readonly" placeholder="选择省 / 市 / 区" value="" class="van-field__control">
<!---->
<!---->
<!---->
</div>
<!---->
</div>
<!---->
</div>
<div class="van-cell van-address-edit-detail">
<!---->
<!---->
<div class="van-cell__value van-cell__value--alone">
<div rows="1" maxlength="200" placeholder="街道门牌、楼层房间号等信息" class="van-cell van-field">
<!---->
<div class="van-cell__title"><span>详细地址</span>
<!---->
</div>
<div class="van-cell__value">
<div class="van-field__body">
<textarea rows="1" maxlength="200" placeholder="街道门牌、楼层房间号等信息" class="van-field__control"></textarea>
<!---->
<!---->
<!---->
</div>
<!---->
</div>
<!---->
</div>
</div>
<!---->
</div>
<!---->
<!---->
<div class="van-address-edit__buttons">
<button class="van-button van-button--danger van-button--normal van-button--block"><span class="van-button__text">
保存
@ -112,108 +110,106 @@ exports[`create a AddressEdit 1`] = `
exports[`create a AddressEdit with props 1`] = `
<div class="van-address-edit">
<div class="van-cell-group van-hairline--top-bottom">
<div placeholder="收货人姓名" class="van-cell van-field">
<div placeholder="收货人姓名" class="van-cell van-field">
<!---->
<div class="van-cell__title"><span>姓名</span>
<!---->
<div class="van-cell__title"><span>姓名</span>
</div>
<div class="van-cell__value">
<div class="van-field__body">
<input type="text" placeholder="收货人姓名" value="测试" class="van-field__control">
<!---->
<!---->
</div>
<div class="van-cell__value">
<div class="van-field__body">
<input type="text" placeholder="收货人姓名" value="测试" class="van-field__control">
<!---->
<!---->
<!---->
</div>
<!---->
</div>
<!---->
</div>
<div placeholder="收货人手机号" class="van-cell van-field">
<!---->
</div>
<div placeholder="收货人手机号" class="van-cell van-field">
<!---->
<div class="van-cell__title"><span>电话</span>
<!---->
<div class="van-cell__title"><span>电话</span>
</div>
<div class="van-cell__value">
<div class="van-field__body">
<input type="tel" placeholder="收货人手机号" value="13000000000" class="van-field__control">
<!---->
<!---->
</div>
<div class="van-cell__value">
<div class="van-field__body">
<input type="tel" placeholder="收货人手机号" value="13000000000" class="van-field__control">
<!---->
<!---->
<!---->
</div>
<!---->
</div>
<!---->
</div>
<div placeholder="选择省 / 市 / 区" class="van-cell van-field">
<!---->
</div>
<div placeholder="选择省 / 市 / 区" class="van-cell van-field">
<!---->
<div class="van-cell__title"><span>地区</span>
<!---->
<div class="van-cell__title"><span>地区</span>
</div>
<div class="van-cell__value">
<div class="van-field__body">
<input type="text" readonly="readonly" placeholder="选择省 / 市 / 区" value="北京市/朝阳区" class="van-field__control">
<!---->
<!---->
</div>
<div class="van-cell__value">
<div class="van-field__body">
<input type="text" readonly="readonly" placeholder="选择省 / 市 / 区" value="北京市/朝阳区" class="van-field__control">
<!---->
<!---->
<!---->
</div>
<!---->
</div>
<!---->
</div>
<div class="van-cell van-address-edit-detail">
<!---->
<!---->
<div class="van-cell__value van-cell__value--alone">
<div rows="1" maxlength="200" placeholder="街道门牌、楼层房间号等信息" class="van-cell van-field">
<!---->
</div>
<div class="van-cell van-address-edit-detail">
<!---->
<!---->
<div class="van-cell__value van-cell__value--alone">
<div rows="1" maxlength="200" placeholder="街道门牌、楼层房间号等信息" class="van-cell van-field">
<!---->
<div class="van-cell__title"><span>详细地址</span>
<!---->
<div class="van-cell__title"><span>详细地址</span>
</div>
<div class="van-cell__value">
<div class="van-field__body">
<textarea rows="1" maxlength="200" placeholder="街道门牌、楼层房间号等信息" class="van-field__control">详细地址</textarea>
<!---->
<!---->
</div>
<div class="van-cell__value">
<div class="van-field__body">
<textarea rows="1" maxlength="200" placeholder="街道门牌、楼层房间号等信息" class="van-field__control">详细地址</textarea>
<!---->
<!---->
<!---->
</div>
<!---->
</div>
<!---->
</div>
<!---->
</div>
</div>
<!---->
</div>
<div maxlength="6" placeholder="邮政编码" class="van-cell van-field">
<!---->
<div class="van-cell__title"><span>邮政编码</span>
<!---->
</div>
<div class="van-cell__value">
<div class="van-field__body">
<input type="tel" maxlength="6" placeholder="邮政编码" value="10000" class="van-field__control">
<!---->
<!---->
<!---->
</div>
<!---->
</div>
<div maxlength="6" placeholder="邮政编码" class="van-cell van-field">
<!---->
</div>
<div class="van-cell van-cell--center van-cell--borderless van-switch-cell">
<!---->
<div class="van-cell__title"><span>设为默认收货地址</span>
<!---->
<div class="van-cell__title"><span>邮政编码</span>
<!---->
</div>
<div class="van-cell__value">
<div class="van-field__body">
<input type="tel" maxlength="6" placeholder="邮政编码" value="10000" class="van-field__control">
<!---->
<!---->
</div>
<div class="van-cell__value">
<div title="设为默认收货地址" class="van-switch van-switch--on" style="font-size:26px;">
<div class="van-switch__node">
<!---->
</div>
<!---->
</div>
<!---->
</div>
<div class="van-cell van-cell--center van-cell--borderless van-switch-cell">
<!---->
<div class="van-cell__title"><span>设为默认收货地址</span>
<!---->
</div>
<div class="van-cell__value">
<div title="设为默认收货地址" class="van-switch van-switch--on" style="font-size:26px;">
<div class="van-switch__node">
<!---->
</div>
</div>
</div>
<!---->
</div>
<!---->
</div>
<div class="van-address-edit__buttons">
<button class="van-button van-button--danger van-button--normal van-button--block"><span class="van-button__text">