Vue 计算器组件

一个基于Vue 3的现代化计算器组件，支持主题自定义，提供实时计算结果显示和键盘操作支持。

预览

默认主题

暗色主题

特性

• 支持基本的数学运算（加、减、乘、除）
• 支持括号运算
• 实时显示计算结果
• 完全可自定义的主题
• 键盘操作支持
• 响应式设计

安装

npm install @~gson/vue-calculator

使用方法

<script setup>
import Calculator from '@~gson/vue-calculator'
import '@~gson/vue-calculator/dist/vue-calculator.css'

const handleConfirm = (result) => {
  console.log('计算结果:', result)
}
</script>

<template>
  <Calculator @confirm="handleConfirm" />
</template>

属性配置

theme

类型：Object 默认值：

{
  background: '#f5f7fa',
  display: '#ffffff',
  button: '#ffffff',
  operator: {
    background: '#a8e6cf',
    hover: '#88d7b5'
  },
  equal: {
    background: '#ff9ff3',
    hover: '#f368e0'
  },
  clear: {
    background: '#ff7675',
    hover: '#d63031'
  },
  backspace: {
    background: '#e0e0e0',
    hover: '#d0d0d0'
  }
}

confirmText

类型：String 默认值：'确认'

确认按钮显示的文本。

事件

confirm

当点击确认按钮或按下回车键时触发，返回计算结果。

<Calculator @confirm="(result) => console.log(result)" />

键盘支持

• 数字键（0-9）：输入数字
• 运算符（+、-、*、/）：输入运算符
• 括号（(、)）：输入括号
• Enter：计算结果
• Backspace：删除最后一个字符
• Escape：清除所有输入

自定义主题示例

<script setup>
const customTheme = {
  background: '#2d3436',
  display: '#636e72',
  button: '#b2bec3',
  operator: {
    background: '#74b9ff',
    hover: '#0984e3'
  },
  equal: {
    background: '#00b894',
    hover: '#00cec9'
  },
  clear: {
    background: '#d63031',
    hover: '#e17055'
  },
  backspace: {
    background: '#a29bfe',
    hover: '#6c5ce7'
  }
}
</script>

<template>
  <Calculator
    :theme="customTheme"
    confirmText="计算"
    @confirm="handleConfirm"
  />
</template>

注意事项

• 除数为0时会显示错误提示
• 表达式无效时会显示错误提示
• 小数点只能在每个数字中使用一次