[new feature] add i18n support (#310)

* 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

packages/search/index.vue

@@ -3,22 +3,23 @@
     class="van-search"
     :class="{ 'van-search--show-action': showAction }"
     :style="{ 'background-color': background }">
-    <div class="van-search__input-wrap" v-clickoutside="handleClickoutside">
-      <van-icon name="search"></van-icon>
+    <div class="van-search__input-wrap" v-clickoutside="onClickoutside">
+      <van-icon name="search" />
       <input
         type="search"
         class="van-search__input"
         v-refocus="focusStatus"
         :value="value"
         :placeholder="placeholder"
-        @input="handleInput"
-        @focus="handleFocus"
-        @keypress.enter.prevent="handleSearch">
-      <van-icon name="clear" @click="handleClean" v-show="isFocus"></van-icon>
+        @input="onInput"
+        @focus="onFocus"
+        @keypress.enter.prevent="onSearch"
+      >
+      <van-icon name="clear" @click="onClean" v-show="isFocus" />
     </div>
     <div class="van-search__action" v-if="showAction">
       <slot name="action">
-        <div class="van-search__action-text" @click="handleBack">取消</div>
+        <div class="van-search__action-text" @click="onBack">{{ $t('cancel') }}</div>
       </slot>
     </div>
   </div>
@@ -27,17 +28,20 @@
 <script>
 import Icon from '../icon';
 import Clickoutside from '../utils/clickoutside';
+import { i18n } from '../locale';
 
 export default {
   name: 'van-search',
 
+  mixins: [i18n],
+
   components: {
     [Icon.name]: Icon
   },
 
   props: {
-    placeholder: String,
     value: String,
+    placeholder: String,
     showAction: {
       type: Boolean,
       default: false
@@ -50,8 +54,8 @@ export default {
 
   data() {
     return {
-      focusStatus: false,
-      isFocus: false
+      isFocus: false,
+      focusStatus: false
     };
   },
 
@@ -67,48 +71,37 @@ export default {
   },
 
   methods: {
-    /**
-     * 进入input焦点，出现close和取消
-     */
-    handleFocus() {
+    onFocus() {
       this.isFocus = true;
     },
 
-    handleInput(event) {
+    onInput(event) {
       this.$emit('input', event.target.value);
     },
 
-    /**
-     * 点击close后清空value后，再聚焦input框
-     */
-    handleClean() {
+    // refocus after click close icon
+    onClean() {
       this.$emit('input', '');
       this.focusStatus = true;
 
-      // 保证多次点击 clean 后，仍能触发 refocus
+      // ensure refocus can work after click clean icon
       this.$nextTick(() => {
         this.focusStatus = false;
       });
     },
 
-    /**
-     * 点击取消后，清空所有回复最初状态
-     */
-    handleBack() {
+    onBack() {
       this.$emit('input', '');
       this.$emit('cancel');
     },
 
-    /**
-     * input输入回车后，发送回调
-     */
-    handleSearch(e) {
+    onSearch(e) {
       e.preventDefault();
       this.$emit('search', this.value);
       return false;
     },
 
-    handleClickoutside() {
+    onClickoutside() {
       this.isFocus = false;
       this.focusStatus = false;
     }