alighasami/vant
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

[new feature] add i18n support (#310)

Browse Source 
* 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

* [new feature] add i18n support

* feat: Extract demos from markdown

* feat: Base components demos

* [new feature] complete demo extract & translate

* [fix] text cases

* fix: add deepAssign test cases

* fix: changelog detail

* [new feature] AddressEdit support i18n
This commit is contained in:
neverland
2017-11-15 20:08:51 -06:00
committed by GitHub
parent 05abf0d509
commit d8b6ad7d54
210 changed files with 5561 additions and 5528 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/address-edit/Detail.vue
+7 -4
View File
@@ -1,8 +1,8 @@
<template>
<div ref="root">
<van-field
label="详细地址"
placeholder="如街道、楼层、门牌号等"
:label="$t('label.address')"
:placeholder="$t('placeholder.address')"
maxlength="200"
type="textarea"
autosize
@@ -15,7 +15,7 @@
@blur="handleBlur"
>
<div slot="icon">
<span v-if="showIcon && isAndroid" class="van-address-edit-detail__finish-edit">完成</span>
<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>
@@ -42,10 +42,13 @@ import Field from '../field';
import Cell from '../cell';
import CellGroup from '../cell-group';
import isAndroid from '../utils/env/is-android';
import { i18n } from '../locale';
export default {
name: 'van-address-edit-detail',
mixins: [i18n],
components: {
[Field.name]: Field,
[Icon.name]: Icon,
@@ -85,7 +88,7 @@ export default {
},
handleBlur(e) {
// 等待其他地方点击事件完了以后，再触发
// wait for click event finished
setTimeout(() => {
this.isFocused = false;
this.$emit('blur', e);
packages/address-edit/index.vue
+35 -27
View File
@@ -3,24 +3,24 @@
<van-cell-group>
<van-field
maxlength="15"
placeholder="名字"
:label="addressText + '人'"
:placeholder="$t('placeholder.name')"
:label="$t('label.name', computedAddressText)"
v-model="currentInfo.name"
:error="errorInfo.name"
@focus="onFocus('name')"
/>
<van-field
type="tel"
label="联系电话"
placeholder="手机或固定电话"
:label="$t('label.tel')"
:placeholder="$t('placeholder.tel')"
v-model="currentInfo.tel"
:error="errorInfo.tel"
@focus="onFocus('tel')"
/>
<van-cell class="van-address-edit__area" title="收件地区" @click="showAreaSelect = true">
<span>{{ currentInfo.province || '选择省' }}</span>
<span>{{ currentInfo.city || '选择市' }}</span>
<span>{{ currentInfo.county || '选择区' }}</span>
<van-cell class="van-address-edit__area" :title="$t('areaTitle')" @click="showAreaSelect = true">
<span>{{ currentInfo.province || $t('placeholder.province') }}</span>
<span>{{ currentInfo.city || $t('placeholder.city') }}</span>
<span>{{ currentInfo.county || $t('placeholder.county') }}</span>
</van-cell>
<van-address-edit-detail
:value="currentInfo.address_detail"
@@ -35,8 +35,8 @@
v-if="showPostal"
v-show="!hideBottomFields"
type="tel"
label="邮政编码"
placeholder="邮政编码(选填)"
:label="$t('label.postal')"
:placeholder="$t('placeholder.postal')"
v-model="currentInfo.postal_code"
maxlength="6"
class="van-hairline--top"
@@ -47,12 +47,16 @@
v-if="showSetDefault"
v-show="!hideBottomFields"
v-model="currentInfo.is_default"
:title="`设为默认${addressText}地址`"
:title="$t('defaultAddress', computedAddressText)"
/>
</van-cell-group>
<div v-show="!hideBottomFields" class="van-address-edit__buttons">
<van-button block :loading="isSaving" @click="onSaveAddress" type="primary">保存</van-button>
<van-button block :loading="isDeleting" @click="onDeleteAddress" v-if="isEdit">删除{{ addressText }}地址</van-button>
<van-button block :loading="isSaving" @click="onSaveAddress" type="primary">
{{ $t('save') }}
</van-button>
<van-button block :loading="isDeleting" @click="onDeleteAddress" v-if="isEdit">
{{ $t('deleteAddress', computedAddressText) }}
</van-button>
</div>
<van-popup v-model="showAreaSelect" position="bottom">
<van-area
@@ -77,10 +81,13 @@ import Area from '../area';
import Detail from './Detail';
import SwitchCell from '../switch-cell';
import validateMobile from '../utils/validate/mobile';
import { i18n } from '../locale';
export default {
name: 'van-address-edit',
mixins: [i18n],
components: {
[Field.name]: Field,
[Cell.name]: Cell,
@@ -99,10 +106,7 @@ export default {
showPostal: Boolean,
showSetDefault: Boolean,
showSearchResult: Boolean,
addressText: {
type: String,
default: '收货'
},
addressText: String,
addressInfo: {
type: Object,
default: () => ({
@@ -145,13 +149,16 @@ export default {
this.isEdit = !!val.id;
},
deep: true
}
},
},
computed: {
// 当地址输入框开启了搜索，并且开始搜索后，隐藏所有地址详情以外的输入框
// hide bottom field when use search && detail get focused
hideBottomFields() {
return this.searchResult.length && this.detailFocused;
},
computedAddressText() {
return this.addressText || this.$t('addressText');
}
},
@@ -172,13 +179,13 @@ export default {
onAreaConfirm(values) {
if (values.length !== 3 || +values[0].code === -1 || +values[1].code === -1 || +values[2].code === -1) {
return Toast('请选择正确的收件地区');
return Toast(this.$t('areaWrong'));
}
Object.assign(this.currentInfo, {
province: values[0].name,
city: values[1].name,
county: values[2].name,
'area_code': values[2].code
area_code: values[2].code
});
this.showAreaSelect = false;
},
@@ -211,18 +218,19 @@ export default {
getErrorMessageByKey(key) {
const value = this.currentInfo[key];
const { $t } = this;
switch (key) {
case 'name':
return value ? value.length <= 15 ? '' : '名字过长，请重新输入' : '请填写名字';
return value ? value.length <= 15 ? '' : $t('nameOverlimit') : $t('nameEmpty');
case 'tel':
return validateMobile(value) ? '' : '请填写正确的手机号码或电话号码';
return validateMobile(value) ? '' : $t('telWrong');
case 'area_code':
return value ? +value !== -1 ? '' : '请选择正确的收件地区' : '请选择收件地区';
return value ? +value !== -1 ? '' : $t('areaWrong') : $t('areaEmpty');
case 'address_detail':
return value ? value.length <= 200 ? '' : '详细地址不能超过200个字符' : '请填写详细地址';
return value ? value.length <= 200 ? '' : $t('addressOverlimit') : $t('addressEmpty');
case 'postal_code':
return value && !/^\d{6}$/.test(value) ? '邮政编码格式不正确' : '';
return value && !/^\d{6}$/.test(value) ? $t('postalEmpty') : '';
}
},
@@ -232,7 +240,7 @@ export default {
}
Dialog.confirm({
message: `确定要删除这个${this.addressText}地址么`
message: this.$t('confirmDelete', this.computedAddressText)
}).then(() => {
this.$emit('delete', this.currentInfo);
});
packages/address-edit/theme.md
+55
View File
@@ -0,0 +1,55 @@
## 定制主题
`Vant`提供了一套默认主题，CSS 命名采用 BEM 的风格，方便使用者覆盖样式。如果你想完全替换主题色或者其他样式，可以使用下面的方法：
### 方案一. PostCSS 插件
在项目中直接引入组件对应的 postcss 源代码，并通过 postcss 插件 [postcss-theme-variables](https://www.npmjs.com/package/postcss-theme-variables) 替换颜色变量，步骤如下：
```javascript
// 引入基础样式
import 'vant/packages/vant-css/src/base.css';
// 引入组价对应的样式
import 'vant/packages/vant-css/src/button.css';
import 'vant/packages/vant-css/src/checkbox.css';
```
接着在 postcss.config.js 中引入所需的 postcss 插件，并根据项目需求配置颜色变量，所有可用的颜色变量请参考 [配置文件](https://github.com/youzan/vant/blob/dev/packages/vant-css/src/common/var.css)
```javascript
module.exports = {
plugins: [
require('postcss-easy-import')({
extensions: ['pcss', 'css']
}),
require('postcss-theme-variables')({
vars: {
red: '#F60',
gray: '#CCC',
blue: '#03A9F4'
},
prefix: '$'
}),
require('precss')(),
require('postcss-calc')(),
require('autoprefixer')({
browsers: ['Android >= 4.0', 'iOS >= 7']
})
]
};
```
### 方案二. 本地构建
可以通过在本地构建 vant-css 的方式生成所需的主题
```bash
# 克隆仓库
git clone git@github.com:youzan/vant.git
cd packages/vant-css
```
在本地 vant-css 仓库中，修改 src/common/var.css 中的颜色变量，然后执行以下构建命令，即可生成对应的样式文件
```bash
npm run build
```