Vue 3 弹出式计算器组件（源码 + 教程）

🧮 Vue 3 弹出式计算器组件（源码 + 教程）

📌 建议收藏 + 点赞 + 关注，本组件支持加减乘除、双向绑定、计算过程展示，适用于表单辅助输入场景。

在这里插入图片描述

🔧 一、完整源码（复制即用）

<!-- CalculatorInput.vue -->
<template>
  <div class="calculator-wrapper">
    <!-- 自定义输入框 -->
    <div class="custom-input-container">
      <input type="text" class="custom-input" :value="modelValue" @input="onInputChange" :placeholder="placeholder" />
      <div class="calculator-icon" @click="toggleCalculator"><span>🧮</span></div>
    </div>

    <!-- 计算器部分 -->
    <div v-show="showCalculator" class="calculator-container" ref="calculatorRef">
      <div class="calculator">
        <div class="display">
          <div class="calculation-process">{{ calculationProcess || '&nbsp;' }}</div>
          <div class="current-value">{{ currentValue || '0' }}</div>
        </div>
        <div class="buttons">
          <div class="button" @click="clear">C</div>
          <div class="button" @click="changeSign">+/-</div>
          <div class="button" @click="percentage">%</div>
          <div class="button operator" @click="setOperation('/')">/</div>

          <div class="button" @click="appendNumber('7')">7</div>
          <div class="button" @click="appendNumber('8')">8</div>
          <div class="button" @click="appendNumber('9')">9</div>
          <div class="button operator" @click="setOperation('*')">×</div>

          <div class="button" @click="appendNumber('4')">4</div>
          <div class="button" @click="appendNumber('5')">5</div>
          <div class="button" @click="appendNumber('6')">6</div>
          <div class="button operator" @click="setOperation('-')">-</div>

          <div class="button" @click="appendNumber('1')">1</div>
          <div class="button" @click="appendNumber('2')">2</div>
          <div class="button" @click="appendNumber('3')">3</div>
          <div class="button operator" @click="setOperation('+')">+</div>

          <div class="button zero" @click="appendNumber('0')">0</div>
          <div class="button" @click="appendDecimal">.</div>
          <div class="button operator" @click="calculate">=</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, watch, onMounted, onUnmounted } from 'vue';

const props = defineProps({
  modelValue: { type: String, default: '' },
  placeholder: { type: String, default: '请输入数值' },
  width: { type: String, default: '200px' }
});
const emit = defineEmits(['update:modelValue']);

const onInputChange = (e) => emit('update:modelValue', e.target.value);

const currentValue = ref('');
const previousValue = ref('');
const operation = ref(null);
const showCalculator = ref(false);
const calculationPerformed = ref(false);
const calculationProcess = ref('');
const calculatorRef = ref(null);

const toggleCalculator = () => (showCalculator.value = !showCalculator.value);

const handleClickOutside = (e) => {
  if (showCalculator.value && calculatorRef.value && !calculatorRef.value.contains(e.target) && !e.target.closest('.calculator-icon')) {
    showCalculator.value = false;
  }
};
const handleEscKey = (e) => {
  if (e.key === 'Escape') showCalculator.value = false;
};
onMounted(() => {
  document.addEventListener('click', handleClickOutside);
  document.addEventListener('keydown', handleEscKey);
});
onUnmounted(() => {
  document.removeEventListener('click', handleClickOutside);
  document.removeEventListener('keydown', handleEscKey);
});

watch(currentValue, (val) => {
  if (calculationPerformed.value && val !== '') emit('update:modelValue', val);
});

const clear = () => {
  currentValue.value = '';
  previousValue.value = '';
  operation.value = null;
  calculationProcess.value = '';
  emit('update:modelValue', '');
};
const appendNumber = (n) => {
  if (calculationPerformed.value) {
    currentValue.value = '';
    calculationPerformed.value = false;
    calculationProcess.value = '';
  }
  currentValue.value += n;
  updateCalculationProcess();
};
const appendDecimal = () => {
  if (calculationPerformed.value) {
    currentValue.value = '0';
    calculationPerformed.value = false;
    calculationProcess.value = '';
  }
  if (!currentValue.value.includes('.')) currentValue.value += '.';
  updateCalculationProcess();
};
const setOperation = (op) => {
  if (!currentValue.value) return;
  if (previousValue.value) calculate();
  operation.value = op;
  previousValue.value = currentValue.value;
  currentValue.value = '';
  updateCalculationProcess();
};
const calculate = () => {
  if (!operation.value || !previousValue.value || !currentValue.value) {
    if (currentValue.value) {
      emit('update:modelValue', currentValue.value);
      if (calculationProcess.value === currentValue.value)
        calculationProcess.value = `${currentValue.value} =`;
      calculationPerformed.value = true;
    }
    return;
  }
  const prev = parseFloat(previousValue.value);
  const current = parseFloat(currentValue.value);
  let result = 0;
  switch (operation.value) {
    case '+': result = prev + current; break;
    case '-': result = prev - current; break;
    case '*': result = prev * current; break;
    case '/': result = prev / current; break;
  }
  const symbol = operation.value === '*' ? '×' : operation.value === '/' ? '÷' : operation.value;
  calculationProcess.value = `${previousValue.value} ${symbol} ${currentValue.value} =`;
  currentValue.value = result.toString();
  previousValue.value = '';
  operation.value = null;
  calculationPerformed.value = true;
};
const updateCalculationProcess = () => {
  const symbol = operation.value === '*' ? '×' : operation.value === '/' ? '÷' : operation.value;
  if (!operation.value) {
    calculationProcess.value = currentValue.value;
  } else if (!currentValue.value) {
    calculationProcess.value = `${previousValue.value} ${symbol}`;
  } else {
    calculationProcess.value = `${previousValue.value} ${symbol} ${currentValue.value}`;
  }
};
const changeSign = () => {
  currentValue.value = currentValue.value.charAt(0) === '-' ? currentValue.value.slice(1) : `-${currentValue.value}`;
  updateCalculationProcess();
};
const percentage = () => {
  currentValue.value = (parseFloat(currentValue.value) / 100).toString();
  updateCalculationProcess();
};
</script>

<style scoped>
.calculator-wrapper { position: relative; width: v-bind('width'); margin: 0 auto; }
.custom-input-container { position: relative; width: 100%; margin-bottom: 0.5rem; }
.custom-input { width: 100%; padding: 8px 30px 8px 10px; border: 1px solid #dcdfe6; border-radius: 4px; font-size: 14px; transition: border-color 0.2s; box-sizing: border-box; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05); }
.custom-input:focus { outline: none; border-color: #409eff; box-shadow: 0 0 5px rgba(64, 158, 255, 0.3); }
.calculator-icon { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); cursor: pointer; padding: 3px; font-size: 16px; color: #606266; transition: color 0.2s; }
.calculator-icon:hover { color: #409eff; }
.calculator-container { position: absolute; top: 100%; left: 0; width: 100%; z-index: 100; margin-top: 5px; box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15); border-radius: 8px; }
.calculator { width: 100%; background-color: #f0f0f0; border-radius: 8px; overflow: hidden; }
.display { background-color: #333; color: white; padding: 10px; text-align: right; font-family: monospace; }
.calculation-process { font-size: 0.8rem; color: #aaa; min-height: 16px; margin-bottom: 4px; }
.current-value { font-size: 1.2rem; min-height: 24px; }
.buttons { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background-color: #999; }
.button { background-color: #e0e0e0; padding: 10px; text-align: center; cursor: pointer; font-size: 0.9rem; transition: background-color 0.2s; }
.button:hover { background-color: #d0d0d0; }
.operator { background-color: #f8a51b; color: white; }
.operator:hover { background-color: #e09016; }
.zero { grid-column: span 2; }
</style>

🧠 二、组件结构与逻辑全解析

🎯 目标：理解该组件的 UI 组成、逻辑功能、数据响应过程，便于拓展与优化。

📦 1. 组件功能概览

模块	功能说明
自定义输入框	输入数值，展示已计算结果
弹出计算器	模拟标准四则运算计算器，支持连算与过程展示
状态响应	双向绑定 `v-model`，每次计算结果自动同步外部状态
UI 样式	视觉风格轻盈，适配大多数表单/工具栏场景

🔍 2. 模板结构解析 (`<template>`)

<div class="custom-input-container">
  <input ... /> <!-- 用户输入框 -->
  <div class="calculator-icon"><span>🧮</span></div> <!-- 弹出按钮 -->
</div>

<div v-show="showCalculator" class="calculator-container">
  <div class="calculator"> <!-- 主计算器界面 -->
    <div class="display"> <!-- 显示屏：过程 + 当前值 -->
      <div class="calculation-process">{{ calculationProcess }}</div>
      <div class="current-value">{{ currentValue }}</div>
    </div>
    <div class="buttons"> <!-- 20 个按键布局 -->
      <!-- 数字、运算符、等号等 -->
    </div>
  </div>
</div>

📌 重点说明：

v-show="showCalculator" 控制计算器显示/隐藏；
custom-input-container 提供了清晰的输入交互入口；
所有按钮通过事件绑定实现行为触发；

🧩 3. 脚本逻辑详解 (`<script setup>`)

📌 Props & Emits

const props = defineProps({
  modelValue: String,
  placeholder: String,
  width: String
});
const emit = defineEmits(['update:modelValue']);

使用 v-model 实现组件外部与内部状态联动；
支持自定义宽度与占位符提示。

⚙️ 核心响应式变量

const currentValue = ref('');         // 当前输入
const previousValue = ref('');        // 上一步数值
const operation = ref(null);          // 当前运算符
const calculationProcess = ref('');   // 顶部过程显示
const calculationPerformed = ref(false); // 是否已计算
const showCalculator = ref(false);    // 显示控制

🧠 主要功能函数

appendNumber(n) / appendDecimal()：输入数字与小数点；
setOperation(op)：设置运算符；
calculate()：计算结果并展示过程；
clear()：清空一切；
changeSign() / percentage()：正负号、百分比扩展；
updateCalculationProcess()：更新顶部计算过程字符串。

🖱️ 弹出交互逻辑

const handleClickOutside = (e) => {
  if (!calculatorRef.value.contains(e.target)) {
    showCalculator.value = false;
  }
};

点击外部关闭；
按下 ESC 键关闭；
使用 ref + document.addEventListener 实现监听。

🎨 4. 样式美化亮点 (`<style scoped>`)

采用浅灰 + 橙色运算符按钮突出视觉分组；
display 区域使用 monospace 字体，模拟真实计算器屏幕；
grid-template-columns: repeat(4, 1fr) 布局整齐 4 列按钮；
.zero 使用 grid-column: span 2 让 0 按钮宽两倍更真实；
自定义输入框视觉统一，内嵌按钮轻巧无干扰。

🧩 三、拓展建议与实战应用

🚀 用好这组件，不止复制粘贴，更可以轻松定制与集成。

✅ 推荐使用场景

💼 表单辅助数值输入（如商品价格、折扣设置）
📊 表格单元格弹出式计算（配合 Element Plus 的表格）
📱 移动端小屏工具栏简易计算

🔧 自定义拓展建议

功能需求	实现方式
保留历史记录	增加 `historyList`，每次计算后 push 新记录
支持快捷键输入	监听键盘按键映射按钮功能
控制显示位置	增加 `placement` props，实现顶部/右侧弹出方向切换
改为暗黑模式	改 `.calculator` 和 `.display` 的背景与字体颜色即可