BizCurrencySelect 货币选择

货币选择器：内置常用 36 种货币（ISO 4217，人民币置顶），选项富展示国旗 + 货币名 + 代码 + 符号；label 含名称与代码，原生 filterable 直接支持中文名 / 代码检索；v-model 为 ISO 代码，change 回传完整货币对象。跨境结算、多币种报价、国际账单。

基础用法

v-model：CNY

点选货币，v-model 为 ISO 4217 代码，change 回传完整对象。

<script setup lang="ts">
/** 场景：基础——选中 ISO 代码，change 回传完整对象 */
import { ref } from 'vue'
import { BizCurrencySelect } from 'vue3-ep-biz-lib'
import type { BizCurrency } from 'vue3-ep-biz-lib'

const code = ref('CNY')

const onChange = (currency: BizCurrency | null): void => {
  void currency
}
</script>

<template>
  <div>
    <BizCurrencySelect v-model="code" style="width: 260px" @change="onChange" />
    <p style="margin: 10px 0 0; font-size: 12px; color: var(--el-text-color-secondary)">
      v-model：{{ code || '（未选）' }}
    </p>
  </div>
</template>

显示代码

检索

试试输入 克朗 / USD / 盾

输入中文名（如「克朗」）或代码（如 USD）过滤。

<script setup lang="ts">
/** 场景：检索——中文名 / 代码过滤 */
import { ref } from 'vue'
import { BizCurrencySelect } from 'vue3-ep-biz-lib'

const code = ref('')
</script>

<template>
  <BizCurrencySelect v-model="code" style="width: 260px" placeholder="试试输入 克朗 / USD / 盾" />
</template>

显示代码

默认值与取值

getCurrency()：

default 值 + expose getCurrency 取完整货币信息。

<script setup lang="ts">
/** 场景：默认值 + getCurrency 取完整信息 */
import { computed, ref } from 'vue'
import { BizCurrencySelect } from 'vue3-ep-biz-lib'
import type { BizCurrencySelectInstance } from 'vue3-ep-biz-lib'

const code = ref('USD')
const refEl = ref<BizCurrencySelectInstance | null>(null)

const info = computed(() => {
  const currency = refEl.value?.getCurrency()
  return currency === null || currency === undefined ? '' : `${currency.flag ?? ''} ${currency.name} ${currency.code} ${currency.symbol}`
})
</script>

<template>
  <div>
    <BizCurrencySelect ref="refEl" v-model="code" style="width: 260px" />
    <p style="margin: 10px 0 0; font-size: 12px; color: var(--el-text-color-secondary)">
      getCurrency()：{{ info }}
    </p>
  </div>
</template>

显示代码

自定义货币集

仅支持 4 种结算币种

currencies 传入业务白名单（如仅支持结算的币种）。

<script setup lang="ts">
/** 场景：业务白名单货币集 */
import { ref } from 'vue'
import { BizCurrencySelect } from 'vue3-ep-biz-lib'
import type { BizCurrency } from 'vue3-ep-biz-lib'

const code = ref('')

const currencies: BizCurrency[] = [
  { code: 'CNY', name: '人民币', symbol: '¥', flag: '🇨🇳' },
  { code: 'USD', name: '美元', symbol: '$', flag: '🇺🇸' },
  { code: 'EUR', name: '欧元', symbol: '€', flag: '🇪🇺' },
  { code: 'JPY', name: '日元', symbol: '¥', flag: '🇯🇵' },
]
</script>

<template>
  <BizCurrencySelect v-model="code" :currencies="currencies" style="width: 260px" placeholder="仅支持 4 种结算币种" />
</template>

显示代码

表单集成

金额 + 币种组合输入，透传 el-select 原生能力（disabled / size 等经 attrs）。

<script setup lang="ts">
/** 场景：金额 + 币种组合输入 */
import { ref } from 'vue'
import { ElInput } from 'element-plus'
import { BizCurrencySelect } from 'vue3-ep-biz-lib'

const amount = ref('')
const code = ref('CNY')
</script>

<template>
  <div style="display: flex; gap: 8px; width: 400px">
    <ElInput v-model="amount" placeholder="请输入金额" style="flex: 1" />
    <BizCurrencySelect v-model="code" style="width: 150px" :show-symbol="false" />
  </div>
</template>

显示代码

事件

请选择货币

change 事件日志（含符号与代码）。

<script setup lang="ts">
/** 场景：change 事件日志 */
import { ref } from 'vue'
import { BizCurrencySelect } from 'vue3-ep-biz-lib'
import type { BizCurrency } from 'vue3-ep-biz-lib'

const code = ref('')
const logs = ref<string[]>([])

const onChange = (currency: BizCurrency | null): void => {
  logs.value.unshift(currency === null ? '已清空' : `${currency.code} ${currency.name}（${currency.symbol}）`)
  if (logs.value.length > 4) logs.value.pop()
}
</script>

<template>
  <div>
    <BizCurrencySelect v-model="code" style="width: 260px" @change="onChange" />
    <p v-for="(log, i) in logs" :key="i" style="margin: 6px 0 0; font-size: 12px; color: var(--el-text-color-secondary)">
      {{ log }}
    </p>
  </div>
</template>

显示代码

禁用与锁定

报表口径锁定的币种：禁用且不可清空

disabled + :clearable=false：报表口径锁定的只读展示。

<script setup lang="ts">
/** 场景：禁用与不可清空——查看口径锁定 */
import { ref } from 'vue'
import { BizCurrencySelect } from 'vue3-ep-biz-lib'

const code = ref('EUR')
</script>

<template>
  <div>
    <BizCurrencySelect v-model="code" disabled :clearable="false" style="width: 260px" />
    <p style="margin: 10px 0 0; font-size: 12px; color: var(--el-text-color-secondary)">
      报表口径锁定的币种：禁用且不可清空
    </p>
  </div>
</template>

显示代码

隐藏符号列

show-symbol=false 选项仅国旗 + 名称 + 代码。

<script setup lang="ts">
/** 场景：隐藏符号列——showSymbol=false 仅国旗 + 名称 + 代码 */
import { ref } from 'vue'
import { BizCurrencySelect } from 'vue3-ep-biz-lib'

const code = ref('JPY')
</script>

<template>
  <BizCurrencySelect v-model="code" :show-symbol="false" style="width: 260px" />
</template>

显示代码

Props

属性名	类型	默认值	说明
v-model	string	''	ISO 4217 代码（如 CNY）
currencies	BizCurrency[]	内置 36 种	货币列表（code / name / symbol / flag）
placeholder	string	'请选择货币'	占位
disabled	boolean	false	禁用
clearable	boolean	true	可清空
show-symbol	boolean	true	选项内展示符号

Events

事件名	参数	说明
update:modelValue	(code: string)	代码变化
change	(currency: BizCurrency | null)	完整货币对象

Expose

名称	类型	说明
getCurrency	(code?: string) => BizCurrency | null	取货币对象（缺省当前选中）

TIP

其余能力（size / filter-method 等）经 attrs 透传至 el-select。金额展示与输入用 BizAmount / BizAmountInput 组合。