vue实现拖拽计算器

Vue 拖拽计算器实现方案

核心功能分析

1. 可拖拽组件：计算器整体或按钮需要支持拖拽 2.计算逻辑：实现基本四则运算功能
2. 布局系统：支持动态调整计算器位置

基础实现步骤

安装依赖 需要vue-draggable或interact.js等拖拽库

npm install vuedraggable

组件结构

<template>
  <div class="calculator" ref="calculator">
    <div class="display">{{ currentValue }}</div>
    <div class="buttons">
      <button v-for="btn in buttons" 
              @click="handleClick(btn)"
              draggable="true"
              @dragstart="dragStart">
        {{ btn }}
      </button>
    </div>
  </div>
</template>

拖拽逻辑实现

import { ref } from 'vue'

export default {
  setup() {
    const calculator = ref(null)
    const posX = ref(0)
    const posY = ref(0)

    const dragStart = (e) => {
      e.dataTransfer.setData('text/plain', e.target.id)
    }

    const allowDrop = (e) => {
      e.preventDefault()
    }

    const drop = (e) => {
      e.preventDefault()
      posX.value = e.clientX
      posY.value = e.clientY
      calculator.value.style.left = `${posX.value}px`
      calculator.value.style.top = `${posY.value}px`
    }

    return { calculator, dragStart, allowDrop, drop }
  }
}

计算逻辑实现

const currentValue = ref('0')
const operator = ref(null)
const previousValue = ref(null)

const handleClick = (value) => {
  if (!isNaN(value)) {
    currentValue.value === '0' 
      ? currentValue.value = value
      : currentValue.value += value
  } else if (value === 'C') {
    currentValue.value = '0'
  } else if (value === '=') {
    calculate()
  } else {
    operator.value = value
    previousValue.value = currentValue.value
    currentValue.value = '0'
  }
}

const calculate = () => {
  const prev = parseFloat(previousValue.value)
  const current = parseFloat(currentValue.value)

  switch(operator.value) {
    case '+': currentValue.value = (prev + current).toString(); break
    case '-': currentValue.value = (prev - current).toString(); break
    case '*': currentValue.value = (prev * current).toString(); break
    case '/': currentValue.value = (prev / current).toString(); break
  }
}

样式优化

.calculator {
  position: absolute;
  width: 300px;
  border: 1px solid #ccc;
  border-radius: 10px;
  padding: 20px;
  background: #f5f5f5;
  cursor: move;
}

.buttons {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

button {
  padding: 15px;
  font-size: 18px;
  border: none;
  border-radius: 5px;
  background: #e0e0e0;
}

进阶功能扩展

1. 添加触摸事件支持移动端
2. 实现组件边界限制
3. 添加拖拽放置区域标识
4. 保存位置到localStorage

注意事项

1. 移动端需要额外处理touch事件
2. 计算精度问题需要特殊处理
3. 拖拽边界需要限制在可视区域内
4. 考虑添加动画效果提升用户体验

以上方案提供了Vue实现拖拽计算器的完整思路，可根据实际需求调整细节实现。