@~gson/vue-calculator/README.md

A beautiful and functional Vue calculator component with theme customization and keyboard support

# Vue 计算器组件

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

## 预览

### 默认主题
![默认主题](./src/assets/calculator-default.svg)

### 暗色主题
![暗色主题](./src/assets/calculator-dark.svg)

## 特性

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

## 安装

```bash
npm install @~gson/vue-calculator
```

## 使用方法

```vue
<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`
默认值：
```javascript
{
  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

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

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

## 键盘支持

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

## 自定义主题示例

```vue
<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时会显示错误提示
- 表达式无效时会显示错误提示
- 小数点只能在每个数字中使用一次