实现 BMI计算器 工具

分类：general ｜ 标签：健康、BMI、体重、计算器 输入身高体重评估身体质量指数(BMI)，提供健康建议和理想体重范围

2.1 功能说明

输入身高体重评估身体质量指数(BMI)，提供健康建议和理想体重范围

核心能力

• BMI计算器
• 意见反馈

2.2 代码实现

2.2.1 组件结构

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

本工具目录 BmiCalculator/ 下除 index.vue 外，还包含以下源文件：

• CalculatorPage.vue（743 行）

2.2.2 核心逻辑概览

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

• goBack()

2.2.3 关键实现代码

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

import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { ElTabs, ElTabPane, ElButton, ElIcon } from 'element-plus'
import { ArrowLeft } from '@element-plus/icons-vue'
import CalculatorPage from './CalculatorPage.vue'
import FeedbackForm from '@/components/FeedbackForm.vue'

const router = useRouter()
const activeTab = ref('calculator')

const goBack = () => {
  router.push('/general')
}

2.3 效果截图

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

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