[improvement] AddressEdit: remove border

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

View File

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

View File

@ -4,108 +4,106 @@ exports[`renders demo correctly 1`] = `
<div> <div>
<div> <div>
<div class="van-address-edit"> <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> </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> </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> </div>
<div class="van-cell van-address-edit-detail"> <!---->
<!----> </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__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>
<!---->
</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> </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> <div title="设为默认收货地址" class="van-switch" style="font-size:26px;">
<div class="van-cell__value"> <div class="van-switch__node">
<div class="van-field__body">
<input type="tel" maxlength="6" placeholder="邮政编码" value="" class="van-field__control">
<!---->
<!---->
<!----> <!---->
</div> </div>
<!---->
</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> </div>
<div class="van-address-edit__buttons"> <div class="van-address-edit__buttons">
<button class="van-button van-button--danger van-button--normal van-button--block"><span class="van-button__text"> <button class="van-button van-button--danger van-button--normal van-button--block"><span class="van-button__text">

View File

@ -2,81 +2,79 @@
exports[`create a AddressEdit 1`] = ` exports[`create a AddressEdit 1`] = `
<div class="van-address-edit"> <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>
<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-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>
<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"> <div class="van-address-edit__buttons">
<button class="van-button van-button--danger van-button--normal van-button--block"><span class="van-button__text"> <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`] = ` exports[`create a AddressEdit with props 1`] = `
<div class="van-address-edit"> <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> </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> </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> </div>
<div class="van-cell van-address-edit-detail"> <!---->
<!----> </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__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>
<!---->
</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> </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> <div title="设为默认收货地址" class="van-switch van-switch--on" style="font-size:26px;">
<div class="van-cell__value"> <div class="van-switch__node">
<div class="van-field__body">
<input type="tel" maxlength="6" placeholder="邮政编码" value="10000" class="van-field__control">
<!---->
<!---->
<!----> <!---->
</div> </div>
<!---->
</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> </div>
<div class="van-address-edit__buttons"> <div class="van-address-edit__buttons">
<button class="van-button van-button--danger van-button--normal van-button--block"><span class="van-button__text"> <button class="van-button van-button--danger van-button--normal van-button--block"><span class="van-button__text">