build: build 2.0.0-alpha.8

docs/2.0.0/actionSheet.md

@@ -20,40 +20,7 @@
 ```
 :::
 
-``` js
-export default {
-  data() {
-    return {
-      visible1: false,
-      visible2: false,
-      visible3: false,
-      actions1: [{
-        text: '操作一',
-        onClick: () => console.log('action 1'),
-      },{
-        text: '操作二',
-        onClick: () => console.log('action 2'),
-      },{
-        theme: 'error',
-        text: '操作三',
-        onClick: () => console.log('action 3'),
-      }],
-      actions2: [{
-        text: '操作一',
-        onClick: () => console.log('action 1'),
-      },{
-        text: '操作二',
-        onClick: () => console.log('action 2'),
-      }],
-    }
-  },
-  methods: {
-    cancelCb(reason, event){
-      console.log(reason, event)
-    }
-  },
-};
-```
+
 ### Vue Script
 ```javascript
 <script name="vue">

docs/2.0.0/localeProvider.md

@@ -1,8 +1,8 @@
 ## 国际化 LocaleProvider
 
-:::demo 类型
+:::demo 默认语言包
 ```html
-  <za-locale-provider lang="en_US">
+  <za-locale-provider lang="zh_CN">
      <za-search-bar
       shape="round"
       :showCancel="true" 
@@ -12,9 +12,109 @@
 ```
 :::
 
+:::demo 自定义语言包
+```html
+  <za-cell title="切换语言包">
+    <za-select
+      v-model='v1'
+      :data-source='langData'
+      @ok='handleOk'/>
+  </za-cell>
+
+  <za-locale-provider :lang="lang" :locale="locale">
+     <za-search-bar
+      shape="round"
+      :showCancel="true" 
+      ref="searchRef"
+    ></za-search-bar>
+    <za-cell>
+    <za-button slot='description' size='xs' @click='visible6 = true' theme="warning">开启</za-button>
+    警告框 Alert
+    </za-cell>
+
+    <za-cell>
+      <za-button slot='description' size='xs' @click='visible7 = true' theme="warning">开启</za-button>
+      确认框 Confirm
+    </za-cell>
+
+    <za-alert :visible.sync='visible6' radius title="警告" message="这里是警告信息" ></za-alert>
+    <za-confirm :visible.sync='visible7' title="确认信息" message="你确定要这样做吗？" :ok='handleOk2' :cancel='handleCancel'></za-confirm>
+  </za-locale-provider>
+```
+:::
+
+
+### Vue Script
+```javascript
+<script name="vue">
+const Locale = {
+  'en_US': {
+    SearchBar: {
+      placeholder: 'Search',
+      cancelText: 'Cancel',
+    },
+    Alert: {
+      cancelText: 'Cancel',
+    },
+    Confirm: {
+      okText: 'Ok',
+      cancelText: 'Cancel',
+    }
+  },
+  'zh_CN': {
+    SearchBar: {
+      placeholder: '请输入搜索词...',
+      cancelText: '关闭',
+    },
+    Alert: {
+      cancelText: '知道了',
+    },
+    Confirm: {
+      okText: '确定',
+      cancelText: '关闭',
+    }
+  }
+}
+
+export default {
+  data() {
+    return {
+      visible6: false,
+      visible7: false,
+      locale: Locale,
+      lang: 'zh_CN',
+      v1: 'zh_CN',
+      langData:[
+        { value: 'zh_CN', label: '中文' },
+        { value: 'en_US', label: '英文' },
+      ]
+    }
+  },
+  watch: {
+    lang() {
+      this.$forceUpdate();
+    },
+  },
+  methods: {
+    handleOk(val){
+      console.log(val);
+      this.lang = val.value;
+    },
+    handleOk2(){
+      this.visible7 = false
+    },
+    handleCancel(){
+      this.visible7 = false
+    }
+  },
+};
+</script>
+```
+
 
 ## API
 
 | 属性 | 类型 | 默认值 | 说明 |
 | :--- | :--- | :--- | :--- |
-| locale | Object | - | 语言包配置，语言包可到 zarm-vue/lib/locale-provider/locale 目录下寻找 |
+| locale | Object | - | 语言包配置 |
+| lang | String | - | 设置语言包类型，对应locale的key值 |

package.json

@@ -1,6 +1,6 @@
 {
   "name": "zarm-vue",
-  "version": "2.0.0-alpha.7",
+  "version": "2.0.0-alpha.8",
   "description": "zarm in vue",
   "tags": [
     "zarm",

site/store/index.js

@@ -19,7 +19,7 @@ const store = new Vuex.Store({
       path: 'https://chuanshuoye.github.io/zarm-vue-doc/#/zh-CN'
     },{
       value: '2.0.0',
-      label: '2.0.0-alpha.7',
+      label: '2.0.0-alpha.8',
       path: '#/documents/quick-start'
     }]
   },

src/alert/src/alert.vue

@@ -5,7 +5,7 @@
       <slot></slot>
     </div>
     <template slot='footer'>
-      <za-button block bordered @click='handleClose'>{{cancelBtnText}}</za-button>
+      <za-button block bordered @click='handleClose'>{{cancelText || cancelBtnText}}</za-button>
     </template>
   </za-modal>
 </template>
@@ -52,13 +52,13 @@ export default {
   },
   computed: {
     cancelBtnText() {
-      return this.cancelText || this.getLocales('cancelText') || '关闭';
+      return this.localeProvider.lang ? this.getLocales('cancelText') : '关闭';
     },
   },
   methods: {
     // 国际化
     getLocales(key) {
-      return Locale.getLocaleByComponent(this, 'Alert', key);
+      return Locale.getLocaleByComponent(this.localeProvider, 'Alert', key);
     },
     handleClose(event) {
       this.$refs.modal.leave('modal-close', event);

src/confirm/src/confirm.vue

@@ -5,8 +5,8 @@
       <slot></slot>
     </div>
     <template slot='footer'>
-      <za-button block bordered @click='cancel'>{{cancelBtnText}}</za-button>
-      <za-button block bordered theme="primary" @click='ok'>{{okBtnText}}</za-button>
+      <za-button block bordered @click='cancel'>{{cancelText || cancelBtnText}}</za-button>
+      <za-button block bordered theme="primary" @click='ok'>{{okText || okBtnText}}</za-button>
     </template>
   </za-modal>
 </template>
@@ -65,10 +65,10 @@ export default {
   },
   computed: {
     cancelBtnText() {
-      return this.cancelText || this.getLocales('cancelText') || '关闭';
+      return this.localeProvider.lang ? this.getLocales('cancelText') : '关闭';
     },
     okBtnText() {
-      return this.okText || this.getLocales('okText') || '确定';
+      return this.localeProvider.lang ? this.getLocales('okText') : '确定';
     },
   },
   watch: {
@@ -86,7 +86,7 @@ export default {
   methods: {
     // 国际化
     getLocales(key) {
-      return Locale.getLocaleByComponent(this, 'Confirm', key);
+      return Locale.getLocaleByComponent(this.localeProvider, 'Confirm', key);
     },
   },
 };

src/locale-provider/src/locale-provider.vue

@@ -24,7 +24,7 @@ export default {
   },
   provide() {
     return {
-      localeProvider: this.locale[this.lang],
+      localeProvider: this,
     };
   },
 };

src/search-bar/src/search-bar.vue

@@ -11,17 +11,17 @@
         <div :class="`${prefixCls}-mock`">
           <div :class="`${prefixCls}-mock-container`" ref="searchContainer">
             <za-icon type="search" />
-            <span :class="`${prefixCls}-mock-placeholder`" v-show="isVisibility">{{placeholderText}}</span>
+            <span :class="`${prefixCls}-mock-placeholder`" v-show="isVisibility">{{placeholder || placeholderText}}</span>
           </div>
         </div>
-        <za-input type="search" :placeholder="placeholderText" :value="currentValue" :disabled="disabled" :clearable="clearable" ref="inputRef"
+        <za-input type="search" :placeholder="placeholder || placeholderText" :value="currentValue" :disabled="disabled" :clearable="clearable" ref="inputRef"
           :maxLength='maxLength' @focus="onFocus" @compositionStart="handleComposition" @compositionUpdate="handleComposition"
           @compositionEnd="handleComposition" @change="onChange" @blur="onBlur" @clear="onClear" />
       </div>
       <div :class="{
           [`${prefixCls}-cancel`]: true,
           [`${prefixCls}-cancel-show`]: !!(showCancel || focusStatus || (currentValue && currentValue.length > 0))
-        }" ref="cancelRef" @click="onCancel">{{cancelBtnText}}</div>
+        }" ref="cancelRef" @click="onCancel">{{cancelText || cancelBtnText}}</div>
     </form>
   </div>
 </template>
@@ -80,7 +80,7 @@ export default {
     };
   },
   watch: {
-    'value'(value, oldValue) { // eslint-disable-line no-unused-vars, object-shorthand
+    value(value) {
       if (value === this.currentValue) return;
       this.currentValue = value;
     },
@@ -90,10 +90,10 @@ export default {
       return this.currentValue ? 0 : 1;
     },
     cancelBtnText() {
-      return this.cancelText || this.getLocales('cancelText') || '关闭';
+      return this.localeProvider.lang ? this.getLocales('cancelText') : '取消';
     },
     placeholderText() {
-      return this.placeholder || this.getLocales('placeholder') || '搜索';
+      return this.localeProvider.lang ? this.getLocales('placeholder') : '搜索';
     },
   },
   mounted() {
@@ -104,7 +104,7 @@ export default {
   methods: {
     // 国际化
     getLocales(key) {
-      return Locale.getLocaleByComponent(this, 'SearchBar', key);
+      return Locale.getLocaleByComponent(this.localeProvider, 'SearchBar', key);
     },
     // 初始化搜索提示文字的位置
     calculatePositon() {

src/utils/locale.js

@@ -1,9 +1,10 @@
 export default {
-  getLocaleByComponent($component, name = '', key) {
-    if (!$component.localeProvider) return '';
-    const componentProvider = $component.localeProvider[name];
-    if (componentProvider) {
-      return componentProvider[key];
+  getLocaleByComponent(localeProvider, name = '', key) {
+    if (!localeProvider) return '';
+    const currentLang = localeProvider.lang;
+    if (currentLang) {
+      const currentProvider = localeProvider.locale[currentLang];
+      return currentProvider[name][key];
     }
     return '';
   },