From 272ce3d03bc607221f5545357cef54f452aaddf5 Mon Sep 17 00:00:00 2001
From: Eiinu <eiinu@qq.com>
Date: Tue, 14 Nov 2023 20:06:14 +0800
Subject: [PATCH] chore(locale): add use-locale (#2642)

---
 src/packages/__VUE/address/index.taro.vue     | 16 ++++------
 src/packages/__VUE/address/index.vue          |  8 +++--
 .../components/ItemContents.taro.vue          |  6 +++-
 .../addresslist/components/ItemContents.vue   |  6 +++-
 src/packages/__VUE/addresslist/index.taro.vue | 17 +++++------
 src/packages/__VUE/addresslist/index.vue      | 17 +++++------
 src/packages/__VUE/audiooperate/index.vue     |  6 +++-
 .../__VUE/calendaritem/index.taro.vue         |  6 +++-
 src/packages/__VUE/calendaritem/index.vue     |  6 +++-
 .../__VUE/cascader/cascader-item.taro.vue     |  4 ++-
 src/packages/__VUE/cascader/cascader-item.vue |  4 ++-
 .../comment/components/CmtBottom.taro.vue     |  8 +++--
 .../__VUE/comment/components/CmtBottom.vue    |  8 +++--
 src/packages/__VUE/comment/index.taro.vue     | 23 +++++++--------
 src/packages/__VUE/comment/index.vue          | 19 +++++-------
 src/packages/__VUE/countdown/index.taro.vue   | 17 +++++------
 src/packages/__VUE/countdown/index.vue        | 17 +++++------
 src/packages/__VUE/datepicker/index.vue       | 14 ++++-----
 src/packages/__VUE/dialog/index.taro.vue      | 19 +++++-------
 src/packages/__VUE/dialog/index.vue           | 17 +++++------
 src/packages/__VUE/ecard/index.taro.vue       | 10 +++++--
 src/packages/__VUE/ecard/index.vue            |  7 ++++-
 src/packages/__VUE/empty/index.taro.vue       | 16 +++++++---
 src/packages/__VUE/empty/index.vue            |  6 +++-
 src/packages/__VUE/fixednav/index.taro.vue    |  9 ++++--
 src/packages/__VUE/fixednav/index.vue         |  9 ++++--
 src/packages/__VUE/infiniteloading/index.vue  | 29 +++++--------------
 .../__VUE/numberkeyboard/index.taro.vue       |  8 +++--
 src/packages/__VUE/numberkeyboard/index.vue   |  5 +++-
 src/packages/__VUE/pagination/index.taro.vue  |  6 +++-
 src/packages/__VUE/pagination/index.vue       |  6 +++-
 src/packages/__VUE/picker/common.ts           |  7 +++--
 src/packages/__VUE/picker/index.vue           |  6 +++-
 src/packages/__VUE/pullrefresh/index.vue      | 28 ++++++++----------
 src/packages/__VUE/searchbar/index.taro.vue   |  6 +++-
 src/packages/__VUE/searchbar/index.vue        |  7 ++++-
 .../__VUE/shortpassword/index.taro.vue        |  7 ++++-
 src/packages/__VUE/shortpassword/index.vue    |  7 ++++-
 src/packages/__VUE/signature/index.taro.vue   |  8 +++--
 src/packages/__VUE/signature/index.vue        |  8 +++--
 .../__VUE/sku/components/SkuHeader.taro.vue   | 19 +++++-------
 .../__VUE/sku/components/SkuHeader.vue        |  7 +++--
 src/packages/__VUE/sku/index.taro.vue         |  7 ++++-
 src/packages/__VUE/sku/index.vue              |  7 ++++-
 src/packages/__VUE/table/index.taro.vue       |  8 ++++-
 src/packages/__VUE/table/index.vue            |  8 ++++-
 src/packages/__VUE/textarea/index.taro.vue    | 10 +++++--
 src/packages/__VUE/textarea/index.vue         |  9 ++++--
 src/packages/__VUE/timeselect/index.taro.vue  |  7 ++++-
 src/packages/__VUE/timeselect/index.vue       |  7 ++++-
 src/packages/__VUE/uploader/index.taro.vue    |  8 ++++-
 src/packages/__VUE/uploader/index.vue         |  7 ++++-
 src/packages/__VUE/uploader/type.ts           |  4 +--
 src/packages/__VUE/video/index.vue            |  6 +++-
 src/packages/utils/useLocale/index.ts         | 15 ++++++++++
 55 files changed, 351 insertions(+), 211 deletions(-)
 create mode 100644 src/packages/utils/useLocale/index.ts

diff --git a/src/packages/__VUE/address/index.taro.vue b/src/packages/__VUE/address/index.taro.vue
index da069a776b..1e61ef0b22 100644
--- a/src/packages/__VUE/address/index.taro.vue
+++ b/src/packages/__VUE/address/index.taro.vue
@@ -131,14 +131,17 @@
 </template>
 <script lang="ts">
 import { reactive, ref, toRefs, watch, computed, PropType } from 'vue';
+import { Location, Location2, Check, Close, Left } from '@nutui/icons-vue-taro';
 import { popupProps } from '../popup/props';
 import { RegionData, CustomRegionData, existRegionData } from './type';
 import { createComponent } from '@/packages/utils/create';
 import NutPopup from '../popup/index.taro.vue';
 import NutElevator from '../elevator/index.taro.vue';
-const { create, componentName, translate } = createComponent('address');
-import { Location, Location2, Check, Close, Left } from '@nutui/icons-vue-taro';
 import NutScrollView from '../scroll-view/index.taro.vue';
+import { useLocale } from '@/packages/utils/useLocale';
+
+const cN = 'NutAddress';
+const { create } = createComponent('address');
 
 export default create({
   components: {
@@ -214,13 +217,7 @@ export default create({
   emits: ['update:visible', 'update:modelValue', 'type', 'change', 'selected', 'close', 'closeMask', 'switchModule'],
 
   setup(props, { emit }) {
-    const classes = computed(() => {
-      const prefixCls = componentName;
-      return {
-        [prefixCls]: true
-      };
-    });
-
+    const translate = useLocale(cN);
     const tabItemRef = reactive({
       province: ref<null | HTMLElement>(null),
       city: ref<null | HTMLElement>(null),
@@ -476,7 +473,6 @@ export default create({
     );
 
     return {
-      classes,
       showPopup,
       privateType,
       tabIndex,
diff --git a/src/packages/__VUE/address/index.vue b/src/packages/__VUE/address/index.vue
index 25c55e4330..45860900e1 100644
--- a/src/packages/__VUE/address/index.vue
+++ b/src/packages/__VUE/address/index.vue
@@ -122,13 +122,16 @@
 </template>
 <script lang="ts">
 import { reactive, ref, toRefs, watch, nextTick, computed, Ref, PropType } from 'vue';
+import { Location, Location2, Check, Close, Left } from '@nutui/icons-vue';
 import { createComponent } from '@/packages/utils/create';
 import { RegionData, CustomRegionData, existRegionData } from './type';
 import { popupProps } from '../popup/props';
 import NutPopup from '../popup/index.vue';
 import NutElevator from '../elevator/index.vue';
-const { create, translate } = createComponent('address');
-import { Location, Location2, Check, Close, Left } from '@nutui/icons-vue';
+import { useLocale } from '@/packages/utils/useLocale';
+
+const { create } = createComponent('address');
+const cN = 'NutAddress';
 
 export default create({
   components: {
@@ -199,6 +202,7 @@ export default create({
   emits: ['update:visible', 'update:modelValue', 'type', 'change', 'selected', 'close', 'closeMask', 'switchModule'],
 
   setup(props: any, { emit }) {
+    const translate = useLocale(cN);
     const regionLine = ref<null | HTMLElement>(null);
     const tabRegion: Ref<any> = ref(null);
     const showPopup = ref(props.visible);
diff --git a/src/packages/__VUE/addresslist/components/ItemContents.taro.vue b/src/packages/__VUE/addresslist/components/ItemContents.taro.vue
index 04a7698e88..6457d50e0b 100644
--- a/src/packages/__VUE/addresslist/components/ItemContents.taro.vue
+++ b/src/packages/__VUE/addresslist/components/ItemContents.taro.vue
@@ -26,9 +26,12 @@
 </template>
 <script lang="ts">
 import { createComponent } from '@/packages/utils/create';
+import { useLocale } from '@/packages/utils/useLocale';
 const { create } = createComponent('address-list-item');
-const { translate } = createComponent('address-list');
 import { Del, Edit } from '@nutui/icons-vue-taro';
+
+const cN = 'NutAddressList';
+
 export default create({
   components: { Del, Edit },
   props: {
@@ -40,6 +43,7 @@ export default create({
   emits: ['delIcon', 'editIcon', 'clickItem'],
 
   setup(props, { emit }) {
+    const translate = useLocale(cN);
     const delClick = (event: Event) => {
       emit('delIcon', event, props.item);
       event.stopPropagation();
diff --git a/src/packages/__VUE/addresslist/components/ItemContents.vue b/src/packages/__VUE/addresslist/components/ItemContents.vue
index c93ddae40f..64abef5359 100644
--- a/src/packages/__VUE/addresslist/components/ItemContents.vue
+++ b/src/packages/__VUE/addresslist/components/ItemContents.vue
@@ -26,9 +26,12 @@
 </template>
 <script lang="ts">
 import { createComponent } from '@/packages/utils/create';
+import { useLocale } from '@/packages/utils/useLocale';
 const { create } = createComponent('address-list-item');
-const { translate } = createComponent('address-list');
 import { Del, Edit } from '@nutui/icons-vue';
+
+const cN = 'NutAddressList';
+
 export default create({
   components: { Del, Edit },
   props: {
@@ -40,6 +43,7 @@ export default create({
   emits: ['delIcon', 'editIcon', 'clickItem'],
 
   setup(props, { emit }) {
+    const translate = useLocale(cN);
     const delClick = (event: Event) => {
       emit('delIcon', event, props.item);
       event.stopPropagation();
diff --git a/src/packages/__VUE/addresslist/index.taro.vue b/src/packages/__VUE/addresslist/index.taro.vue
index f21dc0a754..06cfbdbb39 100644
--- a/src/packages/__VUE/addresslist/index.taro.vue
+++ b/src/packages/__VUE/addresslist/index.taro.vue
@@ -1,5 +1,5 @@
 <template>
-  <view :class="classes">
+  <view class="nut-address-list">
     <general-shell
       v-for="(item, index) of dataArray"
       :key="index"
@@ -36,12 +36,15 @@
   </view>
 </template>
 <script lang="ts">
-import { reactive, onMounted, ref, watch, computed } from 'vue';
+import { reactive, onMounted, ref, watch } from 'vue';
 import { createComponent } from '@/packages/utils/create';
-const { componentName, create, translate } = createComponent('address-list');
+const { create } = createComponent('address-list');
 import GeneralShell from './components/GeneralShell.taro.vue';
 import { floatData } from '@/packages/utils/util';
 import NutButton from '../button/index.taro.vue';
+import { useLocale } from '@/packages/utils/useLocale';
+
+const cN = 'NutAddressList';
 export default create({
   props: {
     data: {
@@ -72,6 +75,7 @@ export default create({
   emits: ['delIcon', 'editIcon', 'clickItem', 'longCopy', 'longSet', 'longDel', 'swipeDel', 'add'],
 
   setup(props, { emit }) {
+    const translate = useLocale(cN);
     const dataArray = ref([]) as any;
     const dataInfo = reactive({
       id: 2,
@@ -80,12 +84,6 @@ export default create({
       defaultAddress: false,
       fullAddress: '北京市通州区测试测试测试测试测试测试测试测试测试'
     });
-    const classes = computed(() => {
-      const prefixCls = componentName;
-      return {
-        [prefixCls]: true
-      };
-    });
     //磨平参数差异
     const trowelData = () => {
       if (Object.keys(props.dataOptions).length > 0) {
@@ -137,7 +135,6 @@ export default create({
       trowelData();
     });
     return {
-      classes,
       clickDelIcon,
       clickEditIcon,
       clickContentItem,
diff --git a/src/packages/__VUE/addresslist/index.vue b/src/packages/__VUE/addresslist/index.vue
index 524c3054c1..6c3d282109 100644
--- a/src/packages/__VUE/addresslist/index.vue
+++ b/src/packages/__VUE/addresslist/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div :class="classes">
+  <div class="nut-address-list">
     <general-shell
       v-for="(item, index) of dataArray"
       :key="index"
@@ -36,12 +36,15 @@
   </div>
 </template>
 <script lang="ts">
-import { reactive, onMounted, ref, watch, computed } from 'vue';
+import { reactive, onMounted, ref, watch } from 'vue';
 import { createComponent } from '@/packages/utils/create';
-const { componentName, create, translate } = createComponent('address-list');
+const { create } = createComponent('address-list');
 import GeneralShell from './components/GeneralShell.vue';
 import { floatData } from '@/packages/utils/util';
 import NutButton from '../button/index.vue';
+import { useLocale } from '@/packages/utils/useLocale';
+
+const cN = 'NutAddressList';
 export default create({
   props: {
     data: {
@@ -72,6 +75,7 @@ export default create({
   emits: ['delIcon', 'editIcon', 'clickItem', 'longCopy', 'longSet', 'longDel', 'swipeDel', 'add'],
 
   setup(props, { emit }) {
+    const translate = useLocale(cN);
     const dataArray = ref([]) as any;
     const dataInfo = reactive({
       id: 2,
@@ -80,12 +84,6 @@ export default create({
       defaultAddress: false,
       fullAddress: '北京市通州区测试测试测试测试测试测试测试测试测试'
     });
-    const classes = computed(() => {
-      const prefixCls = componentName;
-      return {
-        [prefixCls]: true
-      };
-    });
     //磨平参数差异
     const trowelData = () => {
       if (Object.keys(props.dataOptions).length > 0) {
@@ -137,7 +135,6 @@ export default create({
       trowelData();
     });
     return {
-      classes,
       clickDelIcon,
       clickEditIcon,
       clickContentItem,
diff --git a/src/packages/__VUE/audiooperate/index.vue b/src/packages/__VUE/audiooperate/index.vue
index 74e1db6220..a4fecbbaf6 100644
--- a/src/packages/__VUE/audiooperate/index.vue
+++ b/src/packages/__VUE/audiooperate/index.vue
@@ -26,7 +26,10 @@
 import { toRefs, ref, useSlots, reactive, inject } from 'vue';
 import { createComponent } from '@/packages/utils/create';
 import NutButton from '../button/index.vue';
-const { create, translate } = createComponent('audio-operate');
+import { useLocale } from '@/packages/utils/useLocale';
+
+const { create } = createComponent('audio-operate');
+const cN = 'NutAudioOperate';
 
 export default create({
   props: {
@@ -42,6 +45,7 @@ export default create({
   emits: ['click'],
 
   setup(props) {
+    const translate = useLocale(cN);
     const audio: any = inject('audioParent');
     const parent: {
       children: [];
diff --git a/src/packages/__VUE/calendaritem/index.taro.vue b/src/packages/__VUE/calendaritem/index.taro.vue
index ff0617e51e..9e973877ed 100644
--- a/src/packages/__VUE/calendaritem/index.taro.vue
+++ b/src/packages/__VUE/calendaritem/index.taro.vue
@@ -84,13 +84,16 @@
 <script lang="ts">
 import { reactive, ref, watch, toRefs, computed, onMounted } from 'vue';
 import { createComponent } from '@/packages/utils/create';
-const { create, translate } = createComponent('calendar-item');
 import Taro from '@tarojs/taro';
 import NutScrollView from '../scroll-view/index.taro.vue';
 import Utils from '@/packages/utils/date';
 import requestAniFrame from '@/packages/utils/raf';
 import { MonthInfo, Day, CalendarTaroState } from './type';
 import { useExpose } from '@/packages/utils/useExpose/index';
+import { useLocale } from '@/packages/utils/useLocale';
+
+const { create } = createComponent('calendar-item');
+const cN = 'NutCalendarItem';
 const TARO_ENV = Taro.getEnv();
 
 type StringArr = string[];
@@ -170,6 +173,7 @@ export default create({
   emits: ['choose', 'update', 'close', 'select'],
 
   setup(props, { emit, slots }) {
+    const translate = useLocale(cN);
     // 新增：自定义周起始日
     const weekdays = (translate('weekdays') as any).map((day: string, index: number) => ({
       day: day,
diff --git a/src/packages/__VUE/calendaritem/index.vue b/src/packages/__VUE/calendaritem/index.vue
index d57bd864da..57181e832d 100644
--- a/src/packages/__VUE/calendaritem/index.vue
+++ b/src/packages/__VUE/calendaritem/index.vue
@@ -77,11 +77,14 @@
 <script lang="ts">
 import { reactive, ref, watch, toRefs, computed } from 'vue';
 import { createComponent } from '@/packages/utils/create';
-const { create, translate } = createComponent('calendar-item');
 import Utils from '@/packages/utils/date';
 import requestAniFrame from '@/packages/utils/raf';
 import { MonthInfo, Day, CalendarState } from './type';
 import { useExpose } from '@/packages/utils/useExpose/index';
+import { useLocale } from '@/packages/utils/useLocale';
+
+const { create } = createComponent('calendar-item');
+const cN = 'NutCalendarItem';
 
 type StringArr = string[];
 
@@ -157,6 +160,7 @@ export default create({
   emits: ['choose', 'update', 'close', 'select'],
 
   setup(props, { emit, slots }) {
+    const translate = useLocale(cN);
     // 新增：自定义周起始日
     const weekdays = (translate('weekdays') as any).map((day: string, index: number) => ({
       day: day,
diff --git a/src/packages/__VUE/cascader/cascader-item.taro.vue b/src/packages/__VUE/cascader/cascader-item.taro.vue
index 2588b6dc4c..070ac47582 100644
--- a/src/packages/__VUE/cascader/cascader-item.taro.vue
+++ b/src/packages/__VUE/cascader/cascader-item.taro.vue
@@ -34,13 +34,14 @@
 import { watch, ref, Ref, computed } from 'vue';
 import NutScrollView from '../scroll-view/index.taro.vue';
 import { createComponent } from '@/packages/utils/create';
-const { create, translate } = createComponent('cascader-item');
 import { convertListToOptions } from './helper';
 import { CascaderPane, CascaderOption, CascaderValue, convertConfig, CascaderTabs } from './types';
 import { Loading, Checklist } from '@nutui/icons-vue-taro';
 import NutTabs from '../tabs/index.taro.vue';
 import NutTabPane from '../tabpane/index.vue';
 import Tree from './tree';
+import { useLocale } from '@/packages/utils/useLocale';
+const { create } = createComponent('cascader-item');
 
 export default create({
   components: {
@@ -76,6 +77,7 @@ export default create({
   emits: ['update:modelValue', 'change', 'pathChange'],
 
   setup(props, { emit }) {
+    const translate = useLocale();
     const configs = computed(() => ({
       lazy: props.lazy,
       lazyLoad: props.lazyLoad,
diff --git a/src/packages/__VUE/cascader/cascader-item.vue b/src/packages/__VUE/cascader/cascader-item.vue
index b59677ad95..199cf9159a 100644
--- a/src/packages/__VUE/cascader/cascader-item.vue
+++ b/src/packages/__VUE/cascader/cascader-item.vue
@@ -31,13 +31,14 @@
 <script lang="ts">
 import { watch, ref, Ref, computed } from 'vue';
 import { createComponent } from '@/packages/utils/create';
-const { create, translate } = createComponent('cascader-item');
 import { convertListToOptions } from './helper';
 import { CascaderPane, CascaderOption, CascaderValue, convertConfig, CascaderTabs } from './types';
 import { Loading, Checklist } from '@nutui/icons-vue';
 import NutTabs from '../tabs/index.vue';
 import NutTabPane from '../tabpane/index.vue';
 import Tree from './tree';
+import { useLocale } from '@/packages/utils/useLocale';
+const { create } = createComponent('cascader-item');
 
 export default create({
   components: {
@@ -72,6 +73,7 @@ export default create({
   emits: ['update:modelValue', 'change', 'pathChange'],
 
   setup(props, { emit }) {
+    const translate = useLocale();
     const configs = computed(() => ({
       lazy: props.lazy,
       lazyLoad: props.lazyLoad,
diff --git a/src/packages/__VUE/comment/components/CmtBottom.taro.vue b/src/packages/__VUE/comment/components/CmtBottom.taro.vue
index ebfe9cfb12..1015eb7aee 100644
--- a/src/packages/__VUE/comment/components/CmtBottom.taro.vue
+++ b/src/packages/__VUE/comment/components/CmtBottom.taro.vue
@@ -25,9 +25,12 @@
 </template>
 <script lang="ts">
 import { ref, onMounted, PropType } from 'vue';
-import { createComponent } from '@/packages/utils/create';
-const { create, translate } = createComponent('comment-bottom');
 import { Fabulous, Comment, MoreX } from '@nutui/icons-vue-taro';
+import { createComponent } from '@/packages/utils/create';
+import { useLocale } from '@/packages/utils/useLocale';
+
+const { create } = createComponent('comment-bottom');
+const cN = 'NutComment';
 
 export default create({
   props: {
@@ -48,6 +51,7 @@ export default create({
   components: { Fabulous, Comment, MoreX },
   emits: ['clickOperate', 'handleClick'],
   setup(props, { emit }) {
+    const translate = useLocale(cN);
     const showPopver = ref(false);
 
     const mergeOp = ref([]);
diff --git a/src/packages/__VUE/comment/components/CmtBottom.vue b/src/packages/__VUE/comment/components/CmtBottom.vue
index e24160009e..76e8f6ea17 100644
--- a/src/packages/__VUE/comment/components/CmtBottom.vue
+++ b/src/packages/__VUE/comment/components/CmtBottom.vue
@@ -25,9 +25,12 @@
 </template>
 <script lang="ts">
 import { ref, onMounted, PropType } from 'vue';
-import { createComponent } from '@/packages/utils/create';
-const { create, translate } = createComponent('comment-bottom');
 import { Fabulous, Comment, MoreX } from '@nutui/icons-vue';
+import { createComponent } from '@/packages/utils/create';
+import { useLocale } from '@/packages/utils/useLocale';
+
+const { create } = createComponent('comment-bottom');
+const cN = 'NutComment';
 
 export default create({
   props: {
@@ -48,6 +51,7 @@ export default create({
   components: { Fabulous, Comment, MoreX },
   emits: ['clickOperate', 'handleClick'],
   setup(props, { emit }) {
+    const translate = useLocale(cN);
     const showPopver = ref(false);
 
     const mergeOp = ref([]);
diff --git a/src/packages/__VUE/comment/index.taro.vue b/src/packages/__VUE/comment/index.taro.vue
index 4b41b716bb..8720879d51 100644
--- a/src/packages/__VUE/comment/index.taro.vue
+++ b/src/packages/__VUE/comment/index.taro.vue
@@ -1,5 +1,5 @@
 <template>
-  <view v-if="info && Object.keys(info)" :class="classes">
+  <view v-if="info && Object.keys(info)" class="nut-comment">
     <!-- 根据展示信息的多少，分为3种展示风格：simple，base，complex -->
     <comment-header :type="headerType" :info="info" :labels="labels" @handle-click="handleClick">
       <template #labels>
@@ -19,13 +19,13 @@
     <comment-images :images="images" :videos="videos" :type="imagesRows" @click-images="clickImages"></comment-images>
 
     <view v-if="follow && follow.days > 0" class="nut-comment__follow" @click="handleClick">
-      <view class="nut-comment__follow-title">购买{{ follow.days }}天后追评</view>
+      <view class="nut-comment__follow-title">{{ translate('additionalReview', follow.days) }}</view>
       <view class="nut-comment__follow-com">{{ follow.content }}</view>
       <view
         v-if="follow.images && follow.images.length > 0"
         class="nut-comment__follow-img"
         @click="clickImages(follow.images)"
-        >{{ follow.images.length }} 张追评图片 <Right size="12px"></Right
+        >{{ translate('additionalImages', follow.images.length) }} <Right size="12px"></Right
       ></view>
     </view>
 
@@ -42,12 +42,12 @@
 </template>
 <script lang="ts">
 import { computed, PropType } from 'vue';
-import { createComponent } from '@/packages/utils/create';
-const { componentName, create } = createComponent('comment');
 import { Right } from '@nutui/icons-vue-taro';
+import { createComponent } from '@/packages/utils/create';
 import CommentHeader from './components/CmtHeader.taro.vue';
 import CommentImages from './components/CmtImages.taro.vue';
 import CommentBottom from './components/CmtBottom.taro.vue';
+import { useLocale } from '@/packages/utils/useLocale';
 
 interface VideosType {
   id: number | string;
@@ -60,6 +60,9 @@ interface ImagesType {
   imgUrl: string;
 }
 
+const { create } = createComponent('comment');
+const cN = 'NutComment';
+
 export default create({
   props: {
     headerType: {
@@ -115,13 +118,7 @@ export default create({
   emits: ['click', 'clickImages', 'clickOperate'],
 
   setup(props, { emit }) {
-    const classes = computed(() => {
-      const prefixCls = componentName;
-      return {
-        [prefixCls]: true
-      };
-    });
-
+    const translate = useLocale(cN);
     const conEllipsis = computed(() => {
       if (props.ellipsis) return props.ellipsis;
 
@@ -139,7 +136,7 @@ export default create({
       emit('clickImages', value);
     };
 
-    return { classes, conEllipsis, clickOperate, handleClick, clickImages };
+    return { conEllipsis, clickOperate, handleClick, clickImages, translate };
   }
 });
 </script>
diff --git a/src/packages/__VUE/comment/index.vue b/src/packages/__VUE/comment/index.vue
index 20b1280f57..e97e8bd194 100644
--- a/src/packages/__VUE/comment/index.vue
+++ b/src/packages/__VUE/comment/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <view v-if="info && Object.keys(info)" :class="classes">
+  <view v-if="info && Object.keys(info)" class="nut-comment">
     <!-- 根据展示信息的多少，分为3种展示风格：simple，base，complex -->
     <comment-header :type="headerType" :info="info" :labels="labels" @handle-click="handleClick">
       <template #labels>
@@ -42,12 +42,12 @@
 </template>
 <script lang="ts">
 import { computed, PropType } from 'vue';
-import { createComponent } from '@/packages/utils/create';
-const { componentName, create, translate } = createComponent('comment');
 import { Right } from '@nutui/icons-vue';
+import { createComponent } from '@/packages/utils/create';
 import CommentHeader from './components/CmtHeader.vue';
 import CommentImages from './components/CmtImages.vue';
 import CommentBottom from './components/CmtBottom.vue';
+import { useLocale } from '@/packages/utils/useLocale';
 
 interface VideosType {
   id: number | string;
@@ -60,6 +60,9 @@ interface ImagesType {
   imgUrl: string;
 }
 
+const { create } = createComponent('comment');
+const cN = 'NutComment';
+
 export default create({
   props: {
     headerType: {
@@ -115,13 +118,7 @@ export default create({
   emits: ['click', 'clickImages', 'clickOperate'],
 
   setup(props, { emit }) {
-    const classes = computed(() => {
-      const prefixCls = componentName;
-      return {
-        [prefixCls]: true
-      };
-    });
-
+    const translate = useLocale(cN);
     const conEllipsis = computed(() => {
       if (props.ellipsis) return props.ellipsis;
 
@@ -139,7 +136,7 @@ export default create({
       emit('clickImages', value);
     };
 
-    return { classes, conEllipsis, clickOperate, handleClick, clickImages, translate };
+    return { conEllipsis, clickOperate, handleClick, clickImages, translate };
   }
 });
 </script>
diff --git a/src/packages/__VUE/countdown/index.taro.vue b/src/packages/__VUE/countdown/index.taro.vue
index cff9c75637..01d2846626 100644
--- a/src/packages/__VUE/countdown/index.taro.vue
+++ b/src/packages/__VUE/countdown/index.taro.vue
@@ -1,5 +1,5 @@
 <template>
-  <view :class="classes">
+  <view class="nut-countdown">
     <template v-if="slots.default">
       <slot></slot>
     </template>
@@ -13,7 +13,11 @@ import { toRefs, computed, watch, reactive, onBeforeMount } from 'vue';
 import { createComponent } from '@/packages/utils/create';
 import { getTimeStamp } from './util';
 import { padZero } from '@/packages/utils/util';
-const { componentName, create, translate } = createComponent('countdown');
+import { useLocale } from '@/packages/utils/useLocale';
+
+const { create } = createComponent('countdown');
+const cN = 'NutCountdown';
+
 export default create({
   props: {
     modelValue: {
@@ -76,6 +80,7 @@ export default create({
   ],
 
   setup(props: any, { emit, slots }) {
+    const translate = useLocale(cN);
     const state = reactive({
       restTime: 0, // 倒计时剩余时间时间
       timer: null,
@@ -84,13 +89,6 @@ export default create({
       diffTime: 0 // 设置了 startTime 时，与 date.now() 的差异
     });
 
-    const classes = computed(() => {
-      const prefixCls = componentName;
-      return {
-        [prefixCls]: true
-      };
-    });
-
     const renderTime = computed(() => {
       return formatRemainTime(state.restTime);
     });
@@ -275,7 +273,6 @@ export default create({
     return {
       ...toRefs(props),
       slots,
-      classes,
       start,
       pause,
       renderTime,
diff --git a/src/packages/__VUE/countdown/index.vue b/src/packages/__VUE/countdown/index.vue
index cff9c75637..01d2846626 100644
--- a/src/packages/__VUE/countdown/index.vue
+++ b/src/packages/__VUE/countdown/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <view :class="classes">
+  <view class="nut-countdown">
     <template v-if="slots.default">
       <slot></slot>
     </template>
@@ -13,7 +13,11 @@ import { toRefs, computed, watch, reactive, onBeforeMount } from 'vue';
 import { createComponent } from '@/packages/utils/create';
 import { getTimeStamp } from './util';
 import { padZero } from '@/packages/utils/util';
-const { componentName, create, translate } = createComponent('countdown');
+import { useLocale } from '@/packages/utils/useLocale';
+
+const { create } = createComponent('countdown');
+const cN = 'NutCountdown';
+
 export default create({
   props: {
     modelValue: {
@@ -76,6 +80,7 @@ export default create({
   ],
 
   setup(props: any, { emit, slots }) {
+    const translate = useLocale(cN);
     const state = reactive({
       restTime: 0, // 倒计时剩余时间时间
       timer: null,
@@ -84,13 +89,6 @@ export default create({
       diffTime: 0 // 设置了 startTime 时，与 date.now() 的差异
     });
 
-    const classes = computed(() => {
-      const prefixCls = componentName;
-      return {
-        [prefixCls]: true
-      };
-    });
-
     const renderTime = computed(() => {
       return formatRemainTime(state.restTime);
     });
@@ -275,7 +273,6 @@ export default create({
     return {
       ...toRefs(props),
       slots,
-      classes,
       start,
       pause,
       renderTime,
diff --git a/src/packages/__VUE/datepicker/index.vue b/src/packages/__VUE/datepicker/index.vue
index 18ec1d359a..4a09376101 100644
--- a/src/packages/__VUE/datepicker/index.vue
+++ b/src/packages/__VUE/datepicker/index.vue
@@ -28,7 +28,7 @@ import { PickerOption } from '../picker/types';
 import { createComponent } from '@/packages/utils/create';
 import { Formatter, Filter } from './type';
 import { padZero, isDate as isDateU } from '@/packages/utils/util';
-const { create, translate } = createComponent('date-picker');
+const { create } = createComponent('date-picker');
 
 const currentYear = new Date().getFullYear();
 function isDate(val: Date): val is Date {
@@ -38,12 +38,12 @@ function isDate(val: Date): val is Date {
 const zhCNType: {
   [props: string]: string;
 } = {
-  day: translate('day'),
-  year: translate('year'),
-  month: translate('month'),
-  hour: translate('hour'),
-  minute: translate('min'),
-  seconds: translate('seconds')
+  day: '日',
+  year: '年',
+  month: '月',
+  hour: '时',
+  minute: '分',
+  seconds: '秒'
 };
 export default create({
   components: {
diff --git a/src/packages/__VUE/dialog/index.taro.vue b/src/packages/__VUE/dialog/index.taro.vue
index 85bc8247eb..2c0a0748d2 100644
--- a/src/packages/__VUE/dialog/index.taro.vue
+++ b/src/packages/__VUE/dialog/index.taro.vue
@@ -14,7 +14,7 @@
     @click-overlay="onClickOverlay"
     @click-close-icon="closed"
   >
-    <view :class="classes">
+    <view :class="['nut-dialog', customClass]">
       <view v-if="$slots.header || title" class="nut-dialog__header">
         <slot v-if="$slots.header" name="header"></slot>
         <template v-else>{{ title }}</template>
@@ -50,11 +50,15 @@
 <script lang="ts">
 import { onMounted, computed, watch, ref, PropType, VNode, CSSProperties } from 'vue';
 import { createComponent } from '@/packages/utils/create';
-const { componentName, create, translate } = createComponent('dialog');
-import NutPopup from '../popup/index.taro.vue';
 import { popupProps } from '../popup/props';
+import NutPopup from '../popup/index.taro.vue';
 import NutButton from '../button/index.taro.vue';
 import { isPromise } from '@/packages/utils/util';
+import { useLocale } from '@/packages/utils/useLocale';
+
+const { create } = createComponent('dialog');
+const cN = 'NutDialog';
+
 export default create({
   inheritAttrs: false,
   components: {
@@ -128,6 +132,7 @@ export default create({
   },
   emits: ['update', 'update:visible', 'ok', 'cancel', 'opened', 'closed'],
   setup(props, { emit }) {
+    const translate = useLocale(cN);
     const showPopup = ref(props.visible);
     onMounted(() => {
       if (props.closeOnPopstate) {
@@ -147,13 +152,6 @@ export default create({
       }
     );
 
-    const classes = computed(() => {
-      return {
-        [componentName]: true,
-        [props.customClass]: true
-      };
-    });
-
     const update = (val: boolean) => {
       emit('update', val);
       emit('update:visible', val);
@@ -206,7 +204,6 @@ export default create({
 
     return {
       closed,
-      classes,
       onCancel,
       onOk,
       showPopup,
diff --git a/src/packages/__VUE/dialog/index.vue b/src/packages/__VUE/dialog/index.vue
index 859e09df0b..3fae50fd99 100644
--- a/src/packages/__VUE/dialog/index.vue
+++ b/src/packages/__VUE/dialog/index.vue
@@ -13,7 +13,7 @@
     @click-overlay="onClickOverlay"
     @click-close-icon="closed"
   >
-    <view :class="classes">
+    <view :class="['nut-dialog', customClass]">
       <view v-if="$slots.header || title" class="nut-dialog__header">
         <slot v-if="$slots.header" name="header"></slot>
         <template v-else>{{ title }}</template>
@@ -49,12 +49,16 @@
 <script lang="ts">
 import { onMounted, computed, watch, ref, PropType, VNode, CSSProperties } from 'vue';
 import { createComponent } from '@/packages/utils/create';
-const { componentName, create, translate } = createComponent('dialog');
 import { funInterceptor, Interceptor } from '@/packages/utils/util';
 import { popupProps } from '../popup/props';
 import NutPopup from '../popup/index.vue';
 import NutButton from '../button/index.vue';
+import { useLocale } from '@/packages/utils/useLocale';
 export type TextAlign = 'left' | 'center' | 'right' | 'top';
+
+const { create } = createComponent('dialog');
+const cN = 'NutDialog';
+
 export default create({
   inheritAttrs: false,
   components: {
@@ -126,6 +130,7 @@ export default create({
   },
   emits: ['update', 'update:visible', 'ok', 'cancel', 'opened', 'closed'],
   setup(props, { emit }) {
+    const translate = useLocale(cN);
     const showPopup = ref(props.visible);
     onMounted(() => {
       if (props.closeOnPopstate) {
@@ -145,13 +150,6 @@ export default create({
       }
     );
 
-    const classes = computed(() => {
-      return {
-        [componentName]: true,
-        [props.customClass]: true
-      };
-    });
-
     const update = (val: boolean) => {
       emit('update', val);
       emit('update:visible', val);
@@ -197,7 +195,6 @@ export default create({
 
     return {
       closed,
-      classes,
       onCancel,
       onOk,
       showPopup,
diff --git a/src/packages/__VUE/ecard/index.taro.vue b/src/packages/__VUE/ecard/index.taro.vue
index 4d14317b42..ff40c0e7ed 100644
--- a/src/packages/__VUE/ecard/index.taro.vue
+++ b/src/packages/__VUE/ecard/index.taro.vue
@@ -35,10 +35,15 @@ import { Ref, ref, watch } from 'vue';
 import { createComponent } from '@/packages/utils/create';
 import NutInputNumber from '../inputnumber/index.taro.vue';
 import type { PropType } from 'vue';
-const { create, translate } = createComponent('ecard');
+import { useLocale } from '@/packages/utils/useLocale';
+
 export interface dataList {
   price: string | number;
 }
+
+const { create } = createComponent('ecard');
+const cN = 'NutEcard';
+
 export default create({
   components: {
     NutInputNumber
@@ -73,7 +78,7 @@ export default create({
       default: 9999
     },
     modelValue: {
-      type: Number,
+      type: [Number, String],
       default: 0
     },
     placeholder: {
@@ -88,6 +93,7 @@ export default create({
   emits: ['inputChange', 'changeStep', 'inputClick', 'change', 'update:modelValue'],
 
   setup(props, { emit }) {
+    const translate = useLocale(cN);
     const currentIndex: Ref<number | null | string> = ref(null);
     const currentValue: Ref<number | null | string> = ref(null);
     const inputValue: Ref<string | undefined | number> = ref();
diff --git a/src/packages/__VUE/ecard/index.vue b/src/packages/__VUE/ecard/index.vue
index 071b8f232c..9780840e96 100644
--- a/src/packages/__VUE/ecard/index.vue
+++ b/src/packages/__VUE/ecard/index.vue
@@ -33,13 +33,17 @@
 <script lang="ts">
 import { Ref, ref, watch } from 'vue';
 import { createComponent } from '@/packages/utils/create';
-const { create, translate } = createComponent('ecard');
 import NutInputNumber from '../inputnumber/index.vue';
 import type { PropType } from 'vue';
+import { useLocale } from '@/packages/utils/useLocale';
 
 export interface dataList {
   price: string | number;
 }
+
+const { create } = createComponent('ecard');
+const cN = 'NutEcard';
+
 export default create({
   components: {
     NutInputNumber
@@ -89,6 +93,7 @@ export default create({
   emits: ['inputChange', 'changeStep', 'inputClick', 'change', 'update:modelValue'],
 
   setup(props, { emit }) {
+    const translate = useLocale(cN);
     const currentIndex: Ref<number | null | string> = ref(null);
     const currentValue: Ref<number | null | string | undefined> = ref(null);
     const inputValue: Ref<string | undefined | number> = ref('');
diff --git a/src/packages/__VUE/empty/index.taro.vue b/src/packages/__VUE/empty/index.taro.vue
index 43cdd3ea05..a6ece70960 100644
--- a/src/packages/__VUE/empty/index.taro.vue
+++ b/src/packages/__VUE/empty/index.taro.vue
@@ -18,7 +18,10 @@ import { computed, PropType } from 'vue';
 import { createComponent } from '@/packages/utils/create';
 import { EmptyImage } from './types';
 import { pxCheck } from '@/packages/utils/pxCheck';
-const { create, translate } = createComponent('empty');
+import { useLocale } from '@/packages/utils/useLocale';
+
+const { create } = createComponent('empty');
+const cN = 'NutEmpty';
 
 const defaultStatus: any = {
   empty: 'https://static-ftcms.jd.com/p/files/61a9e3183985005b3958672b.png',
@@ -42,6 +45,7 @@ export default create({
     }
   },
   setup(props) {
+    const translate = useLocale(cN);
     const style = computed(() => {
       if (props.imageSize) {
         return {
@@ -52,9 +56,13 @@ export default create({
       return {};
     });
 
-    const isHttpUrl =
-      props.image.startsWith('https://') || props.image.startsWith('http://') || props.image.startsWith('//');
-    const src = isHttpUrl ? props.image : defaultStatus[props.image];
+    const src = computed(() => {
+      if (props.image.startsWith('https://') || props.image.startsWith('http://') || props.image.startsWith('//')) {
+        return props.image;
+      } else {
+        return defaultStatus[props.image];
+      }
+    });
 
     return { src, style, translate };
   }
diff --git a/src/packages/__VUE/empty/index.vue b/src/packages/__VUE/empty/index.vue
index e631392f53..a6ece70960 100644
--- a/src/packages/__VUE/empty/index.vue
+++ b/src/packages/__VUE/empty/index.vue
@@ -18,7 +18,10 @@ import { computed, PropType } from 'vue';
 import { createComponent } from '@/packages/utils/create';
 import { EmptyImage } from './types';
 import { pxCheck } from '@/packages/utils/pxCheck';
-const { create, translate } = createComponent('empty');
+import { useLocale } from '@/packages/utils/useLocale';
+
+const { create } = createComponent('empty');
+const cN = 'NutEmpty';
 
 const defaultStatus: any = {
   empty: 'https://static-ftcms.jd.com/p/files/61a9e3183985005b3958672b.png',
@@ -42,6 +45,7 @@ export default create({
     }
   },
   setup(props) {
+    const translate = useLocale(cN);
     const style = computed(() => {
       if (props.imageSize) {
         return {
diff --git a/src/packages/__VUE/fixednav/index.taro.vue b/src/packages/__VUE/fixednav/index.taro.vue
index 7f0091774f..3e6db347eb 100644
--- a/src/packages/__VUE/fixednav/index.taro.vue
+++ b/src/packages/__VUE/fixednav/index.taro.vue
@@ -4,7 +4,11 @@ import { PropType, computed, ref } from 'vue';
 import { Left } from '@nutui/icons-vue-taro';
 import NutOverlay from '../overlay/index.taro.vue';
 import { createComponent } from '@/packages/utils/create';
-const { translate, create, componentName } = createComponent('fixed-nav');
+import { useLocale } from '@/packages/utils/useLocale';
+const { create } = createComponent('fixed-nav');
+
+const cN = 'NutFixedNav';
+
 export default create({
   components: {
     NutOverlay,
@@ -52,8 +56,9 @@ export default create({
   emits: ['update:visible', 'selected'],
 
   setup(props: any, { emit }: any) {
+    const translate = useLocale(cN);
     const classes = computed(() => {
-      const prefixCls = componentName;
+      const prefixCls = 'nut-fixed-nav';
       return {
         [prefixCls]: true,
         active: props.visible,
diff --git a/src/packages/__VUE/fixednav/index.vue b/src/packages/__VUE/fixednav/index.vue
index d6260d67be..e8299c58cb 100644
--- a/src/packages/__VUE/fixednav/index.vue
+++ b/src/packages/__VUE/fixednav/index.vue
@@ -4,7 +4,11 @@ import { PropType, computed, ref } from 'vue';
 import { Left } from '@nutui/icons-vue';
 import NutOverlay from '../overlay/index.vue';
 import { createComponent } from '@/packages/utils/create';
-const { translate, create, componentName } = createComponent('fixed-nav');
+import { useLocale } from '@/packages/utils/useLocale';
+const { create } = createComponent('fixed-nav');
+
+const cN = 'NutFixedNav';
+
 export default create({
   components: {
     NutOverlay,
@@ -52,8 +56,9 @@ export default create({
   emits: ['update:visible', 'selected'],
 
   setup(props: any, { emit }: any) {
+    const translate = useLocale(cN);
     const classes = computed(() => {
-      const prefixCls = componentName;
+      const prefixCls = 'nut-fixed-nav';
       return {
         [prefixCls]: true,
         active: props.visible,
diff --git a/src/packages/__VUE/infiniteloading/index.vue b/src/packages/__VUE/infiniteloading/index.vue
index e372fedf4e..7e258fc051 100644
--- a/src/packages/__VUE/infiniteloading/index.vue
+++ b/src/packages/__VUE/infiniteloading/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <view ref="scroller" :class="classes">
+  <view ref="scroller" class="nut-infinite-loading">
     <view class="nut-infinite__container">
       <slot></slot>
     </view>
@@ -22,24 +22,16 @@
   </view>
 </template>
 <script lang="ts">
-import {
-  toRefs,
-  onMounted,
-  onUnmounted,
-  reactive,
-  computed,
-  onActivated,
-  onDeactivated,
-  ref,
-  watch,
-  nextTick
-} from 'vue';
+import { toRefs, onMounted, onUnmounted, reactive, onActivated, onDeactivated, ref, watch, nextTick } from 'vue';
 import { createComponent } from '@/packages/utils/create';
-const { componentName, create, translate } = createComponent('infinite-loading');
+const { create } = createComponent('infinite-loading');
 import { useScrollParent } from '@/packages/utils/useScrollParent';
 import requestAniFrame from '@/packages/utils/raf';
 import { getScrollTopRoot } from '@/packages/utils/util';
 import { Loading } from '@nutui/icons-vue';
+import { useLocale } from '@/packages/utils/useLocale';
+
+const cN = 'NutInfiniteLoading';
 
 export default create({
   props: {
@@ -73,6 +65,7 @@ export default create({
     Loading
   },
   setup(props, { emit, slots }) {
+    const translate = useLocale(cN);
     const scroller = ref<HTMLElement>();
     const scrollParent = useScrollParent(scroller);
     const state = reactive({
@@ -83,13 +76,6 @@ export default create({
       distance: 0
     });
 
-    const classes = computed(() => {
-      const prefixCls = componentName;
-      return {
-        [prefixCls]: true
-      };
-    });
-
     const calculateTopPosition = (el: HTMLElement): number => {
       return !el ? 0 : el.offsetTop + calculateTopPosition(el.offsetParent as HTMLElement);
     };
@@ -180,7 +166,6 @@ export default create({
     );
 
     return {
-      classes,
       scroller,
       ...toRefs(state),
       translate,
diff --git a/src/packages/__VUE/numberkeyboard/index.taro.vue b/src/packages/__VUE/numberkeyboard/index.taro.vue
index 2857210c6f..caa7450d62 100644
--- a/src/packages/__VUE/numberkeyboard/index.taro.vue
+++ b/src/packages/__VUE/numberkeyboard/index.taro.vue
@@ -80,11 +80,13 @@
 import { computed, ref, watch, Ref, PropType } from 'vue';
 import { createComponent } from '@/packages/utils/create';
 import NutPopup from '../popup/index.taro.vue';
-const { create, translate } = createComponent('number-keyboard');
+import { useLocale } from '@/packages/utils/useLocale';
+const { create } = createComponent('number-keyboard');
 export interface keys {
   id: number | string;
   type: string;
 }
+const cN = 'NutNumberKeyboard';
 export default create({
   components: {
     NutPopup
@@ -137,6 +139,7 @@ export default create({
   },
   emits: ['input', 'delete', 'close', 'update:modelValue', 'update:visible'],
   setup(props, { emit }) {
+    const translate = useLocale(cN);
     const clickKeyIndex: Ref<string | undefined | number> = ref(undefined);
     const show = ref(props.visible);
     const root = ref<HTMLElement>();
@@ -231,9 +234,10 @@ export default create({
     }
 
     function closeBoard() {
-      emit('close');
       emit('update:visible', false);
+      emit('close');
     }
+
     return {
       clickKeyIndex,
       defaultKey,
diff --git a/src/packages/__VUE/numberkeyboard/index.vue b/src/packages/__VUE/numberkeyboard/index.vue
index ff9858fb25..e6740858c3 100644
--- a/src/packages/__VUE/numberkeyboard/index.vue
+++ b/src/packages/__VUE/numberkeyboard/index.vue
@@ -80,11 +80,13 @@
 import { computed, ref, watch, Ref, PropType } from 'vue';
 import { createComponent } from '@/packages/utils/create';
 import NutPopup from '../popup/index.vue';
-const { create, translate } = createComponent('number-keyboard');
+import { useLocale } from '@/packages/utils/useLocale';
+const { create } = createComponent('number-keyboard');
 export interface keys {
   id: number | string;
   type: string;
 }
+const cN = 'NutNumberKeyboard';
 export default create({
   components: {
     NutPopup
@@ -133,6 +135,7 @@ export default create({
   },
   emits: ['input', 'delete', 'close', 'blur', 'update:modelValue', 'update:visible'],
   setup(props, { emit }) {
+    const translate = useLocale(cN);
     const clickKeyIndex: Ref<string | undefined | number> = ref(undefined);
     const show = ref(props.visible);
     const root = ref();
diff --git a/src/packages/__VUE/pagination/index.taro.vue b/src/packages/__VUE/pagination/index.taro.vue
index e29197181c..92c32aaff1 100644
--- a/src/packages/__VUE/pagination/index.taro.vue
+++ b/src/packages/__VUE/pagination/index.taro.vue
@@ -36,7 +36,10 @@
 <script lang="ts">
 import { toRefs, watchEffect, computed } from 'vue';
 import { createComponent } from '@/packages/utils/create';
-const { create, translate } = createComponent('pagination');
+import { useLocale } from '@/packages/utils/useLocale';
+const { create } = createComponent('pagination');
+
+const cN = 'NutPagination';
 
 export default create({
   props: {
@@ -82,6 +85,7 @@ export default create({
   emits: ['change', 'update:modelValue'],
 
   setup(props, { emit }) {
+    const translate = useLocale(cN);
     const { modelValue, mode, showPageSize, forceEllipses } = toRefs(props);
 
     //计算页面的数量
diff --git a/src/packages/__VUE/pagination/index.vue b/src/packages/__VUE/pagination/index.vue
index e29197181c..92c32aaff1 100644
--- a/src/packages/__VUE/pagination/index.vue
+++ b/src/packages/__VUE/pagination/index.vue
@@ -36,7 +36,10 @@
 <script lang="ts">
 import { toRefs, watchEffect, computed } from 'vue';
 import { createComponent } from '@/packages/utils/create';
-const { create, translate } = createComponent('pagination');
+import { useLocale } from '@/packages/utils/useLocale';
+const { create } = createComponent('pagination');
+
+const cN = 'NutPagination';
 
 export default create({
   props: {
@@ -82,6 +85,7 @@ export default create({
   emits: ['change', 'update:modelValue'],
 
   setup(props, { emit }) {
+    const translate = useLocale(cN);
     const { modelValue, mode, showPageSize, forceEllipses } = toRefs(props);
 
     //计算页面的数量
diff --git a/src/packages/__VUE/picker/common.ts b/src/packages/__VUE/picker/common.ts
index c08ca08421..1afbccd516 100644
--- a/src/packages/__VUE/picker/common.ts
+++ b/src/packages/__VUE/picker/common.ts
@@ -1,11 +1,12 @@
 import { ref, reactive, computed, CSSProperties, toRefs } from 'vue';
-import { createComponent } from '@/packages/utils/create';
 import { pxCheck } from '@/packages/utils/pxCheck';
-const { translate } = createComponent('picker');
 import { usePicker } from './usePicker';
 import NutPickerColumn from './Column.vue';
 import Taro from '@tarojs/taro';
 import baseProps from './baseProps';
+import { useLocale } from '@/packages/utils/useLocale';
+
+const cN = 'NutPicker';
 
 export const componentWeb = {
   components: {
@@ -14,6 +15,7 @@ export const componentWeb = {
   props: baseProps,
   emits: ['cancel', 'change', 'confirm', 'update:modelValue'],
   setup(props: any, { emit }: any) {
+    const translate = useLocale(cN);
     const { changeHandler, confirm, defaultValues, columnsList, columnsType, columnFieldNames, cancel } = usePicker(
       props,
       emit
@@ -75,6 +77,7 @@ export const componentWeapp = {
   props: baseProps,
   emits: ['cancel', 'change', 'confirm', 'update:modelValue'],
   setup(props: any, { emit }: any) {
+    const translate = useLocale(cN);
     const {
       changeHandler,
       confirm,
diff --git a/src/packages/__VUE/picker/index.vue b/src/packages/__VUE/picker/index.vue
index 7198a7abed..23230e5682 100644
--- a/src/packages/__VUE/picker/index.vue
+++ b/src/packages/__VUE/picker/index.vue
@@ -38,7 +38,10 @@ import { createComponent } from '@/packages/utils/create';
 import { usePicker } from './usePicker';
 import NutPickerColumn from './Column.vue';
 import baseProps from './baseProps';
-const { create, translate } = createComponent('picker');
+import { useLocale } from '@/packages/utils/useLocale';
+const { create } = createComponent('picker');
+
+const cN = 'NutPicker';
 
 export default create({
   components: {
@@ -47,6 +50,7 @@ export default create({
   props: baseProps,
   emits: ['cancel', 'change', 'confirm', 'update:modelValue'],
   setup(props, { emit }) {
+    const translate = useLocale(cN);
     const { changeHandler, confirm, defaultValues, columnsList, columnsType, columnFieldNames, cancel } = usePicker(
       props,
       emit
diff --git a/src/packages/__VUE/pullrefresh/index.vue b/src/packages/__VUE/pullrefresh/index.vue
index b217ca2166..d04766b253 100644
--- a/src/packages/__VUE/pullrefresh/index.vue
+++ b/src/packages/__VUE/pullrefresh/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div ref="scroller" :class="classes" @touchstart="touchStart" @touchmove="touchMove" @touchend="touchEnd">
+  <div ref="scroller" class="nut-pull-refresh" @touchstart="touchStart" @touchmove="touchMove" @touchend="touchEnd">
     <div class="nut-pull-refresh-container" :style="getStyle">
       <div class="nut-pull-refresh-container-topbox" :style="getHeightStyle">
         <Loading
@@ -21,15 +21,18 @@
 <script lang="ts">
 import { toRefs, reactive, computed, CSSProperties, ref, nextTick, watch } from 'vue';
 import { createComponent } from '@/packages/utils/create';
-const { componentName, create, translate } = createComponent('pull-refresh');
+const { create } = createComponent('pull-refresh');
 import { useTouch } from '@/packages/utils/useTouch';
 import { getScrollTopRoot } from '@/packages/utils/util';
 import { pxCheck } from '@/packages/utils/pxCheck';
 import { useScrollParent } from '@/packages/utils/useScrollParent';
 import { Loading } from '@nutui/icons-vue';
+import { useLocale } from '@/packages/utils/useLocale';
 
 type PullRefreshStatus = 'normal' | 'loading' | 'loosing' | 'pulling' | 'complete';
 
+const cN = 'NutPullRefresh';
+
 export default create({
   props: {
     modelValue: {
@@ -39,15 +42,15 @@ export default create({
 
     pullingTxt: {
       type: String,
-      default: translate('pulling')
+      default: ''
     },
     loosingTxt: {
       type: String,
-      default: translate('loosing')
+      default: ''
     },
     loadingTxt: {
       type: String,
-      default: translate('loading')
+      default: ''
     },
 
     // completeTxt: {
@@ -73,6 +76,7 @@ export default create({
   components: { Loading },
 
   setup(props, { emit, slots }) {
+    const translate = useLocale(cN);
     const touch: any = useTouch();
     const scroller = ref<HTMLElement>();
     const scrollParent = useScrollParent(scroller);
@@ -87,21 +91,14 @@ export default create({
       status: 'normal'
     });
 
-    const classes = computed(() => {
-      const prefixCls = componentName;
-      return {
-        [prefixCls]: true
-      };
-    });
-
     const getPullStatus = computed(() => {
       switch (state.status) {
         case 'pulling':
-          return !slots.pulling ? props.pullingTxt : '';
+          return !slots.pulling ? props.pullingTxt || translate('pulling') : '';
         case 'loosing':
-          return !slots.loosing ? props.loosingTxt : '';
+          return !slots.loosing ? props.loosingTxt || translate('loosing') : '';
         case 'loading':
-          return !slots.loading ? props.loadingTxt : '';
+          return !slots.loading ? props.loadingTxt || translate('loading') : '';
         // case 'complete':
         //   return !slots.complete ? props.completeTxt : '';
         default:
@@ -217,7 +214,6 @@ export default create({
     );
 
     return {
-      classes,
       scroller,
       ...toRefs(state),
       touchStart,
diff --git a/src/packages/__VUE/searchbar/index.taro.vue b/src/packages/__VUE/searchbar/index.taro.vue
index e4b94aea83..593570551a 100644
--- a/src/packages/__VUE/searchbar/index.taro.vue
+++ b/src/packages/__VUE/searchbar/index.taro.vue
@@ -57,9 +57,12 @@ import { toRefs, reactive, computed, ref, onMounted, PropType, Ref, CSSPropertie
 import { createComponent, renderIcon } from '@/packages/utils/create';
 import { CircleClose } from '@nutui/icons-vue-taro';
 import { TextAlign } from './type';
-const { create, translate } = createComponent('searchbar');
+import { useLocale } from '@/packages/utils/useLocale';
+const { create } = createComponent('searchbar');
 export type confirmTextType = 'send' | 'search' | 'next' | 'go' | 'done';
 
+const cN = 'NutSearchbar';
+
 export default create({
   props: {
     modelValue: {
@@ -145,6 +148,7 @@ export default create({
   ],
 
   setup(props, { emit }) {
+    const translate = useLocale(cN);
     const state = reactive({
       active: false
     });
diff --git a/src/packages/__VUE/searchbar/index.vue b/src/packages/__VUE/searchbar/index.vue
index 7536d8b652..3e9d5bcd6b 100644
--- a/src/packages/__VUE/searchbar/index.vue
+++ b/src/packages/__VUE/searchbar/index.vue
@@ -59,7 +59,11 @@ import { toRefs, reactive, computed, onMounted, ref, Ref, CSSProperties } from '
 import { createComponent, renderIcon } from '@/packages/utils/create';
 import { CircleClose } from '@nutui/icons-vue';
 import { TextAlign } from './type';
-const { create, translate } = createComponent('searchbar');
+import { useLocale } from '@/packages/utils/useLocale';
+const { create } = createComponent('searchbar');
+
+const cN = 'NutSearchbar';
+
 export default create({
   props: {
     modelValue: {
@@ -141,6 +145,7 @@ export default create({
   ],
 
   setup(props, { emit }) {
+    const translate = useLocale(cN);
     const state = reactive({
       active: false
     });
diff --git a/src/packages/__VUE/shortpassword/index.taro.vue b/src/packages/__VUE/shortpassword/index.taro.vue
index 0655b268b4..fc68ab655b 100644
--- a/src/packages/__VUE/shortpassword/index.taro.vue
+++ b/src/packages/__VUE/shortpassword/index.taro.vue
@@ -39,8 +39,12 @@ import { ref, computed, watch, onMounted } from 'vue';
 import { createComponent } from '@/packages/utils/create';
 import NutPopup from '../popup/index.taro.vue';
 import { Tips } from '@nutui/icons-vue-taro';
-const { create, translate } = createComponent('short-password');
+import { useLocale } from '@/packages/utils/useLocale';
+const { create } = createComponent('short-password');
 import { eventCenter, getCurrentInstance } from '@tarojs/taro';
+
+const cN = 'NutShortPassword';
+
 export default create({
   components: {
     NutPopup,
@@ -86,6 +90,7 @@ export default create({
   },
   emits: ['update:modelValue', 'update:visible', 'complete', 'tips', 'close', 'focus'],
   setup(props, { emit }) {
+    const translate = useLocale(cN);
     const realInput = ref(props.modelValue);
     const comLen = computed(() => range(Number(props.length)));
     const show = ref(props.visible);
diff --git a/src/packages/__VUE/shortpassword/index.vue b/src/packages/__VUE/shortpassword/index.vue
index dae3703f11..a394da8e28 100644
--- a/src/packages/__VUE/shortpassword/index.vue
+++ b/src/packages/__VUE/shortpassword/index.vue
@@ -39,7 +39,11 @@ import { ref, computed, watch } from 'vue';
 import { createComponent } from '@/packages/utils/create';
 import NutPopup from '../popup/index.vue';
 import { Tips } from '@nutui/icons-vue';
-const { create, translate } = createComponent('short-password');
+import { useLocale } from '@/packages/utils/useLocale';
+const { create } = createComponent('short-password');
+
+const cN = 'NutShortPassword';
+
 export default create({
   components: {
     NutPopup,
@@ -85,6 +89,7 @@ export default create({
   },
   emits: ['update:modelValue', 'update:visible', 'complete', 'tips', 'close', 'focus'],
   setup(props, { emit }) {
+    const translate = useLocale(cN);
     const realInput = ref(props.modelValue);
     const comLen = computed(() => range(Number(props.length)));
     const show = ref(props.visible);
diff --git a/src/packages/__VUE/signature/index.taro.vue b/src/packages/__VUE/signature/index.taro.vue
index 1d22c8cb37..74234bd1ed 100644
--- a/src/packages/__VUE/signature/index.taro.vue
+++ b/src/packages/__VUE/signature/index.taro.vue
@@ -23,7 +23,10 @@ import Taro from '@tarojs/taro';
 import { ref, reactive, onMounted, computed } from 'vue';
 import { createComponent } from '@/packages/utils/create';
 import NutButton from '../button/index.taro.vue';
-const { componentName, create, translate } = createComponent('signature');
+import { useLocale } from '@/packages/utils/useLocale';
+const { create } = createComponent('signature');
+
+const cN = 'NutSignature';
 
 export default create({
   props: {
@@ -54,8 +57,9 @@ export default create({
   emits: ['start', 'end', 'signing', 'confirm', 'clear'],
 
   setup(props, { emit }) {
+    const translate = useLocale(cN);
     const classes = computed(() => {
-      const prefixCls = componentName;
+      const prefixCls = 'nut-signature';
       return {
         [prefixCls]: true,
         [`${props.customClass}`]: props.customClass
diff --git a/src/packages/__VUE/signature/index.vue b/src/packages/__VUE/signature/index.vue
index 6d5981fad7..3a70522648 100644
--- a/src/packages/__VUE/signature/index.vue
+++ b/src/packages/__VUE/signature/index.vue
@@ -13,7 +13,10 @@
 import { ref, reactive, onMounted, computed, toRefs } from 'vue';
 import { createComponent } from '@/packages/utils/create';
 import NutButton from '../button/index.vue';
-const { componentName, create, translate } = createComponent('signature');
+import { useLocale } from '@/packages/utils/useLocale';
+const { create } = createComponent('signature');
+
+const cN = 'NutSignature';
 
 export default create({
   props: {
@@ -52,10 +55,11 @@ export default create({
   emits: ['start', 'end', 'signing', 'confirm', 'clear'],
 
   setup(props, { emit }) {
+    const translate = useLocale(cN);
     const canvas: any = ref<HTMLElement | null>(null);
     const wrap: any = ref<HTMLElement | null>(null);
     const classes = computed(() => {
-      const prefixCls = componentName;
+      const prefixCls = 'nut-signature';
       return {
         [prefixCls]: true,
         [`${props.customClass}`]: props.customClass
diff --git a/src/packages/__VUE/sku/components/SkuHeader.taro.vue b/src/packages/__VUE/sku/components/SkuHeader.taro.vue
index 97b98ecba3..fd17b754ef 100644
--- a/src/packages/__VUE/sku/components/SkuHeader.taro.vue
+++ b/src/packages/__VUE/sku/components/SkuHeader.taro.vue
@@ -1,7 +1,6 @@
 <template>
   <view class="nut-sku-header">
-    <image v-if="ENV != ENV_TYPE.WEB" class="nut-sku-header-img" :src="goods.imagePath" />
-    <img v-else class="nut-sku-header-img" :src="goods.imagePath" />
+    <img class="nut-sku-header-img" :src="goods.imagePath" />
     <view class="nut-sku-header-right">
       <template v-if="getSlots('sku-header-price')">
         <slot name="sku-header-price"></slot>
@@ -18,11 +17,12 @@
   </view>
 </template>
 <script lang="ts">
-import { reactive, toRefs } from 'vue';
 import NutPrice from '../../price/index.taro.vue';
 import { createComponent } from '@/packages/utils/create';
-import Taro from '@tarojs/taro';
-const { create, translate } = createComponent('sku-header');
+import { useLocale } from '@/packages/utils/useLocale';
+const { create } = createComponent('sku-header');
+
+const cN = 'NutSkuHeader';
 
 export default create({
   props: {
@@ -35,17 +35,12 @@ export default create({
     NutPrice
   },
   setup(props, { slots }) {
+    const translate = useLocale(cN);
     const getSlots = (name: string) => slots[name];
 
-    const state = reactive({
-      ENV: Taro.getEnv(),
-      ENV_TYPE: Taro.ENV_TYPE
-    });
-
     return {
       getSlots,
-      translate,
-      ...toRefs(state)
+      translate
     };
   }
 });
diff --git a/src/packages/__VUE/sku/components/SkuHeader.vue b/src/packages/__VUE/sku/components/SkuHeader.vue
index 5916851714..fd919f81b8 100644
--- a/src/packages/__VUE/sku/components/SkuHeader.vue
+++ b/src/packages/__VUE/sku/components/SkuHeader.vue
@@ -19,7 +19,10 @@
 <script lang="ts">
 import NutPrice from '../../price/index.vue';
 import { createComponent } from '@/packages/utils/create';
-const { create, translate } = createComponent('sku-header');
+import { useLocale } from '@/packages/utils/useLocale';
+const { create } = createComponent('sku-header');
+
+const cN = 'NutSkuHeader';
 
 export default create({
   props: {
@@ -28,11 +31,11 @@ export default create({
       default: {}
     }
   },
-  emits: [],
   components: {
     NutPrice
   },
   setup(props, { slots }) {
+    const translate = useLocale(cN);
     const getSlots = (name: string) => slots[name];
 
     return {
diff --git a/src/packages/__VUE/sku/index.taro.vue b/src/packages/__VUE/sku/index.taro.vue
index b54028f75d..b73d79cdfe 100644
--- a/src/packages/__VUE/sku/index.taro.vue
+++ b/src/packages/__VUE/sku/index.taro.vue
@@ -69,7 +69,10 @@ import SkuStepper from './components/SkuStepper.taro.vue';
 import SkuOperate from './components/SkuOperate.vue';
 import NutPopup from '../popup/index.taro.vue';
 import { createComponent } from '@/packages/utils/create';
-const { create, translate } = createComponent('sku');
+import { useLocale } from '@/packages/utils/useLocale';
+const { create } = createComponent('sku');
+
+const cN = 'NutSku';
 
 export default create({
   props: {
@@ -168,6 +171,8 @@ export default create({
   },
 
   setup(props: any, { emit, slots }) {
+    const translate = useLocale(cN);
+
     const showPopup = ref(props.visible);
 
     const goodsCount = ref(props.stepperMin);
diff --git a/src/packages/__VUE/sku/index.vue b/src/packages/__VUE/sku/index.vue
index ec4a53ae15..1c7fe1032b 100644
--- a/src/packages/__VUE/sku/index.vue
+++ b/src/packages/__VUE/sku/index.vue
@@ -69,7 +69,10 @@ import SkuStepper from './components/SkuStepper.vue';
 import SkuOperate from './components/SkuOperate.vue';
 import NutPopup from '../popup/index.vue';
 import { createComponent } from '@/packages/utils/create';
-const { create, translate } = createComponent('sku');
+import { useLocale } from '@/packages/utils/useLocale';
+const { create } = createComponent('sku');
+
+const cN = 'NutSku';
 
 export default create({
   props: {
@@ -168,6 +171,8 @@ export default create({
   },
 
   setup(props: any, { emit, slots }) {
+    const translate = useLocale(cN);
+
     const showPopup = ref(props.visible);
 
     const goodsCount = ref(props.stepperMin);
diff --git a/src/packages/__VUE/table/index.taro.vue b/src/packages/__VUE/table/index.taro.vue
index 1a172c7306..44bbdc78a2 100644
--- a/src/packages/__VUE/table/index.taro.vue
+++ b/src/packages/__VUE/table/index.taro.vue
@@ -52,10 +52,14 @@
 <script lang="ts">
 import { PropType, reactive, toRefs, watch } from 'vue';
 import { createComponent } from '@/packages/utils/create';
-const { create, translate } = createComponent('table');
+const { create } = createComponent('table');
 import RenderColumn from './renderColumn';
 import { DownArrow } from '@nutui/icons-vue-taro';
 import { TableColumnProps } from './types';
+import { useLocale } from '@/packages/utils/useLocale';
+
+const cN = 'NutTable';
+
 export default create({
   components: {
     RenderColumn,
@@ -85,6 +89,8 @@ export default create({
   },
   emits: ['sorter'],
   setup(props: any, { emit }) {
+    const translate = useLocale(cN);
+
     const state = reactive({
       curData: props.data
     });
diff --git a/src/packages/__VUE/table/index.vue b/src/packages/__VUE/table/index.vue
index 91a3dd43c1..cf35287121 100644
--- a/src/packages/__VUE/table/index.vue
+++ b/src/packages/__VUE/table/index.vue
@@ -52,10 +52,14 @@
 <script lang="ts">
 import { PropType, reactive, toRefs, watch } from 'vue';
 import { createComponent } from '@/packages/utils/create';
-const { create, translate } = createComponent('table');
+const { create } = createComponent('table');
 import RenderColumn from './renderColumn';
 import { DownArrow } from '@nutui/icons-vue';
 import { TableColumnProps } from './types';
+import { useLocale } from '@/packages/utils/useLocale';
+
+const cN = 'NutTable';
+
 export default create({
   components: {
     RenderColumn,
@@ -85,6 +89,8 @@ export default create({
   },
   emits: ['sorter'],
   setup(props: any, { emit }) {
+    const translate = useLocale(cN);
+
     const state = reactive({
       curData: props.data
     });
diff --git a/src/packages/__VUE/textarea/index.taro.vue b/src/packages/__VUE/textarea/index.taro.vue
index 58c8270ce2..b5ddf02940 100644
--- a/src/packages/__VUE/textarea/index.taro.vue
+++ b/src/packages/__VUE/textarea/index.taro.vue
@@ -35,10 +35,15 @@
 import { computed, nextTick, onMounted, ref, watch } from 'vue';
 import { createComponent } from '@/packages/utils/create';
 import Taro from '@tarojs/taro';
-const { componentName, create, translate } = createComponent('textarea');
+import { useLocale } from '@/packages/utils/useLocale';
+
 export interface InputTarget extends HTMLInputElement {
   composing?: boolean;
 }
+
+const { create } = createComponent('textarea');
+const cN = 'NutTextarea';
+
 export default create({
   inheritAttrs: false,
   props: {
@@ -87,8 +92,9 @@ export default create({
   emits: ['update:modelValue', 'change', 'blur', 'focus'],
 
   setup(props, { emit }) {
+    const translate = useLocale(cN);
     const classes = computed(() => {
-      const prefixCls = componentName;
+      const prefixCls = 'nut-textarea';
       return {
         [prefixCls]: true,
         [`${prefixCls}--disabled`]: props.disabled
diff --git a/src/packages/__VUE/textarea/index.vue b/src/packages/__VUE/textarea/index.vue
index c8db94221f..78421864df 100644
--- a/src/packages/__VUE/textarea/index.vue
+++ b/src/packages/__VUE/textarea/index.vue
@@ -25,11 +25,15 @@
 <script lang="ts">
 import { watch, ref, computed, onMounted, nextTick } from 'vue';
 import { createComponent } from '@/packages/utils/create';
+import { useLocale } from '@/packages/utils/useLocale';
 
-const { componentName, create, translate } = createComponent('textarea');
 export interface InputTarget extends HTMLInputElement {
   composing: boolean;
 }
+
+const { create } = createComponent('textarea');
+const cN = 'NutTextarea';
+
 export default create({
   props: {
     modelValue: {
@@ -77,9 +81,10 @@ export default create({
   emits: ['update:modelValue', 'change', 'blur', 'focus'],
 
   setup(props, { emit }) {
+    const translate = useLocale(cN);
     const textareaRef = ref();
     const classes = computed(() => {
-      const prefixCls = componentName;
+      const prefixCls = 'nut-textarea';
       return {
         [prefixCls]: true,
         [`${prefixCls}--disabled`]: props.disabled
diff --git a/src/packages/__VUE/timeselect/index.taro.vue b/src/packages/__VUE/timeselect/index.taro.vue
index b28819c5e4..5ba5e56803 100644
--- a/src/packages/__VUE/timeselect/index.taro.vue
+++ b/src/packages/__VUE/timeselect/index.taro.vue
@@ -32,7 +32,11 @@
 import { computed, provide } from 'vue';
 import { createComponent } from '@/packages/utils/create';
 import NutPopup from '../popup/index.taro.vue';
-const { create, translate } = createComponent('time-select');
+import { useLocale } from '@/packages/utils/useLocale';
+const { create } = createComponent('time-select');
+
+const cN = 'NutTimeSelect';
+
 export default create({
   components: {
     NutPopup
@@ -67,6 +71,7 @@ export default create({
   },
   emits: ['update:visible', 'select'],
   setup: (props, { emit }) => {
+    const translate = useLocale(cN);
     const popStyle = computed(() => {
       return {
         width: '100%',
diff --git a/src/packages/__VUE/timeselect/index.vue b/src/packages/__VUE/timeselect/index.vue
index 5df626d0fe..b315badffb 100644
--- a/src/packages/__VUE/timeselect/index.vue
+++ b/src/packages/__VUE/timeselect/index.vue
@@ -32,7 +32,11 @@
 import { computed, provide } from 'vue';
 import { createComponent } from '@/packages/utils/create';
 import NutPopup from '../popup/index.vue';
-const { create, translate } = createComponent('time-select');
+import { useLocale } from '@/packages/utils/useLocale';
+const { create } = createComponent('time-select');
+
+const cN = 'NutTimeSelect';
+
 export default create({
   components: {
     NutPopup
@@ -71,6 +75,7 @@ export default create({
   },
   emits: ['update:visible', 'select'],
   setup: (props, { emit }) => {
+    const translate = useLocale(cN);
     const popStyle = computed(() => {
       return {
         width: '100%',
diff --git a/src/packages/__VUE/uploader/index.taro.vue b/src/packages/__VUE/uploader/index.taro.vue
index 5079193e05..c437c2ef04 100644
--- a/src/packages/__VUE/uploader/index.taro.vue
+++ b/src/packages/__VUE/uploader/index.taro.vue
@@ -78,9 +78,13 @@ import { FileItem, MediaType, SizeType, SourceType } from './type';
 import { funInterceptor, Interceptor } from '@/packages/utils/util';
 import NutProgress from '../progress/index.taro.vue';
 import NutButton from '../button/index.taro.vue';
-const { create, translate } = createComponent('uploader');
 import Taro from '@tarojs/taro';
 import { Photograph, Failure, Loading, Del, Link } from '@nutui/icons-vue-taro';
+import { useLocale } from '@/packages/utils/useLocale';
+
+const { create } = createComponent('uploader');
+const cN = 'NutUploader';
+
 export default create({
   components: {
     NutProgress,
@@ -159,6 +163,7 @@ export default create({
     'fileItemClick'
   ],
   setup(props, { emit }) {
+    const translate = useLocale(cN);
     const fileList = ref(props.fileList as Array<FileItem>);
     const uploadQueue = ref<Promise<UploaderTaro>[]>([]);
 
@@ -334,6 +339,7 @@ export default create({
         let fileType = file.type;
         let filepath = (file.tempFilePath || file.path) as string;
         const fileItem = reactive(new FileItem());
+        fileItem.message = translate('ready');
         if (file.fileType) {
           fileType = file.fileType;
         } else {
diff --git a/src/packages/__VUE/uploader/index.vue b/src/packages/__VUE/uploader/index.vue
index 23c93204a5..3f1ef5645a 100644
--- a/src/packages/__VUE/uploader/index.vue
+++ b/src/packages/__VUE/uploader/index.vue
@@ -78,7 +78,11 @@ import { FileItem } from './type';
 import { funInterceptor, Interceptor } from '@/packages/utils/util';
 import NutProgress from '../progress/index.vue';
 import { Photograph, Failure, Loading, Del, Link } from '@nutui/icons-vue';
-const { create, translate } = createComponent('uploader');
+import { useLocale } from '@/packages/utils/useLocale';
+
+const { create } = createComponent('uploader');
+const cN = 'NutUploader';
+
 export default create({
   components: {
     NutProgress,
@@ -139,6 +143,7 @@ export default create({
     'fileItemClick'
   ],
   setup(props, { emit }) {
+    const translate = useLocale(cN);
     const fileList = ref(props.fileList as Array<FileItem>);
     const uploadQueue = ref<Promise<Uploader>[]>([]);
 
diff --git a/src/packages/__VUE/uploader/type.ts b/src/packages/__VUE/uploader/type.ts
index 25a6eba835..75fcdf9a40 100644
--- a/src/packages/__VUE/uploader/type.ts
+++ b/src/packages/__VUE/uploader/type.ts
@@ -1,12 +1,10 @@
-import { createComponent } from '@/packages/utils/create';
-const { translate } = createComponent('uploader');
 export type SizeType = 'original' | 'compressed';
 export type SourceType = 'album' | 'camera';
 export type MediaType = 'image' | 'video' | 'mix';
 export type FileItemStatus = 'ready' | 'uploading' | 'success' | 'error';
 export class FileItem {
   status: FileItemStatus = 'ready';
-  message: string = translate('ready');
+  message: string = '';
   uid: string = new Date().getTime().toString();
   name?: string;
   url?: string;
diff --git a/src/packages/__VUE/video/index.vue b/src/packages/__VUE/video/index.vue
index 1572f12fb9..19e9abbb98 100644
--- a/src/packages/__VUE/video/index.vue
+++ b/src/packages/__VUE/video/index.vue
@@ -60,7 +60,10 @@
 import { computed, reactive, ref, toRefs, watch, nextTick, onMounted, Ref } from 'vue';
 import { createComponent } from '@/packages/utils/create';
 import { throttle } from '@/packages/utils/throttle';
-const { create, translate } = createComponent('video');
+import { useLocale } from '@/packages/utils/useLocale';
+
+const { create } = createComponent('video');
+const cN = 'NutVideo';
 
 export default create({
   props: {
@@ -93,6 +96,7 @@ export default create({
   emits: ['click', 'play', 'pause', 'playend', 'time'],
 
   setup(props, { emit, expose }) {
+    const translate = useLocale(cN);
     const state = reactive({
       videoElm: null,
       initial: true, //控制封面的显示
diff --git a/src/packages/utils/useLocale/index.ts b/src/packages/utils/useLocale/index.ts
new file mode 100644
index 0000000000..b5b038f2a3
--- /dev/null
+++ b/src/packages/utils/useLocale/index.ts
@@ -0,0 +1,15 @@
+import locale from '@/packages/locale';
+import { getPropByPath, isFunction } from '../util';
+
+export const useLocale = (name = '') => {
+  return (keyPath: string, ...args: unknown[]) => {
+    name = name.toLocaleLowerCase();
+    const languages = locale.languages();
+    let text = keyPath;
+    if (name && name.startsWith('nut')) {
+      text = `${name.slice(3)}.${keyPath}`;
+    }
+    const res = getPropByPath(languages, text) || getPropByPath(languages, keyPath);
+    return isFunction(res) ? res(...args) : res;
+  };
+};