diff --git a/src/field/demo/Autosize.vue b/src/field/demo/Autosize.vue
index fcc6b5dab..490edf1f6 100644
--- a/src/field/demo/Autosize.vue
+++ b/src/field/demo/Autosize.vue
@@ -11,26 +11,29 @@
   </demo-block>
 </template>
 
-<script>
+<script lang="ts">
 import { ref } from 'vue';
+import { useTranslate } from '@demo/use-translate';
+
+const i18n = {
+  'zh-CN': {
+    message: '留言',
+    autosize: '高度自适应',
+    placeholder: '请输入留言',
+  },
+  'en-US': {
+    sms: 'SMS',
+    autosize: 'Auto Resize',
+    placeholder: 'Message',
+  },
+};
 
 export default {
-  i18n: {
-    'zh-CN': {
-      message: '留言',
-      autosize: '高度自适应',
-      placeholder: '请输入留言',
-    },
-    'en-US': {
-      sms: 'SMS',
-      autosize: 'Auto Resize',
-      placeholder: 'Message',
-    },
-  },
-
   setup() {
+    const t = useTranslate(i18n);
     const value = ref('');
-    return { value };
+
+    return { t, value };
   },
 };
 </script>
diff --git a/src/field/demo/BasicUsage.vue b/src/field/demo/BasicUsage.vue
index 92d168094..dbc42b232 100644
--- a/src/field/demo/BasicUsage.vue
+++ b/src/field/demo/BasicUsage.vue
@@ -10,24 +10,26 @@
   </demo-block>
 </template>
 
-<script>
+<script lang="ts">
 import { ref } from 'vue';
+import { useTranslate } from '@demo/use-translate';
+
+const i18n = {
+  'zh-CN': {
+    label: '文本',
+    placeholder: '请输入文本',
+  },
+  'en-US': {
+    label: 'Label',
+    placeholder: 'Text',
+  },
+};
 
 export default {
-  i18n: {
-    'zh-CN': {
-      label: '文本',
-      placeholder: '请输入文本',
-    },
-    'en-US': {
-      label: 'Label',
-      placeholder: 'Text',
-    },
-  },
-
   setup() {
+    const t = useTranslate(i18n);
     const value = ref('');
-    return { value };
+    return { t, value };
   },
 };
 </script>
diff --git a/src/field/demo/CustomType.vue b/src/field/demo/CustomType.vue
index 721a0a8a3..4ccccb94f 100644
--- a/src/field/demo/CustomType.vue
+++ b/src/field/demo/CustomType.vue
@@ -32,38 +32,40 @@
   </demo-block>
 </template>
 
-<script>
+<script lang="ts">
 import { reactive, toRefs } from 'vue';
+import { useTranslate } from '@demo/use-translate';
+
+const i18n = {
+  'zh-CN': {
+    text: '文本',
+    digit: '整数',
+    phone: '手机号',
+    number: '数字',
+    customType: '自定义类型',
+    smsPlaceholder: '请输入短信验证码',
+    textPlaceholder: '请输入文本',
+    digitPlaceholder: '请输入整数',
+    phonePlaceholder: '请输入手机号',
+    numberPlaceholder: '请输入数字（支持小数）',
+  },
+  'en-US': {
+    text: 'Text',
+    digit: 'Digit',
+    phone: 'Phone',
+    number: 'Number',
+    customType: 'Custom Type',
+    smsPlaceholder: 'SMS',
+    textPlaceholder: 'Text',
+    digitPlaceholder: 'Digit',
+    phonePlaceholder: 'Phone',
+    numberPlaceholder: 'Number',
+  },
+};
 
 export default {
-  i18n: {
-    'zh-CN': {
-      text: '文本',
-      digit: '整数',
-      phone: '手机号',
-      number: '数字',
-      customType: '自定义类型',
-      smsPlaceholder: '请输入短信验证码',
-      textPlaceholder: '请输入文本',
-      digitPlaceholder: '请输入整数',
-      phonePlaceholder: '请输入手机号',
-      numberPlaceholder: '请输入数字（支持小数）',
-    },
-    'en-US': {
-      text: 'Text',
-      digit: 'Digit',
-      phone: 'Phone',
-      number: 'Number',
-      customType: 'Custom Type',
-      smsPlaceholder: 'SMS',
-      textPlaceholder: 'Text',
-      digitPlaceholder: 'Digit',
-      phonePlaceholder: 'Phone',
-      numberPlaceholder: 'Number',
-    },
-  },
-
-  data() {
+  setup() {
+    const t = useTranslate(i18n);
     const state = reactive({
       text: '',
       phone: '',
@@ -72,7 +74,10 @@ export default {
       password: '',
     });
 
-    return toRefs(state);
+    return {
+      ...toRefs(state),
+      t,
+    };
   },
 };
 </script>
diff --git a/src/field/demo/Disabled.vue b/src/field/demo/Disabled.vue
index 01a62c98f..ce0d4ad8a 100644
--- a/src/field/demo/Disabled.vue
+++ b/src/field/demo/Disabled.vue
@@ -5,20 +5,28 @@
   </demo-block>
 </template>
 
-<script>
+<script lang="ts">
+import { useTranslate } from '@demo/use-translate';
+
+const i18n = {
+  'zh-CN': {
+    text: '文本',
+    disabled: '禁用输入框',
+    inputReadonly: '输入框只读',
+    inputDisabled: '输入框已禁用',
+  },
+  'en-US': {
+    text: 'Text',
+    inputReadonly: 'Input Readonly',
+    inputDisabled: 'Input Disabled',
+  },
+};
+
 export default {
-  i18n: {
-    'zh-CN': {
-      text: '文本',
-      disabled: '禁用输入框',
-      inputReadonly: '输入框只读',
-      inputDisabled: '输入框已禁用',
-    },
-    'en-US': {
-      text: 'Text',
-      inputReadonly: 'Input Readonly',
-      inputDisabled: 'Input Disabled',
-    },
+  setup() {
+    const t = useTranslate(i18n);
+
+    return { t };
   },
 };
 </script>
diff --git a/src/field/demo/ErrorInfo.vue b/src/field/demo/ErrorInfo.vue
index 1c49b02ba..2e650ffef 100644
--- a/src/field/demo/ErrorInfo.vue
+++ b/src/field/demo/ErrorInfo.vue
@@ -17,32 +17,37 @@
   </demo-block>
 </template>
 
-<script>
+<script lang="ts">
 import { reactive, toRefs } from 'vue';
+import { useTranslate } from '@demo/use-translate';
+
+const i18n = {
+  'zh-CN': {
+    phone: '手机号',
+    errorInfo: '错误提示',
+    phoneError: '手机号格式错误',
+    phonePlaceholder: '请输入手机号',
+  },
+  'en-US': {
+    phone: 'Phone',
+    errorInfo: 'Error Info',
+    phoneError: 'Invalid phone',
+    phonePlaceholder: 'Phone',
+  },
+};
 
 export default {
-  i18n: {
-    'zh-CN': {
-      phone: '手机号',
-      errorInfo: '错误提示',
-      phoneError: '手机号格式错误',
-      phonePlaceholder: '请输入手机号',
-    },
-    'en-US': {
-      phone: 'Phone',
-      errorInfo: 'Error Info',
-      phoneError: 'Invalid phone',
-      phonePlaceholder: 'Phone',
-    },
-  },
-
-  data() {
+  setup() {
+    const t = useTranslate(i18n);
     const state = reactive({
       phone: '123',
       username: '',
     });
 
-    return toRefs(state);
+    return {
+      ...toRefs(state),
+      t,
+    };
   },
 };
 </script>
diff --git a/src/field/demo/FormatValue.vue b/src/field/demo/FormatValue.vue
index 7e09d267a..126301dd9 100644
--- a/src/field/demo/FormatValue.vue
+++ b/src/field/demo/FormatValue.vue
@@ -16,34 +16,37 @@
   </demo-block>
 </template>
 
-<script>
+<script lang="ts">
 import { reactive, toRefs } from 'vue';
+import { useTranslate } from '@demo/use-translate';
+
+const i18n = {
+  'zh-CN': {
+    text: '文本',
+    formatValue: '格式化输入内容',
+    formatOnBlur: '在失焦时执行格式化',
+    formatOnChange: '在输入时执行格式化',
+  },
+  'en-US': {
+    text: 'Text',
+    formatValue: 'Format Value',
+    formatOnBlur: 'Format On Blur',
+    formatOnChange: 'Format On Change',
+  },
+};
 
 export default {
-  i18n: {
-    'zh-CN': {
-      text: '文本',
-      formatValue: '格式化输入内容',
-      formatOnBlur: '在失焦时执行格式化',
-      formatOnChange: '在输入时执行格式化',
-    },
-    'en-US': {
-      text: 'Text',
-      formatValue: 'Format Value',
-      formatOnBlur: 'Format On Blur',
-      formatOnChange: 'Format On Change',
-    },
-  },
-
   setup() {
+    const t = useTranslate(i18n);
     const state = reactive({
       value1: '',
       value2: '',
     });
-    const formatter = (value) => value.replace(/\d/g, '');
+    const formatter = (value: string) => value.replace(/\d/g, '');
 
     return {
       ...toRefs(state),
+      t,
       formatter,
     };
   },
diff --git a/src/field/demo/InputAlign.vue b/src/field/demo/InputAlign.vue
index d8d325e91..36e9ad392 100644
--- a/src/field/demo/InputAlign.vue
+++ b/src/field/demo/InputAlign.vue
@@ -9,26 +9,29 @@
   </demo-block>
 </template>
 
-<script>
+<script lang="ts">
 import { ref } from 'vue';
+import { useTranslate } from '@demo/use-translate';
+
+const i18n = {
+  'zh-CN': {
+    text: '文本',
+    inputAlign: '输入框内容对齐',
+    alignPlaceHolder: '输入框内容右对齐',
+  },
+  'en-US': {
+    text: 'Text',
+    inputAlign: 'Input Align',
+    alignPlaceHolder: 'Input Align Right',
+  },
+};
 
 export default {
-  i18n: {
-    'zh-CN': {
-      text: '文本',
-      inputAlign: '输入框内容对齐',
-      alignPlaceHolder: '输入框内容右对齐',
-    },
-    'en-US': {
-      text: 'Text',
-      inputAlign: 'Input Align',
-      alignPlaceHolder: 'Input Align Right',
-    },
-  },
-
   setup() {
+    const t = useTranslate(i18n);
     const value = ref('');
-    return { value };
+
+    return { t, value };
   },
 };
 </script>
diff --git a/src/field/demo/InsertButton.vue b/src/field/demo/InsertButton.vue
index 07025068b..eb4bd3c5f 100644
--- a/src/field/demo/InsertButton.vue
+++ b/src/field/demo/InsertButton.vue
@@ -16,28 +16,31 @@
   </demo-block>
 </template>
 
-<script>
+<script lang="ts">
 import { ref } from 'vue';
+import { useTranslate } from '@demo/use-translate';
+
+const i18n = {
+  'zh-CN': {
+    sms: '短信验证码',
+    sendSMS: '发送验证码',
+    insertButton: '插入按钮',
+    smsPlaceholder: '请输入短信验证码',
+  },
+  'en-US': {
+    sms: 'SMS',
+    sendSMS: 'Send SMS',
+    insertButton: 'Insert Button',
+    smsPlaceholder: 'SMS',
+  },
+};
 
 export default {
-  i18n: {
-    'zh-CN': {
-      sms: '短信验证码',
-      sendSMS: '发送验证码',
-      insertButton: '插入按钮',
-      smsPlaceholder: '请输入短信验证码',
-    },
-    'en-US': {
-      sms: 'SMS',
-      sendSMS: 'Send SMS',
-      insertButton: 'Insert Button',
-      smsPlaceholder: 'SMS',
-    },
-  },
-
   setup() {
+    const t = useTranslate(i18n);
     const sms = ref('');
-    return { sms };
+
+    return { t, sms };
   },
 };
 </script>
diff --git a/src/field/demo/ShowIcon.vue b/src/field/demo/ShowIcon.vue
index 67940ea60..02883c2f8 100644
--- a/src/field/demo/ShowIcon.vue
+++ b/src/field/demo/ShowIcon.vue
@@ -17,30 +17,35 @@
   </demo-block>
 </template>
 
-<script>
+<script lang="ts">
 import { reactive, toRefs } from 'vue';
+import { useTranslate } from '@demo/use-translate';
+
+const i18n = {
+  'zh-CN': {
+    text: '文本',
+    showIcon: '显示图标',
+    showClearIcon: '显示清除图标',
+  },
+  'en-US': {
+    text: 'Text',
+    showIcon: 'Show Icon',
+    showClearIcon: 'Show Clear Icon',
+  },
+};
 
 export default {
-  i18n: {
-    'zh-CN': {
-      text: '文本',
-      showIcon: '显示图标',
-      showClearIcon: '显示清除图标',
-    },
-    'en-US': {
-      text: 'Text',
-      showIcon: 'Show Icon',
-      showClearIcon: 'Show Clear Icon',
-    },
-  },
-
   setup() {
+    const t = useTranslate(i18n);
     const state = reactive({
       icon1: '',
       icon2: '123',
     });
 
-    return toRefs(state);
+    return {
+      ...toRefs(state),
+      t,
+    };
   },
 };
 </script>
diff --git a/src/field/demo/ShowWordLimit.vue b/src/field/demo/ShowWordLimit.vue
index e9a272b8b..2417bbf14 100644
--- a/src/field/demo/ShowWordLimit.vue
+++ b/src/field/demo/ShowWordLimit.vue
@@ -13,26 +13,29 @@
   </demo-block>
 </template>
 
-<script>
+<script lang="ts">
 import { ref } from 'vue';
+import { useTranslate } from '@demo/use-translate';
+
+const i18n = {
+  'zh-CN': {
+    message: '留言',
+    placeholder: '请输入留言',
+    showWordLimit: '显示字数统计',
+  },
+  'en-US': {
+    message: 'Message',
+    placeholder: 'Message',
+    showWordLimit: 'Show Word Limit',
+  },
+};
 
 export default {
-  i18n: {
-    'zh-CN': {
-      message: '留言',
-      placeholder: '请输入留言',
-      showWordLimit: '显示字数统计',
-    },
-    'en-US': {
-      message: 'Message',
-      placeholder: 'Message',
-      showWordLimit: 'Show Word Limit',
-    },
-  },
-
   setup() {
+    const t = useTranslate(i18n);
     const value = ref('');
-    return { value };
+
+    return { t, value };
   },
 };
 </script>