实现 数据容量换算 工具

分类：general ｜ 标签：容量、存储、换算 B/KB/MB/GB 二进制与十进制换算

2.1 功能说明

B/KB/MB/GB 二进制与十进制换算

2.1.1 使用指南

功能说明

在 B / KB / MB / GB / TB 之间换算，支持二进制（1024）与十进制（1000）两种基准。

使用场景

存储/带宽估算、文件体积换算。

2.2 代码实现

2.2.1 组件结构

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

2.2.2 核心逻辑概览

<script setup> 中定义的主要函数/方法：

• run()
• clear()

2.2.3 关键实现代码

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

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

const units = ['B', 'KB', 'MB', 'GB', 'TB']
const value = ref('')
const from = ref('MB')
const base = ref('1024')
const error = ref('')
const rows = ref([])

function run() {
  error.value = rows.value = []
  const n = Number(value.value.trim())
  if (value.value.trim() === '' || isNaN(n)) { error.value = '请输入有效数字'; return }
  if (n < 0) { error.value = '数值不能为负'; return }
  const b = Number(base.value)
  const factor = Math.pow(b, units.indexOf(from.value))
  const bytes = n * factor
  rows.value = units.map(u => ({ unit: u, val: (bytes / Math.pow(b, units.indexOf(u))).toFixed(6).replace(/\.?0+$/, '') }))
}
function clear() { value.value = error.value = rows.value = '' }

2.3 效果截图

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