diff --git a/CONFIG.md b/CONFIG.md
index 2d8eaad..fc2166a 100755
--- a/CONFIG.md
+++ b/CONFIG.md
@@ -203,6 +203,55 @@ this.$ncformValidate('demoForm').then(data => {
 })
 ```
 
+- $ncformAddWidget({name, widget})
+
+Add your custom form control
+
+```
+// Demo code:
+this.$ncformAddWidget({name: 'sayHi', widget: {
+  mixins: [ncformCommon.mixins.vue.controlMixin],
+  template: '<div>hi {{modelVal}}</div>',
+  props: {
+    value: {
+      type: [String]
+    },
+  },
+}});
+```
+
+- $ncformAddRule({name, rule})
+
+Add your custom validation rule
+
+```
+// Demo code:
+class MyCustomRule extends ncformCommon.ValidationRule {
+
+  constructor(props) {
+    super(props);
+    this.name = 'myCustom';
+    this.defaultErrMsg = 'yeah, show my custom rule message';
+  }
+
+  validateLogic(val, ruleVal) {
+    this.errMsg = "must fill in 'daniel'"
+    return val === 'daniel';
+  }
+}
+
+this.$ncformAddRule({name: 'myCustom', rule: MyCustomRule});
+```
+
+- $ncformSetLang(lang)
+
+Switch language
+
+```
+// Demo code:
+this.$ncformSetLang('en');
+```
+
 ## ncform event
 
 - submit
diff --git a/CONFIG_CN.md b/CONFIG_CN.md
index d5a3b32..ce3fdc5 100644
--- a/CONFIG_CN.md
+++ b/CONFIG_CN.md
@@ -203,6 +203,55 @@ this.$ncformValidate('demoForm').then(data => {
 })
 ```
 
+- $ncformAddWidget({name, widget})
+
+增加自定义表单控件
+
+```
+// Demo code:
+this.$ncformAddWidget({name: 'sayHi', widget: {
+  mixins: [ncformCommon.mixins.vue.controlMixin],
+  template: '<div>hi {{modelVal}}</div>',
+  props: {
+    value: {
+      type: [String]
+    },
+  },
+}});
+```
+
+- $ncformAddRule({name, rule})
+
+增加自定义验证规则
+
+```
+// Demo code:
+class MyCustomRule extends ncformCommon.ValidationRule {
+
+  constructor(props) {
+    super(props);
+    this.name = 'myCustom';
+    this.defaultErrMsg = 'yeah, show my custom rule message';
+  }
+
+  validateLogic(val, ruleVal) {
+    this.errMsg = "must fill in 'daniel'"
+    return val === 'daniel';
+  }
+}
+
+this.$ncformAddRule({name: 'myCustom', rule: MyCustomRule});
+```
+
+- $ncformSetLang(lang)
+
+切换语言
+
+```
+// Demo code:
+this.$ncformSetLang('en');
+```
+
 ## ncform event
 
 - submit
diff --git a/EXT-DOC.md b/EXT-DOC.md
index 83957ae..3ec74a7 100755
--- a/EXT-DOC.md
+++ b/EXT-DOC.md
@@ -38,6 +38,10 @@ export MyCustomRule;
 3.Register rule
 ```
 Vue.use(vueNcform, { extRules: [{myCustom: MyCustomRule}] });
+
+or 
+
+vm.$ncformAddRule({name: 'myCustom', rule: MyCustomRule});
 ```
 
 4.Use it
@@ -61,7 +65,8 @@ npm i @ncform/ncform-common --save
 
 <template>
   <div >
-    <label>{{mergeConfig.msg}}</label>
+    <!-- use $t to get i18n data -->
+    <label>{{$t('hi', {name: mergeConfig.name})}}</label>
 
     <!-- disabled / readonly / placeholder / hidden : use the computed version, not the config version. defined in controlMixin -->
     <!-- modelVal: for binding value. defined in controlMixin -->
@@ -83,10 +88,19 @@ import ncformCommon from '@ncform/ncform-common';
 export default {
   mixins: [ncformCommon.mixins.vue.controlMixin],
 
+  i18nData: { // i18n
+    en: {
+      hi: 'Hi <%= name %>'
+    },
+    zh_cn: {
+      hi: '你好 <%= name %>'
+    }
+  },
+
   data() {
     return {
       defaultConfig: { // your config's default value（Note: use mergeConfig when use config value）
-        msg: 'hello'
+        name: 'daniel'
       }
     }
   },
@@ -109,6 +123,10 @@ export default {
 
 ```
 Vue.use(vueNcform, { extComponents: {myCustomComp} });
+
+or
+
+vm.$ncformAddWidget({name: 'myCustomComp', widget: myCustomComp});
 ```
 
 4.Use it
diff --git a/packages/ncform-common/src/mixins/vue/control-mixin.js b/packages/ncform-common/src/mixins/vue/control-mixin.js
index 1352bd3..de307fd 100755
--- a/packages/ncform-common/src/mixins/vue/control-mixin.js
+++ b/packages/ncform-common/src/mixins/vue/control-mixin.js
@@ -1,10 +1,20 @@
 import extend from "extend";
 import axios from "axios";
+import _template from "lodash-es/template";
 import ncformUtils from "../../ncform-utils";
 
 export default {
+
+  lang: (navigator.browserLanguage || navigator.language).replace(/-/, '_').toLowerCase(),
+  i18nData: {
+    en: {},
+    zh_cn: {}
+  },
+
   created() {
 
+    this.$data.i18n = this.$options.i18nData[this.$options.lang] || this.$options.i18nData.en;
+
     if (!this.$http) {
       this.$http = this.$axios || this.axios || axios;
     }
@@ -24,6 +34,12 @@ export default {
         this.config
       );
     });
+
+    window.__$ncform.eventHub.$on('ncform set lang', this._changeLang)
+  },
+
+  beforeDestroy() {
+    window.__$ncform.eventHub.$off('ncform set lang', this._changeLang)
   },
 
   props: {
@@ -61,7 +77,8 @@ export default {
     return {
       mergeConfig: {},
       defaultConfig: {},
-      modelVal: this.value
+      modelVal: this.value,
+      i18n: {},
     };
   },
 
@@ -108,6 +125,15 @@ export default {
 
     _processModelVal(modelVal) {
       return modelVal;
+    },
+
+    _changeLang(lang) {
+      this.$options.lang = lang.replace(/-/, '_').toLowerCase();
+      this.$data.i18n = this.$options.i18nData[this.$options.lang] || this.$options.i18nData.en;
+    },
+
+    $t(key, data) {
+      return Object.prototype.toString.call(data) !== "[object Object]" ? this.$data.i18n[key] : _template(this.$data.i18n[key])(data);
     }
   }
 };
diff --git a/packages/ncform-common/src/mixins/vue/layout-array-mixin.js b/packages/ncform-common/src/mixins/vue/layout-array-mixin.js
index 22583ac..8627202 100755
--- a/packages/ncform-common/src/mixins/vue/layout-array-mixin.js
+++ b/packages/ncform-common/src/mixins/vue/layout-array-mixin.js
@@ -1,9 +1,22 @@
 import _cloneDeep from "lodash-es/cloneDeep";
+import _template from "lodash-es/template";
 import extend from "extend";
 import ncformUtils from "../../ncform-utils";
 
 export default {
+
+  lang: (navigator.browserLanguage || navigator.language).replace(/-/, '_').toLowerCase(),
+  i18nData: {
+    en: {
+    },
+    zh_cn: {
+    }
+  },
+
   created() {
+
+    this.$data.i18n = this.$options.i18nData[this.$options.lang] || this.$options.i18nData.en;
+
     this.schema.value =
       this.schema.value && this.schema.value.length > 0
         ? this.schema.value
@@ -26,6 +39,12 @@ export default {
         this.config
       );
     });
+
+    window.__$ncform.eventHub.$on('ncform set lang', this._changeLang)
+  },
+
+  beforeDestroy() {
+    window.__$ncform.eventHub.$off('ncform set lang', this._changeLang)
   },
 
   props: {
@@ -65,9 +84,10 @@ export default {
         disableReorder: false,
         disableAdd: false,
         disableDel: false,
-        addTxt: "Add",
-        delAllTxt: "Del All"
-      }
+        addTxt: "",
+        delAllTxt: "",
+      },
+      i18n: {},
     };
   },
 
@@ -137,6 +157,15 @@ export default {
     collapse() {
       if (!this.$data.mergeConfig.disableCollapse)
         this.$data.mergeConfig.collapsed = !this.$data.mergeConfig.collapsed;
+    },
+
+    _changeLang(lang) {
+      this.$options.lang = lang.replace(/-/, '_').toLowerCase();
+      this.$data.i18n = this.$options.i18nData[this.$options.lang] || this.$options.i18nData.en;
+    },
+
+    $t(key, data) {
+      return Object.prototype.toString.call(data) !== "[object Object]" ? this.$data.i18n[key] : _template(this.$data.i18n[key])(data);
     }
   }
 };
diff --git a/packages/ncform-theme-elementui/examples/control-comps/checkbox.html b/packages/ncform-theme-elementui/examples/control-comps/checkbox.html
index 022a07f..b342c2e 100755
--- a/packages/ncform-theme-elementui/examples/control-comps/checkbox.html
+++ b/packages/ncform-theme-elementui/examples/control-comps/checkbox.html
@@ -282,6 +282,9 @@ resField: Which field of the response data as the data source, as the example re
       // Bootstrap the app
       new Vue({
         el: '#demo',
+        mounted() {
+          this.$ncformSetLang(lang === 'cn' ? 'zh_cn' : 'en');
+        },
         data: {
           formSchemas: getFormSchemas(),
           originFormSchemas: getFormSchemas()
diff --git a/packages/ncform-theme-elementui/examples/control-comps/date-picker.html b/packages/ncform-theme-elementui/examples/control-comps/date-picker.html
index 32472ad..e821d20 100755
--- a/packages/ncform-theme-elementui/examples/control-comps/date-picker.html
+++ b/packages/ncform-theme-elementui/examples/control-comps/date-picker.html
@@ -200,6 +200,9 @@
       // Bootstrap the app
       new Vue({
         el: '#demo',
+        mounted() {
+          this.$ncformSetLang(lang === 'cn' ? 'zh_cn' : 'en');
+        },
         data: {
           formSchemas: getFormSchemas(),
           originFormSchemas: getFormSchemas()
diff --git a/packages/ncform-theme-elementui/examples/control-comps/input.html b/packages/ncform-theme-elementui/examples/control-comps/input.html
index d9c9e33..38a1945 100755
--- a/packages/ncform-theme-elementui/examples/control-comps/input.html
+++ b/packages/ncform-theme-elementui/examples/control-comps/input.html
@@ -572,6 +572,9 @@ The description of each field of upload is as follows:
       // Bootstrap the app
       new Vue({
         el: '#demo',
+        mounted() {
+          this.$ncformSetLang(lang === 'cn' ? 'zh_cn' : 'en');
+        },
         data: {
           formSchemas: getFormSchemas(),
           originFormSchemas: getFormSchemas()
diff --git a/packages/ncform-theme-elementui/examples/control-comps/label.html b/packages/ncform-theme-elementui/examples/control-comps/label.html
index 54c3c99..25afabb 100755
--- a/packages/ncform-theme-elementui/examples/control-comps/label.html
+++ b/packages/ncform-theme-elementui/examples/control-comps/label.html
@@ -60,7 +60,7 @@
             properties: {
               label: {
                 type: 'string',
-                default: 'some text',
+                default: 'ncform',
                 ui: {
                   widget: 'label'
                 }
@@ -78,7 +78,7 @@
             properties: {
               label: {
                 type: 'string',
-                value: 'some text',
+                value: 'ncform, a nice form development way that generates form UIs and their interactions with just configuration.',
                 ui: {
                   widget: 'label'
                 }
diff --git a/packages/ncform-theme-elementui/examples/control-comps/select.html b/packages/ncform-theme-elementui/examples/control-comps/select.html
index a6d44f4..8a3706d 100755
--- a/packages/ncform-theme-elementui/examples/control-comps/select.html
+++ b/packages/ncform-theme-elementui/examples/control-comps/select.html
@@ -351,6 +351,9 @@
       // Bootstrap the app
       new Vue({
         el: '#demo',
+        mounted() {
+          this.$ncformSetLang(lang === 'cn' ? 'zh_cn' : 'en');
+        },
         data: {
           formSchemas: getFormSchemas(),
           originFormSchemas: getFormSchemas()
diff --git a/packages/ncform-theme-elementui/examples/control-comps/upload.html b/packages/ncform-theme-elementui/examples/control-comps/upload.html
index dd29d2c..627c416 100755
--- a/packages/ncform-theme-elementui/examples/control-comps/upload.html
+++ b/packages/ncform-theme-elementui/examples/control-comps/upload.html
@@ -469,6 +469,9 @@ url: file url
       // Bootstrap the app
       new Vue({
         el: '#demo',
+        mounted() {
+          this.$ncformSetLang(lang === 'cn' ? 'zh_cn' : 'en');
+        },
         data: {
           formSchemas: getFormSchemas(),
           originFormSchemas: getFormSchemas()
diff --git a/packages/ncform-theme-elementui/examples/demo.css b/packages/ncform-theme-elementui/examples/demo.css
index 53f0ab5..b31a8e8 100755
--- a/packages/ncform-theme-elementui/examples/demo.css
+++ b/packages/ncform-theme-elementui/examples/demo.css
@@ -9,6 +9,7 @@
 }
 #demo .demo_item-wrapper > div:first-child {
   flex: 1;
+  width: 33%;
 }
 #demo .demo_item-wrapper > div:first-child small {
   margin-top: 8px; display: block;
@@ -31,4 +32,4 @@
 }
 .doc .el-submenu .el-menu-item {
   height: 40px;
-}
\ No newline at end of file
+}
diff --git a/packages/ncform-theme-elementui/examples/layout-comps/array-table.html b/packages/ncform-theme-elementui/examples/layout-comps/array-table.html
index fdda5ac..311e112 100755
--- a/packages/ncform-theme-elementui/examples/layout-comps/array-table.html
+++ b/packages/ncform-theme-elementui/examples/layout-comps/array-table.html
@@ -268,6 +268,9 @@
       // Bootstrap the app
       new Vue({
         el: '#demo',
+        mounted() {
+          this.$ncformSetLang(lang === 'cn' ? 'zh_cn' : 'en');
+        },
         data: {
           formSchemas: getFormSchemas(),
           originFormSchemas: getFormSchemas()
diff --git a/packages/ncform-theme-elementui/examples/layout-comps/array.html b/packages/ncform-theme-elementui/examples/layout-comps/array.html
index e69a98a..7ed6c9e 100755
--- a/packages/ncform-theme-elementui/examples/layout-comps/array.html
+++ b/packages/ncform-theme-elementui/examples/layout-comps/array.html
@@ -303,6 +303,9 @@
       // Bootstrap the app
       new Vue({
         el: '#demo',
+        mounted() {
+          this.$ncformSetLang(lang === 'cn' ? 'zh_cn' : 'en');
+        },
         data: {
           formSchemas: getFormSchemas(),
           originFormSchemas: getFormSchemas()
diff --git a/packages/ncform-theme-elementui/src/components/control-comps/checkbox.vue b/packages/ncform-theme-elementui/src/components/control-comps/checkbox.vue
index 099499c..a8eeecc 100755
--- a/packages/ncform-theme-elementui/src/components/control-comps/checkbox.vue
+++ b/packages/ncform-theme-elementui/src/components/control-comps/checkbox.vue
@@ -10,7 +10,7 @@
       :indeterminate="mergeConfig.isIndeterminate"
       v-model="mergeConfig.checkAll"
       @change="handleCheckAllChange"
-    >全选</el-checkbox>
+    >{{$t('all')}}</el-checkbox>
 
     <el-checkbox-group
       v-if="!readonly"
@@ -98,6 +98,17 @@
 
     mixins: [controlMixin],
 
+    i18nData: {
+      en: {
+        yes: 'Yes',
+        all: 'All'
+      },
+      zh_cn: {
+        yes: '是',
+        all: '全选'
+      }
+    },
+
     props: {
       value: {
         // type: [String, Number, Boolean, Array],
@@ -204,7 +215,7 @@
       if (enumSourceRemote && enumSourceRemote.remoteUrl) {
         vm.getRemoteSource();
       } else if (!vm.mergeConfig.enumSource.length) {
-        vm.mergeConfig.enumSource = [ {label: '是', value: true}];
+        vm.mergeConfig.enumSource = [ {label: this.$t('yes'), value: true}];
       }
     }
   }
diff --git a/packages/ncform-theme-elementui/src/components/control-comps/date-picker.vue b/packages/ncform-theme-elementui/src/components/control-comps/date-picker.vue
index e1b6861..fec639f 100755
--- a/packages/ncform-theme-elementui/src/components/control-comps/date-picker.vue
+++ b/packages/ncform-theme-elementui/src/components/control-comps/date-picker.vue
@@ -1,13 +1,13 @@
 <template>
   <el-date-picker class="ncform-date-picker"
     v-if="mergeConfig.type && typeOptions[mergeConfig.type]"
-    :placeholder="placeholder || typeOptions[mergeConfig.type].placeholder"
+    :placeholder="placeholder || $t(typeOptions[mergeConfig.type].placeholder)"
     :disabled="disabled"
     :readonly="readonly"
     v-show="!hidden"
     v-model="modelVal"
     :type="mergeConfig.type"
-    :format="mergeConfig.format || typeOptions[mergeConfig.type].format"
+    :format="mergeConfig.format || $t(typeOptions[mergeConfig.type].format)"
     >
   </el-date-picker>
 </template>
@@ -44,6 +44,25 @@ const controlMixin = ncformCommon.mixins.vue.controlMixin;
 export default {
   mixins: [controlMixin],
 
+  i18nData: {
+    en: {
+      chYear: 'Choose Year',
+      chMonth: 'Choose Month',
+      chDate: 'Choose Date',
+      chWeek: 'Choose Week',
+      chTime: 'Choose Datetime',
+      weekFormat: 'Week WW of yyyy'
+    },
+    zh_cn: {
+      chYear: '选择年份',
+      chMonth: '选择月份',
+      chDate: '选择日期',
+      chWeek: '选择周',
+      chTime: '选择时间',
+      weekFormat: 'yyyy年 第WW周'
+    }
+  },
+
   props: {
     value: {
       type: String,
@@ -70,23 +89,23 @@ export default {
       typeOptions: {
         year: {
           format: '',
-          placeholder: '选择年',
+          placeholder: 'chYear',
         },
         month: {
           format: '',
-          placeholder: '选择月',
+          placeholder: 'chMonth',
         },
         date: {
           format: '',
-          placeholder: '选择日期',
+          placeholder: 'chDate',
         },
         week: {
-          format: 'yyyy年 第WW周',
-          placeholder: '选择周',
+          format: 'weekFormat',
+          placeholder: 'chWeek',
         },
         datetime:{
           format: '',
-          placeholder: '选择时间',
+          placeholder: 'chTime',
         }
       },
       // 组件特有的配置属性
diff --git a/packages/ncform-theme-elementui/src/components/control-comps/input.vue b/packages/ncform-theme-elementui/src/components/control-comps/input.vue
index 5c7c163..f23f3c3 100755
--- a/packages/ncform-theme-elementui/src/components/control-comps/input.vue
+++ b/packages/ncform-theme-elementui/src/components/control-comps/input.vue
@@ -10,18 +10,18 @@
         <el-button slot="prepend" v-if="mergeConfig.compound.prependIcon" :icon="mergeConfig.compound.prependIcon"></el-button>
         <el-button slot="append" v-if="mergeConfig.compound.appendIcon" :icon="mergeConfig.compound.appendIcon"></el-button>
 
-        <el-select v-if="mergeConfig.compound.prependSelect" v-model="prependSelectVal" slot="prepend" placeholder="请选择">
+        <el-select v-if="mergeConfig.compound.prependSelect" v-model="prependSelectVal" slot="prepend" :placeholder="$t('selectPls')">
           <el-option v-for="item in prependSelectOptions" :label="item[mergeConfig.compound.prependSelect.itemLabelField]" :value="item[mergeConfig.compound.prependSelect.itemValueField]" :key="item[mergeConfig.compound.prependSelect.itemValueField]"></el-option>
         </el-select>
 
-        <el-select v-if="mergeConfig.compound.appendSelect" v-model="appendSelectVal" slot="append" placeholder="请选择">
+        <el-select v-if="mergeConfig.compound.appendSelect" v-model="appendSelectVal" slot="append" :placeholder="$t('selectPls')">
           <el-option v-for="item in appendSelectOptions" :label="item[mergeConfig.compound.appendSelect.itemLabelField]" :value="item[mergeConfig.compound.appendSelect.itemValueField]" :key="item[mergeConfig.compound.appendSelect.itemValueField]"></el-option>
         </el-select>
       </template>
 
       <!--上传类型-->
       <template v-else-if="mergeConfig.type === 'file' && mergeConfig.upload">
-        <el-button slot="append" v-if="mergeConfig.upload.uploadUrl" class="ncform-input-upload" @click="handleClickUpload">{{isUploading ? '上传中...' : mergeConfig.upload.uploadText}}
+        <el-button slot="append" v-if="mergeConfig.upload.uploadUrl" class="ncform-input-upload" @click="handleClickUpload">{{isUploading ? $t('uploading') : mergeConfig.upload.uploadText || $t('upload')}}
           <input type="file" ref="upload" :accept="mergeConfig.upload.accept || ''" @change="handleFileChange" />
         </el-button>
       </template>
@@ -42,11 +42,11 @@
         <el-button slot="prepend" v-if="mergeConfig.compound.prependIcon" :icon="mergeConfig.compound.prependIcon"></el-button>
         <el-button slot="append" v-if="mergeConfig.compound.appendIcon" :icon="mergeConfig.compound.appendIcon"></el-button>
 
-        <el-select v-if="mergeConfig.compound.prependSelect" v-model="prependSelectVal" slot="prepend" placeholder="请选择">
+        <el-select v-if="mergeConfig.compound.prependSelect" v-model="prependSelectVal" slot="prepend" :placeholder="$t('selectPls')">
           <el-option v-for="item in prependSelectOptions" :label="item[mergeConfig.compound.prependSelect.itemLabelField]" :value="item[mergeConfig.compound.prependSelect.itemValueField]" :key="item[mergeConfig.compound.prependSelect.itemValueField]"></el-option>
         </el-select>
 
-        <el-select v-if="mergeConfig.compound.appendSelect" v-model="appendSelectVal" slot="append" placeholder="请选择">
+        <el-select v-if="mergeConfig.compound.appendSelect" v-model="appendSelectVal" slot="append" :placeholder="$t('selectPls')">
           <el-option v-for="item in appendSelectOptions" :label="item[mergeConfig.compound.appendSelect.itemLabelField]" :value="item[mergeConfig.compound.appendSelect.itemValueField]" :key="item[mergeConfig.compound.appendSelectVal.itemValueField]"></el-option>
         </el-select>
       </template>
@@ -84,6 +84,19 @@ const controlMixin = ncformCommon.mixins.vue.controlMixin;
 export default {
   mixins: [controlMixin],
 
+  i18nData: {
+    en: {
+      selectPls: 'Select Please',
+      uploading: 'Uploading...',
+      upload: 'Upload'
+    },
+    zh_cn: {
+      selectPls: '请选择',
+      uploading: '上传中...',
+      upload: '点击上传'
+    }
+  },
+
   props: {
     value: {
       type: [String, Number, Object]
@@ -260,7 +273,7 @@ export default {
             minSize: 0 // 最小图片大小，单位KB，0代表不限
           },
           resField: "", // 获取返回结果的字段,
-          uploadText: "点击上传" //  上传按钮的名称
+          uploadText: "" //  上传按钮的名称
         }
       }
     };
diff --git a/packages/ncform-theme-elementui/src/components/control-comps/label.vue b/packages/ncform-theme-elementui/src/components/control-comps/label.vue
index 62f62d4..840ec76 100755
--- a/packages/ncform-theme-elementui/src/components/control-comps/label.vue
+++ b/packages/ncform-theme-elementui/src/components/control-comps/label.vue
@@ -1,16 +1,8 @@
 <template>
-    <el-tooltip
-    class="ncform-label-wrap"
-    :content="modelVal"
-    placement="top"
-    :disabled="mergeConfig.multiLine"
-  >
-    <label
-      ref="label"
-      :class="['ncform-label', mergeConfig.multiLine ? 'multi-line' : '']"
-      :style="{ width: dynamicWidth }"
-    >{{val}}</label>
-  </el-tooltip>
+  <label :title="mergeConfig.multiLine ? '' : val"
+    ref="label"
+    :class="['ncform-label', mergeConfig.multiLine ? 'multi-line' : '']"
+  >{{val}}</label>
 </template>
 
 <style lang="scss">
@@ -48,27 +40,13 @@
           multiLine: false // 是否多行显示 （当为false时，内容溢出时用...显示，然后鼠标移上去可显示完整的内容）
         },
         val: '',
-        dynamicWidth: '100%'
         // mergeConfig: 请使用该值去绑定你的组件的属性，它包含了defaultConfig data和config props的值
         // modelVal：请使用该值来绑定实际的组件的model
       }
     },
 
-    methods: {
-      setDynamicWidth() {
-        const vm = this;
-        // 不只使用css3的原因在于 内嵌ncform布局组件，此组件的父组件下有子组件具有浮动属性导致宽度继承失效，父组件宽度为0，只能靠子组件自行撑开宽度
-        if (!vm.mergeConfig.multiLine && vm.modelVal !== '') {
-          vm.$nextTick(() => {
-            vm.dynamicWidth = `${this.$parent.$el.offsetWidth}px`;
-          })
-        }
-      }
-    },
-
     mounted() {
       const vm = this;
-      vm.setDynamicWidth();
       vm.val = vm.modelVal;
     },
 	}
diff --git a/packages/ncform-theme-elementui/src/components/control-comps/radio.vue b/packages/ncform-theme-elementui/src/components/control-comps/radio.vue
index 1b4c51b..67dee7b 100755
--- a/packages/ncform-theme-elementui/src/components/control-comps/radio.vue
+++ b/packages/ncform-theme-elementui/src/components/control-comps/radio.vue
@@ -67,6 +67,17 @@
 
     mixins: [controlMixin],
 
+    i18nData: {
+      en: {
+        yes: 'Yes',
+        no: 'No'
+      },
+      zh_cn: {
+        yes: '是',
+        no: '否'
+      }
+    },
+
     props: {
       value: {
         type: [String, Number, Boolean]
@@ -157,7 +168,7 @@
       if (enumSourceRemote && enumSourceRemote.remoteUrl) {
         vm.getRemoteSource();
       } else if (!vm.mergeConfig.enumSource.length) {
-        vm.mergeConfig.enumSource = [ {value: true, label: '是'}, {value: false, label: '否'} ];
+        vm.mergeConfig.enumSource = [ {value: true, label: this.$t('yes')}, {value: false, label: this.$t('no')} ];
       }
     }
   }
diff --git a/packages/ncform-theme-elementui/src/components/control-comps/select.vue b/packages/ncform-theme-elementui/src/components/control-comps/select.vue
index 7bcfa70..52f255e 100755
--- a/packages/ncform-theme-elementui/src/components/control-comps/select.vue
+++ b/packages/ncform-theme-elementui/src/components/control-comps/select.vue
@@ -1,6 +1,6 @@
 <template>
 
-      <el-select v-model="modelVal" :placeholder="placeholder || '请选择'" v-show="!hidden" :disabled="disabled || readonly"
+      <el-select v-model="modelVal" :placeholder="placeholder || $t('selectPls')" v-show="!hidden" :disabled="disabled || readonly"
       :clearable="mergeConfig.clearable"
       :multiple="mergeConfig.multiple"
       :filterable="mergeConfig.filterable"
@@ -35,6 +35,15 @@ const ncformUtils = ncformCommon.ncformUtils;
 export default {
   mixins: [controlMixin],
 
+  i18nData: {
+    en: {
+      selectPls: 'Select Please'
+    },
+    zh_cn: {
+      selectPls: '请选择'
+    }
+  },
+
   props: {
     value: {
       type: [String, Number, Boolean, Object, Array],
diff --git a/packages/ncform-theme-elementui/src/components/control-comps/upload.vue b/packages/ncform-theme-elementui/src/components/control-comps/upload.vue
index dafa14e..1896652 100755
--- a/packages/ncform-theme-elementui/src/components/control-comps/upload.vue
+++ b/packages/ncform-theme-elementui/src/components/control-comps/upload.vue
@@ -24,7 +24,7 @@
     <!-- 可拖拽 -->
     <template v-if="!readonly && mergeConfig.drag" slot="trigger">
       <i class="el-icon-upload"></i>
-      <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
+      <div class="el-upload__text" v-html="$t('uploadTips')"></div>
     </template>
     <div v-if="mergeConfig.drag && disabled" class="disabled-mask"></div>
 
@@ -35,7 +35,7 @@
       size="small"
       type="success"
       @click="submitUpload"
-    >上传到服务器</el-button>
+    >{{$t('uploadServer')}}</el-button>
 
     <!-- 不能可拖拽 是否自动上传 维度-->
     <el-button
@@ -43,7 +43,7 @@
       :disabled="disabled"
       size="small"
       type="primary"
-    >点击上传</el-button>
+    >{{$t('upload')}}</el-button>
 
     <template v-if="!readonly && !mergeConfig.drag && !mergeConfig.autoUpload">
       <el-button
@@ -51,14 +51,14 @@
         slot="trigger"
         size="small"
         type="primary"
-      >选取文件</el-button>
+      >{{$t('chFile')}}</el-button>
       <el-button
         :disabled="disabled"
         class="upload-btn"
         size="small"
         type="success"
         @click="submitUpload"
-      >上传到服务器</el-button>
+      >{{$t('uploadServer')}}</el-button>
     </template>
 
   </el-upload>
@@ -120,6 +120,31 @@
 
     mixins: [controlMixin],
 
+    i18nData: {
+      en: {
+        uploadTips: 'Drag file here, or <em>click to upload</em>',
+        uploadServer: 'Upload to server',
+        upload: 'Upload',
+        chFile: 'Select file',
+        successChTips: '<%= fileCount %> files selected',
+        uploadSuccess: 'Uploaded successfully!',
+        uploadFail: 'Uploading files all failed!',
+        uploadSomeFail: 'Some files failed to upload!',
+        limitTips: 'No more than <%= limit %> files can be selected, please re-select'
+      },
+      zh_cn: {
+        uploadTips: '将文件拖到此处，或<em>点击上传</em>',
+        uploadServer: '上传到服务器',
+        upload: '点击上传',
+        chFile: '选取文件',
+        successChTips: '共选中文件 <%= fileCount %> 个',
+        uploadSuccess: '上传成功！',
+        uploadFail: '上传文件全部失败！',
+        uploadSomeFail: '部分文件上传失败！',
+        limitTips: '选中文件不能多于<%= limit %>个，请重新选择'
+      }
+    },
+
     props: {
       value: {
         type: Array,
@@ -210,7 +235,7 @@
           && !vm.mergeConfig.showFileList
           && fileList.length) {
             vm.$message({
-              message: `成功选中文件！目前选中文件共 ${fileList.length} 个`,
+              message: this.$t('successChTips', {fileCount: fileList.length}),
               type: 'success'
             });
         }
@@ -247,12 +272,12 @@
           let content;
           if (total === vm.uploadInfo.num[state]) {
             vm.$message({
-              message: state === 'success' ? '上传成功！' : '上传文件全部失败！',
+              message: state === 'success' ? vm.$t('uploadSuccess') : vm.$t('uploadFail'),
               type: state
             });
           } else {
             vm.$message({
-              message: '部分文件上传失败！',
+              message: vm.$t('uploadSomeFail'),
               type: 'error'
             });
           }
@@ -266,7 +291,7 @@
       handleUploadExceed(files, fileList) {
         const vm = this;
         vm.$message({
-          message: `此次选择导致一次上传的文件个数超过限制数目${vm.mergeConfig.limit}个，请重新选择！`,
+          message: vm.$t('limitTips', {limit: vm.mergeConfig.limit}),
           type: 'warning'
         });
       },
diff --git a/packages/ncform-theme-elementui/src/components/layout-comps/array-table.vue b/packages/ncform-theme-elementui/src/components/layout-comps/array-table.vue
index c2c5a0e..d2ba9ad 100755
--- a/packages/ncform-theme-elementui/src/components/layout-comps/array-table.vue
+++ b/packages/ncform-theme-elementui/src/components/layout-comps/array-table.vue
@@ -26,7 +26,7 @@
             </small>
           </th>
 
-          <th v-if="!mergeConfig.disableDel || !mergeConfig.disableReorder">操作</th>
+          <th v-if="!mergeConfig.disableDel || !mergeConfig.disableReorder">{{$t('action')}}</th>
       </thead>
       <tbody>
         <tr v-for="(dataItem, idx) in schema.value" :key="dataItem.__dataSchema.__id">
@@ -49,8 +49,8 @@
           <td :colspan="renderSchemas.length + 1">
             <!-- 列表控制按钮 -->
             <div class="el-button-group" v-if="!mergeConfig.disableAdd || !mergeConfig.disableDel">
-              <button @click="addItem()" v-if="!mergeConfig.disableAdd" type="button" class="el-button el-button--mini"><i class="el-icon-circle-plus-outline"></i> {{mergeConfig.addTxt}}</button>
-              <button @click="delAllItems()" v-if="!mergeConfig.disableDel" type="button" class="el-button el-button--danger el-button--mini"><i class="el-icon-remove"></i> {{mergeConfig.delAllTxt}}</button>
+              <button @click="addItem()" v-if="!mergeConfig.disableAdd" type="button" class="el-button el-button--mini"><i class="el-icon-circle-plus-outline"></i> {{mergeConfig.addTxt || $t('add')}}</button>
+              <button @click="delAllItems()" v-if="!mergeConfig.disableDel" type="button" class="el-button el-button--danger el-button--mini"><i class="el-icon-remove"></i> {{mergeConfig.delAllTxt || $t('delAll')}}</button>
             </div>
           </td>
         </tr>
@@ -123,6 +123,19 @@
 
     mixins: [layoutArrayMixin],
 
+    i18nData: {
+      en: {
+        action: 'Action',
+        add: 'Add',
+        delAll: 'Delete All'
+      },
+      zh_cn: {
+        action: '操作',
+        add: '增加',
+        delAll: '删除全部'
+      }
+    },
+
     created() {
 
       // 取得表头数据
diff --git a/packages/ncform-theme-elementui/src/components/layout-comps/array.vue b/packages/ncform-theme-elementui/src/components/layout-comps/array.vue
index 19c78ae..2a11cab 100755
--- a/packages/ncform-theme-elementui/src/components/layout-comps/array.vue
+++ b/packages/ncform-theme-elementui/src/components/layout-comps/array.vue
@@ -44,8 +44,8 @@
 
     <!-- 列表控制按钮 -->
     <div v-show="!mergeConfig.collapsed" class="el-button-group" v-if="!mergeConfig.disableAdd || !mergeConfig.disableDel">
-      <button @click="addItem()" v-if="!mergeConfig.disableAdd" type="button" class="el-button el-button--mini"><i class="el-icon-circle-plus-outline"></i> {{mergeConfig.addTxt}}</button>
-      <button @click="delAllItems()" v-if="!mergeConfig.disableDel" type="button" class="el-button el-button--danger el-button--mini"><i class="el-icon-remove"></i> {{mergeConfig.delAllTxt}}</button>
+      <button @click="addItem()" v-if="!mergeConfig.disableAdd" type="button" class="el-button el-button--mini"><i class="el-icon-circle-plus-outline"></i> {{mergeConfig.addTxt || $t('add')}}</button>
+      <button @click="delAllItems()" v-if="!mergeConfig.disableDel" type="button" class="el-button el-button--danger el-button--mini"><i class="el-icon-remove"></i> {{mergeConfig.delAllTxt || $t('delAll')}}</button>
     </div>
 
   </div>
@@ -98,6 +98,17 @@
 
     mixins: [layoutArrayMixin],
 
+    i18nData: {
+      en: {
+        add: 'Add',
+        delAll: 'Delete All'
+      },
+      zh_cn: {
+        add: '增加',
+        delAll: '删除全部'
+      }
+    },
+
     created() {
       this._supportItemsCollapse();
     },
diff --git a/packages/ncform/examples/components/vue-ncform/base-array-use.html b/packages/ncform/examples/components/vue-ncform/base-array-use.html
index 6ad3989..90a6fa0 100755
--- a/packages/ncform/examples/components/vue-ncform/base-array-use.html
+++ b/packages/ncform/examples/components/vue-ncform/base-array-use.html
@@ -18,6 +18,7 @@
       <ncform :form-schema="formSchema" v-model="formSchema.value" :form-name="'formname_' + idx"></ncform>
 
       <button class="btn btn-primary" @click="submit(formSchema.value, 'formname_' + idx)">提交</button>
+      <button class="btn btn-primary" @click="changeLang()">切换语言</button>
     </div>
   </div>
 
@@ -58,8 +59,8 @@
                     // disableAdd: true,
                     // disableDel: true,
                     // disableReorder: true,
-                    addTxt: '增加',
-                    delAllTxt: '删除全部',
+                    addTxt: '加一个',
+                    delAllTxt: '删全部',
 
                     // disableItemCollapse: false,
                     // itemCollapse: true
@@ -216,6 +217,9 @@
               console.log(JSON.stringify(value, null, 2));
             }
           });
+        },
+        changeLang() {
+          this.$ncformSetLang('en');
         }
       }
     });
diff --git a/packages/ncform/examples/components/vue-ncform/ext-components-use.html b/packages/ncform/examples/components/vue-ncform/ext-components-use.html
index c16caf1..aab1f03 100755
--- a/packages/ncform/examples/components/vue-ncform/ext-components-use.html
+++ b/packages/ncform/examples/components/vue-ncform/ext-components-use.html
@@ -16,6 +16,7 @@
     <ncform :form-schema="formSchema" v-model="formSchema.value"></ncform>
 
     <button class="btn btn-primary" @click="submit()">提交</button>
+    <button class="btn btn-primary" @click="changeLang()">切换语言</button>
   </div>
 
   <script type="text/javascript" src="../../../node_modules/vue/dist/vue.js"></script>
@@ -27,7 +28,15 @@
     let extComponents = {
       'sayHi': {
         mixins: [ncformCommon.mixins.vue.controlMixin],
-        template: '<div>hi {{modelVal}}</div>',
+        template: '<div>{{$t("hi", {msg: modelVal})}} {{modelVal}}</div>',
+        i18nData: {
+          en: {
+            hi: 'Hi <%= msg %>'
+          },
+          zh_cn: {
+            hi: '你好 <%= msg %>'
+          }
+        },
         props: {
           value: {
             type: [String]
@@ -36,11 +45,18 @@
       }
     }
 
-    Vue.use(vueNcform, { extComponents });
+    // You can add your custom widget while registering ncform
+    // Vue.use(vueNcform, { extComponents });
+
+    Vue.use(vueNcform);
 
     // Bootstrap the app
     new Vue({
       el: '#demo',
+      created() {
+        // You can add your custom widget after registering ncform as follow:
+        this.$ncformAddWidget({name: 'sayHi', widget: extComponents.sayHi});
+      },
       data: {
         formSchema: {
           type: 'object',
@@ -68,6 +84,9 @@
       methods: {
         submit() {
           console.log(JSON.stringify(this.$data.formSchema.value, null, 2));
+        },
+        changeLang() {
+          this.$ncformSetLang('en');
         }
       }
     });
diff --git a/packages/ncform/examples/components/vue-ncform/ext-rule-use.html b/packages/ncform/examples/components/vue-ncform/ext-rule-use.html
index bfe31c3..4ddff22 100755
--- a/packages/ncform/examples/components/vue-ncform/ext-rule-use.html
+++ b/packages/ncform/examples/components/vue-ncform/ext-rule-use.html
@@ -34,25 +34,34 @@
       }
 
       validateLogic(val, ruleVal) {
-        this.errMsg = "dynamic error"
-        return new Promise((rs, rj)=>{
-          const rd = parseInt(Math.random()*20+1)*100;
-          console.log('request', rd);
-          setTimeout(()=>{
-            rs(val === 'daniel');
-            console.log('==>',rd)
-          },rd);
-        });
-        // return val === 'daniel';
+        // this.errMsg = "dynamic error"
+        // return new Promise((rs, rj)=>{
+        //   const rd = parseInt(Math.random()*20+1)*100;
+        //   console.log('request', rd);
+        //   setTimeout(()=>{
+        //     rs(val === 'daniel');
+        //     console.log('==>',rd)
+        //   },rd);
+        // });
+
+        this.errMsg = "must fill in 'daniel'"
+        return val === 'daniel';
       }
 
     }
 
-    Vue.use(vueNcform, { extRules: [{myCustom: MyCustomRule}] });
+    // You can add your custom rule while registering ncform
+    // Vue.use(vueNcform, { extRules: [{myCustom: MyCustomRule}] });
+
+    Vue.use(vueNcform);
 
     // Bootstrap the app
     new Vue({
       el: '#demo',
+      created() {
+        // You can add your custom rule after registering ncform as follow:
+        this.$ncformAddRule({name: 'myCustom', rule: MyCustomRule});
+      },
       data: {
         formSchema: {
           type: 'object',
diff --git a/packages/ncform/examples/components/vue-ncform/table-array-use.html b/packages/ncform/examples/components/vue-ncform/table-array-use.html
index de1f383..40581bd 100755
--- a/packages/ncform/examples/components/vue-ncform/table-array-use.html
+++ b/packages/ncform/examples/components/vue-ncform/table-array-use.html
@@ -18,6 +18,7 @@
       <ncform :form-schema="formSchema" v-model="formSchema.value"></ncform>
 
       <button class="btn btn-primary" @click="submit(formSchema.value)">提交</button>
+      <button class="btn btn-primary" @click="changeLang()">切换语言</button>
     </div>
   </div>
 
@@ -209,6 +210,9 @@
       methods: {
         submit(value) {
           console.log(JSON.stringify(value, null, 2));
+        },
+        changeLang() {
+          this.$ncformSetLang('en');
         }
       }
     });
diff --git a/packages/ncform/src/components/vue-ncform/index.js b/packages/ncform/src/components/vue-ncform/index.js
index b7a600f..c96d3fa 100755
--- a/packages/ncform/src/components/vue-ncform/index.js
+++ b/packages/ncform/src/components/vue-ncform/index.js
@@ -59,6 +59,21 @@ module.exports = {
       return vm.reset();
     };
 
+    Vue.prototype.$ncformAddWidget = function({name, widget}) {
+      Vue.component(`ncform-${_kebabCase(name)}`, widget)
+    }
+
+    Vue.prototype.$ncformAddRule = function({name, rule}) {
+      let ruleItem = {};
+      ruleItem[name] = rule;
+      window.__$ncform.__ncformRegularValidation.registerRule(ruleItem);
+    }
+
+    window.__$ncform.eventHub = window.__$ncform.eventHub || new Vue();
+    Vue.prototype.$ncformSetLang = function(lang) {
+      window.__$ncform.eventHub.$emit('ncform set lang', lang);
+    }
+
     Vue.component("ncform", ncform);
   }
 };
diff --git a/packages/ncform/src/components/vue-ncform/layout-comps/array-table.vue b/packages/ncform/src/components/vue-ncform/layout-comps/array-table.vue
index bcc0411..5a21952 100755
--- a/packages/ncform/src/components/vue-ncform/layout-comps/array-table.vue
+++ b/packages/ncform/src/components/vue-ncform/layout-comps/array-table.vue
@@ -20,7 +20,7 @@
             </small>
           </th>
 
-          <th v-if="!mergeConfig.disableDel || !mergeConfig.disableReorder">操作</th>
+          <th v-if="!mergeConfig.disableDel || !mergeConfig.disableReorder">{{$t('action')}}</th>
         </tr>
       </thead>
       <tbody>
@@ -44,8 +44,8 @@
           <td :colspan="renderSchemas.length + 1">
             <!-- 列表控制按钮 -->
             <div class="btn-group btn-group-sm" v-if="!mergeConfig.disableAdd || !mergeConfig.disableDel">
-              <button @click="addItem()" v-if="!mergeConfig.disableAdd" type="button" class="btn btn-secondary">Add</button>
-              <button @click="delAllItems()" v-if="!mergeConfig.disableDel" type="button" class="btn btn-danger btn-secondary">Del All</button>
+              <button @click="addItem()" v-if="!mergeConfig.disableAdd" type="button" class="btn btn-secondary">{{mergeConfig.addTxt || $t('add')}}</button>
+              <button @click="delAllItems()" v-if="!mergeConfig.disableDel" type="button" class="btn btn-danger btn-secondary">{{mergeConfig.delAllTxt || $t('delAll')}}</button>
             </div>
           </td>
         </tr>
@@ -79,6 +79,19 @@
 
     mixins: [layoutArrayMixin],
 
+    i18nData: {
+      en: {
+        action: 'Action',
+        add: 'Add',
+        delAll: 'Delete All'
+      },
+      zh_cn: {
+        action: '操作',
+        add: '增加',
+        delAll: '删除全部'
+      }
+    },
+
     created() {
 
       // 取得表头数据
diff --git a/packages/ncform/src/components/vue-ncform/layout-comps/array.vue b/packages/ncform/src/components/vue-ncform/layout-comps/array.vue
index e226ff4..a7acade 100755
--- a/packages/ncform/src/components/vue-ncform/layout-comps/array.vue
+++ b/packages/ncform/src/components/vue-ncform/layout-comps/array.vue
@@ -40,8 +40,8 @@
 
     <!-- 列表控制按钮 -->
     <div v-show="!mergeConfig.collapsed" class="btn-group btn-group-sm" v-if="!mergeConfig.disableAdd || !mergeConfig.disableDel">
-      <button @click="addItem()" v-if="!mergeConfig.disableAdd" type="button" class="btn btn-secondary">{{mergeConfig.addTxt}}</button>
-      <button @click="delAllItems()" v-if="!mergeConfig.disableDel" type="button" class="btn btn-danger btn-secondary">{{mergeConfig.delAllTxt}}</button>
+      <button @click="addItem()" v-if="!mergeConfig.disableAdd" type="button" class="btn btn-secondary">{{mergeConfig.addTxt || $t('add')}}</button>
+      <button @click="delAllItems()" v-if="!mergeConfig.disableDel" type="button" class="btn btn-danger btn-secondary">{{mergeConfig.delAllTxt || $t('delAll')}}</button>
     </div>
 
   </div>
@@ -68,6 +68,17 @@
 
     mixins: [layoutArrayMixin],
 
+    i18nData: {
+      en: {
+        add: 'Add',
+        delAll: 'Delete All'
+      },
+      zh_cn: {
+        add: '增加',
+        delAll: '删除全部'
+      }
+    },
+
     created() {
       this._supportItemsCollapse();
     },