HudGauge 计量条

分段显示剩余存量，数值下降时留下短暂余影。

基础用法

交互预览

设备电量86 / 100

剩余存储12 / 64

查看 Vue 源码

Vue · TypeScript

<script setup lang="ts">
import { AgmButton, AgmHudGauge } from 'augma'
import { shallowRef } from 'vue'

const battery = shallowRef(86)
</script>

<template>
  <div class="example-stack">
    <AgmHudGauge label="设备电量" :value="battery" />
    <AgmHudGauge label="剩余存储" :value="12" :max="64" />
    <div class="example-row">
      <AgmButton variant="outline" :disabled="battery === 0" @click="battery = Math.max(0, battery - 18)">
        模拟消耗
      </AgmButton>
      <AgmButton variant="ghost" :disabled="battery === 100" @click="battery = 100">
        充满
      </AgmButton>
    </div>
  </div>
</template>

<style scoped>
.example-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
}
.example-stack {
  display: grid;
  gap: 24px;
  width: 100%;
  max-width: 360px;
}
</style>

API

属性	类型	默认值	说明
label	string	必填	计量名称
value	number	必填	当前数值，约束到 0 到 max；非有限数值按 0 处理
max	number	100	有效上界，非法值回退到 100

键盘操作与使用边界

只读计量使用 meter 语义，并以“当前 / 上界”提供数值文本。剩余 50% 及以下显示警示色、20% 及以下显示危险色；数值文字始终可见，不单靠颜色。

安装

import { AgmHudGauge } from 'augma'
import 'augma/style.css'

复制可编辑源码：

pnpm dlx [email protected] add https://augma.yyj.moe/r/hud-gauge.json