实现 油耗燃油费 工具

分类：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.2 核心逻辑概览

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

• run()

2.2.3 关键实现代码

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

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

const dist = ref(100), cons = ref(7), price = ref(8)
const error = ref(''), res = ref(null)

function run() {
  error.value = res.value = null
  const d = Number(dist.value), c = Number(cons.value), p = Number(price.value)
  if (![d, c, p].every(Number.isFinite) || d < 0 || c < 0 || p < 0) { error.value = '请填写有效非负数'; return }
  const liters = d * c / 100
  const cost = liters * p
  res.value = { liters, cost, perKm: d > 0 ? cost / d : 0 }
}

2.3 效果截图

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