实现 百分比计算器 工具

分类：general ｜ 标签：百分比、计算、占比、利润率 百分比增减、占比、利润率、环比与百分点计算

2.1 功能说明

百分比增减、占比、利润率、环比与百分点计算

核心能力

• ratio
• value
• change

2.1.1 使用指南

百分比计算器使用指南

三种模式

• 占比计算：部分值 ÷ 整体值 × 100%，整体为 0 时提示错误。
• 求数值：已知百分比与整体，求对应数值（X% × 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> 中定义的主要函数/方法：

• num()
• calc()

2.2.3 关键实现代码

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

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

const mode = ref('ratio')
const a = ref('')
const b = ref('')
const p = ref('')
const error = ref('')

const num = (v) => {
  const n = Number(v)
  return isFinite(n) ? n : null
}

const out = computed(() => {
  error.value = ''
  if (mode.value === 'ratio') {
    const A = num(a.value), B = num(b.value)
    if (A === null || B === null) return ''
    if (B === 0) { error.value = '整体值不能为 0'; return '' }
    return (A / B * 100).toFixed(2)
  }
  if (mode.value === 'value') {
    const P = num(p.value), B = num(b.value)
    if (P === null || B === null) return ''
    return (P / 100 * B).toFixed(2)
  }
  // change
  const B = num(b.value), P = num(p.value)
  if (B === null || P === null) return ''
  return (B * (1 + P / 100)).toFixed(2)
})

function calc() {
  void out.value
}

2.3 效果截图

暂未生成该工具的效果截图。

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