实现 分数化简 工具

分类：general ｜ 标签：分数、化简、比例 化简分数并给出小数百分比

2.1 功能说明

化简分数并给出小数百分比

2.1.1 使用指南

功能说明

化简分数 a/b 为最简分数，并给出小数、百分比与连比。

使用场景

配比、统计、数学作业。

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> 中定义的主要函数/方法：

• gcd()
• run()

2.2.3 关键实现代码

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

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

const a = ref('3'), b = ref('9')
const error = ref(''), res = ref(null)

function gcd(x, y) { x = Math.abs(x); y = Math.abs(y); while (y) { [x, y] = [y, x % y] }; return x || 1 }
function run() {
  error.value = res.value = null
  const an = Number(a.value), bn = Number(b.value)
  if (!Number.isInteger(an) || !Number.isInteger(bn)) { error.value = '分子分母须为整数'; return }
  if (bn === 0) { error.value = '分母不能为 0'; return }
  const g = gcd(an, bn)
  let num = an / g, den = bn / g
  if (den < 0) { num = -num; den = -den }
  res.value = { num, den, dec: (an / bn).toString(), pct: (an / bn * 100).toFixed(4) }
}

2.3 效果截图

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