实现 货币换算器 工具

分类：general ｜ 标签：货币、汇率、换算 多币种换算，汇率可编辑

2.1 功能说明

多币种换算，汇率可编辑

2.1.1 使用指南

功能说明

多币种换算，汇率可手动编辑（默认参考值，非实时）。

使用场景

跨境购物、旅行预算、报表折算。

2.2 代码实现

2.2.1 组件结构

本工具是一个基于 Vue 3 <script setup> 语法的单文件组件（SFC），统一包裹在 ToolPageShell 组件内，由它提供页面标题、工具 ID、分类与「使用指南」插槽等通用外壳；核心业务逻辑（响应式状态、计算属性、事件处理函数）全部写在 <script setup> 中，输入/输出通过 el-input、el-button 等 Element Plus 组件与用户交互，所有数据均在浏览器本地处理，不会上传服务器。

2.2.3 关键实现代码

以下是该工具的完整 <script setup> 实现（核心代码）。模板（<template>）与样式（<style>）已省略。

import { ref, computed } from 'vue'
import ToolPageShell from '@/components/ToolPageShell.vue'

const base = 'USD'
const cur = [
  { code: 'USD', name: '美元' }, { code: 'CNY', name: '人民币' }, { code: 'EUR', name: '欧元' },
  { code: 'JPY', name: '日元' }, { code: 'GBP', name: '英镑' }, { code: 'HKD', name: '港币' },
  { code: 'KRW', name: '韩元' }, { code: 'TWD', name: '新台币' }, { code: 'AUD', name: '澳元' }, { code: 'CAD', name: '加元' }
]
const rates = ref({ USD: 1, CNY: 7.2, EUR: 0.92, JPY: 155, GBP: 0.79, HKD: 7.8, KRW: 1380, TWD: 32, AUD: 1.52, CAD: 1.36 })
const amount = ref(100)
const from = ref('USD')
const to = ref('CNY')
const rate = computed(() => {
  const rf = rates.value[from] ?? 1
  const rt = rates.value[to] ?? 1
  return (rt / rf)
})
const result = computed(() => {
  const n = Number(amount.value)
  if (!isFinite(n) || n < 0) return 0
  return n * rate.value
})

2.3 效果截图

工具访问地址：https://www.i91tools.com/tools/currency-converter