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 || ' ' }}</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 的背景与字体颜色即可 |
✅ 总结：一个轻巧实用的 Vue 计算器组件
🔁 回顾一下：
- ✅ 支持标准四则运算 + 输入框联动；
- ✅ 样式美观、结构清晰、逻辑独立；
- ✅ 适合复制粘贴，嵌入任何 Vue 3 项目中。
📌 如果这对你有帮助，欢迎收藏、点赞、关注！
📩 有问题评论区见，我会持续优化、发布更多实用组件 🚀