当前位置：首页 > VUE

vue实现拖拽计算器

2026-03-06 20:24:53VUE

实现拖拽计算器的步骤

创建Vue项目

使用Vue CLI或Vite创建一个新的Vue项目。确保项目环境配置正确，安装必要的依赖。

npm create vue@latest drag-calculator
cd drag-calculator
npm install

安装拖拽库

Vue Draggable是一个基于Sortable.js的拖拽库，适合实现拖拽功能。

npm install vuedraggable

设计计算器界面

在组件中设计计算器的界面，包括数字按钮、操作符按钮和显示区域。使用CSS Grid或Flexbox布局确保按钮排列整齐。

<template>
  <div class="calculator">
    <div class="display">{{ currentValue }}</div>
    <div class="buttons">
      <button v-for="num in numbers" :key="num" @click="appendNumber(num)">{{ num }}</button>
      <button v-for="op in operators" :key="op" @click="setOperator(op)">{{ op }}</button>
      <button @click="calculate">=</button>
      <button @click="clear">C</button>
    </div>
  </div>
</template>

实现拖拽功能

使用vuedraggable组件包裹计算器，使其可以拖拽。设置拖拽的句柄或整个计算器为可拖拽区域。

<template>
  <vuedraggable v-model="calculatorPosition" :options="{ handle: '.calculator' }">
    <div class="calculator" ref="calculator">
      <!-- 计算器内容 -->
    </div>
  </vuedraggable>
</template>

添加计算逻辑

在Vue组件的methods中实现计算逻辑，包括数字输入、操作符设置、计算和清除功能。

methods: {
  appendNumber(num) {
    this.currentValue += num;
  },
  setOperator(op) {
    this.operator = op;
    this.previousValue = this.currentValue;
    this.currentValue = '';
  },
  calculate() {
    const prev = parseFloat(this.previousValue);
    const current = parseFloat(this.currentValue);
    switch (this.operator) {
      case '+': this.currentValue = (prev + current).toString(); break;
      case '-': this.currentValue = (prev - current).toString(); break;
      case '*': this.currentValue = (prev * current).toString(); break;
      case '/': this.currentValue = (prev / current).toString(); break;
    }
    this.operator = null;
    this.previousValue = '';
  },
  clear() {
    this.currentValue = '';
    this.previousValue = '';
    this.operator = null;
  }
}

样式优化

为计算器和拖拽区域添加CSS样式，确保计算器外观美观且拖拽体验流畅。

.calculator {
  width: 300px;
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 10px;
  background: #f9f9f9;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  cursor: move;
}
.display {
  font-size: 24px;
  text-align: right;
  padding: 10px;
  margin-bottom: 10px;
  background: #fff;
  border: 1px solid #ddd;
}
.buttons {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 5px;
}
button {
  padding: 10px;
  font-size: 18px;
  border: none;
  background: #e0e0e0;
  cursor: pointer;
}
button:hover {
  background: #d0d0d0;
}