BizI18nInput 多语言输入

一个字段多语言录入（国际化系统高频痛点）：页签切换语言逐个填写（或 layout="vertical" 语言块堆叠），主语言必填校验、缺译警示点（主语言已填而该语言为空）、字符上限与字数统计、只读回显；translate-request 钩子注入机器翻译实现后，非主语言页签出现「译」按钮一键填充。值结构为 { 'zh-CN': '...', en: '...' }，直接对齐后端多语言字段。

适用于：商品名 / 公告 / 文章标题 / 推送文案多语言维护，出海 SaaS 基础信息录入。

基础用法

{
  "zh-CN": "工业边缘网关",
  "en": "",
  "ja": ""
}

页签切换语言录入，值结构实时预览（v-model 为 语言码 → 文本 的完整对象）。

<script setup lang="ts">
/** 场景：基础用法——页签切换语言录入，值结构实时预览 */
import { ref } from 'vue'
import { BizI18nInput } from 'vue3-ep-biz-lib'
import { LOCALES } from './locales'

const value = ref<Record<string, string>>({ 'zh-CN': '工业边缘网关', en: '', ja: '' })
</script>

<template>
  <el-space direction="vertical" size="large" style="width: 100%">
    <BizI18nInput v-model="value" :locales="LOCALES" />
    <el-alert type="info" :closable="false">
      <pre style="margin: 0; font-size: 12px">{{ JSON.stringify(value, null, 2) }}</pre>
    </el-alert>
  </el-space>
</template>

多行文本与字数

44 / 200

type="textarea" + maxlength（自动带字数统计），公告 / 简介类长文本多语言。

<script setup lang="ts">
/** 场景：多行文本——公告内容多语言，字符上限 + 字数统计 */
import { ref } from 'vue'
import { BizI18nInput } from 'vue3-ep-biz-lib'
import { LOCALES } from './locales'

const value = ref<Record<string, string>>({
  'zh-CN': '系统将于本周六 02:00-06:00 升级维护，期间服务暂停访问，请提前保存工作内容。',
  en: '',
  ja: '',
})
</script>

<template>
  <BizI18nInput v-model="value" :locales="LOCALES" type="textarea" :rows="3" :maxlength="200" />
</template>

主语言必填校验

expose validate()：主语言为空拦截提交（组件底部红字），缺译语言统计返回由业务决定放行与否。

<script setup lang="ts">
/** 场景：主语言必填校验——expose validate 拦截提交，缺译语言统计提示 */
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import { BizI18nInput } from 'vue3-ep-biz-lib'
import type { BizI18nInputInstance } from 'vue3-ep-biz-lib'
import { LOCALES } from './locales'

const value = ref<Record<string, string>>({ 'zh-CN': '', en: '', ja: '' })
const ref1 = ref<BizI18nInputInstance>()

const onSubmit = (): void => {
  const result = ref1.value?.validate()
  if (result === undefined) return
  if (!result.valid) {
    ElMessage.warning('主语言（简体中文）未填写，已拦截提交')
    return
  }
  if (result.missingLocales.length > 0) {
    ElMessage.info(`未翻译语言：${result.missingLocales.join('、')}（允许提交，按需放行）`)
    return
  }
  ElMessage.success('校验通过，已提交')
}
</script>

<template>
  <el-space direction="vertical" size="large" style="width: 100%">
    <BizI18nInput ref="ref1" v-model="value" :locales="LOCALES" />
    <el-button type="primary" @click="onSubmit">提交</el-button>
  </el-space>
</template>

缺译标记

「简体中文」「English」已填，「日本語」为空 → 页签名旁出现黄色警示点；切到该页签补译后即消失。主语言页签带「主」徽标。

主语言已填、其他语言为空时页签出黄色警示点；主语言页签带「主」徽标。

<script setup lang="ts">
/** 场景：缺译标记——主语言已填、其他语言为空时页签出警示点，翻译后消失 */
import { ref } from 'vue'
import { BizI18nInput } from 'vue3-ep-biz-lib'
import { LOCALES } from './locales'

const value = ref<Record<string, string>>({
  'zh-CN': '温湿度传感器（电池版）',
  en: 'Temp & Humidity Sensor (Battery)',
  ja: '',
})
</script>

<template>
  <el-space direction="vertical" size="large" style="width: 100%">
    <BizI18nInput v-model="value" :locales="LOCALES" />
    <p style="margin: 0; font-size: 13px; color: var(--el-text-color-secondary)">
      「简体中文」「English」已填，「日本語」为空 → 页签名旁出现黄色警示点；切到该页签补译后即消失。主语言页签带「主」徽标。
    </p>
  </el-space>
</template>

一键翻译

translate-request 注入翻译实现（组件零接口）：非主语言页签出「译」按钮，以主语言文本为源填充，translated 事件回传。

<script setup lang="ts">
/** 场景：一键翻译——translate-request 注入机器翻译实现，非主语言页签「译」按钮填充 */
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import { BizI18nInput } from 'vue3-ep-biz-lib'
import { LOCALES } from './locales'

const value = ref<Record<string, string>>({
  'zh-CN': '支持 4G 全网通与边缘计算，适配工业现场多种协议接入。',
  en: '',
  ja: '',
})

/** mock 翻译实现（业务侧替换为翻译服务接口） */
const mockTranslate = async (text: string, from: string, to: string): Promise<string> => {
  await new Promise((resolve) => setTimeout(resolve, 800))
  if (to === 'en') return `[EN from ${from}] ${text}`
  if (to === 'ja') return `[JA from ${from}] ${text}`
  return text
}

const onTranslated = (locale: string): void => {
  ElMessage.success(`已填充 ${locale} 译文`)
}
</script>

<template>
  <BizI18nInput
    v-model="value"
    :locales="LOCALES"
    :translate-request="mockTranslate"
    @translated="onTranslated"
  />
</template>

堆叠布局

🇨🇳 简体中文主

🇬🇧 English

🇯🇵 日本語

layout="vertical" 语言块纵排——窄屏 / 移动端 / 需同屏总览全部语言。

<script setup lang="ts">
/** 场景：堆叠布局——layout=vertical 语言块纵排（窄屏 / 移动端 / 同屏总览全部语言） */
import { ref } from 'vue'
import { BizI18nInput } from 'vue3-ep-biz-lib'
import { LOCALES } from './locales'

const value = ref<Record<string, string>>({
  'zh-CN': '设备巡检提醒',
  en: 'Device inspection reminder',
  ja: '設備点検リマインダー',
})
</script>

<template>
  <el-card shadow="never" style="width: 360px">
    <template #header>推送标题（窄屏表单）</template>
    <BizI18nInput v-model="value" :locales="LOCALES" layout="vertical" />
  </el-card>
</template>

只读回显

商品多语言名称

多语言名称

disabled 详情页展示已录入内容（页签仍可切换查看各语言）。

<script setup lang="ts">
/** 场景：只读回显——disabled 详情页展示已录入的多语言内容 */
import { ref } from 'vue'
import { BizI18nInput } from 'vue3-ep-biz-lib'
import { LOCALES } from './locales'

const value = ref<Record<string, string>>({
  'zh-CN': '边缘计算网关 EG-300',
  en: 'Edge Computing Gateway EG-300',
  ja: 'エッジコンピューティングゲートウェイ EG-300',
})
</script>

<template>
  <el-descriptions :column="1" border size="small" title="商品多语言名称">
    <el-descriptions-item label="多语言名称">
      <BizI18nInput v-model="value" :locales="LOCALES" disabled />
    </el-descriptions-item>
  </el-descriptions>
</template>

商品多语言表单

el-form 集成：名称（必填）+ 简介（选填 textarea）双字段多语言，提交生成 payload 预览。

<script setup lang="ts">
/** 场景：商品多语言表单——名称/简介双字段 + el-form 集成 + 提交 payload 预览 */
import { reactive, ref } from 'vue'
import { ElMessage } from 'element-plus'
import { BizI18nInput } from 'vue3-ep-biz-lib'
import type { BizI18nInputInstance } from 'vue3-ep-biz-lib'
import { LOCALES } from './locales'

const form = reactive({
  sku: 'EG-300',
  name: { 'zh-CN': '边缘计算网关 EG-300', en: '', ja: '' } as Record<string, string>,
  intro: { 'zh-CN': '4G 全网通，8 路 RS485，支持边缘侧规则引擎。', en: '', ja: '' } as Record<string, string>,
})

const nameRef = ref<BizI18nInputInstance>()
const introRef = ref<BizI18nInputInstance>()
const payload = ref('')

const onSubmit = (): void => {
  if (form.sku.trim() === '') {
    ElMessage.warning('请填写 SKU')
    return
  }
  const r1 = nameRef.value?.validate()
  const r2 = introRef.value?.validate()
  if (r1 !== undefined && !r1.valid) return
  if (r2 !== undefined && !r2.valid) return
  payload.value = JSON.stringify(
    { sku: form.sku, name: form.name, intro: form.intro },
    null,
    2,
  )
  ElMessage.success('已生成提交 payload')
}
</script>

<template>
  <el-space direction="vertical" size="large" style="width: 100%">
    <el-form label-width="88px" style="max-width: 560px">
      <el-form-item label="SKU" required>
        <el-input v-model="form.sku" />
      </el-form-item>
      <el-form-item label="商品名称" required>
        <BizI18nInput ref="nameRef" v-model="form.name" :locales="LOCALES" />
      </el-form-item>
      <el-form-item label="商品简介">
        <BizI18nInput
          ref="introRef"
          v-model="form.intro"
          :locales="LOCALES"
          type="textarea"
          :rows="3"
          :maxlength="300"
          :required="false"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">生成提交 payload</el-button>
      </el-form-item>
    </el-form>
    <el-alert v-if="payload !== ''" type="success" :closable="false">
      <pre style="margin: 0; font-size: 12px">{{ payload }}</pre>
    </el-alert>
  </el-space>
</template>

Props

属性	类型	默认值	说明
v-model	`BizI18nValue`	`{}`	多语言值：`{ 语言码: 文本 }`
locales	`BizI18nLocale[]`	`[]`	语言列表（`{ code, label, flag? }`，至少 1 项）
primary	`string`	首语言	主语言码（必填校验基准 / 翻译源）
type	`'input' \| 'textarea'`	`'input'`	控件类型
placeholder	`string`	按语言	占位文案（主语言「必填」、其他「选填（语言名）」）
rows	`number`	`3`	textarea 行数
required	`boolean`	`true`	主语言必填（validate 依据）
maxlength	`number`	—	每语言字符上限（自动开字数统计）
show-word-limit	`boolean`	有 maxlength 时 true	字数统计开关
mark-missing	`boolean`	`true`	缺译警示点开关
layout	`'tabs' \| 'vertical'`	`'tabs'`	页签 / 堆叠布局
disabled	`boolean`	`false`	只读回显
translate-request	`(text, from, to) => Promise<string>`	—	机器翻译钩子（注入后非主语言出「译」按钮）

Events

事件名	参数	说明
update:model-value	`(value: BizI18nValue)`	任一语言输入即整体更新
change	`(locale, text)`	某语言输入完成（控件 change 提交后）
translated	`(locale, text)`	一键翻译填充完成

Expose

名称	类型	说明
validate	`() => BizI18nValidateResult`	主语言必填校验（错误展示在组件底部）；返回 `{ valid, primaryEmpty, missingLocales }`
clearValidate	`() => void`	清除校验错误展示
getValue	`(locale) => string`	单语言取值
getValues	`() => BizI18nValue`	整体值快照
setActive	`(locale) => void`	切换到某语言页签

BizI18nInput 多语言输入 ​

基础用法 ​

多行文本与字数 ​

主语言必填校验 ​

缺译标记 ​

一键翻译 ​

堆叠布局 ​

只读回显 ​

商品多语言表单 ​

Props ​

Events ​

Expose ​