当前位置：首页 > VUE

vue实现拖拽计算器

2026-02-09 20:32:31VUE

Vue实现拖拽计算器的步骤

创建Vue项目

使用Vue CLI创建一个新项目，确保安装了必要的依赖。通过命令行运行vue create drag-calculator初始化项目，选择默认配置或手动配置。

设计计算器界面

在src/components文件夹下创建Calculator.vue文件。设计计算器的基本布局，包括数字按钮、运算符按钮和显示屏。使用CSS Grid或Flexbox实现响应式布局。

vue实现拖拽计算器

<template>
  <div class="calculator">
    <div class="display">{{ currentValue }}</div>
    <div class="buttons">
      <button v-for="btn in buttons" :key="btn" @click="handleClick(btn)">
        {{ btn }}
      </button>
    </div>
  </div>
</template>

实现计算逻辑

在Calculator.vue的script部分定义计算逻辑。使用Vue的data属性存储当前输入值和计算结果，通过方法处理按钮点击事件。

<script>
export default {
  data() {
    return {
      currentValue: '0',
      buttons: ['7', '8', '9', '/', '4', '5', '6', '*', '1', '2', '3', '-', '0', '.', '=', '+', 'C']
    };
  },
  methods: {
    handleClick(btn) {
      if (btn === 'C') {
        this.currentValue = '0';
      } else if (btn === '=') {
        this.currentValue = eval(this.currentValue);
      } else {
        this.currentValue = this.currentValue === '0' ? btn : this.currentValue + btn;
      }
    }
  }
};
</script>

添加拖拽功能

使用HTML5的拖放API或第三方库如vuedraggable实现拖拽功能。在Calculator.vue中引入vuedraggable并包装计算器组件。

vue实现拖拽计算器

<template>
  <vuedraggable v-model="calculatorPosition" @start="drag=true" @end="drag=false">
    <div class="calculator" :style="{ top: calculatorPosition.y + 'px', left: calculatorPosition.x + 'px' }">
      <!-- 计算器内容 -->
    </div>
  </vuedraggable>
</template>

<script>
import vuedraggable from 'vuedraggable';
export default {
  components: { vuedraggable },
  data() {
    return {
      calculatorPosition: { x: 0, y: 0 }
    };
  }
};
</script>

样式优化

为计算器和拖拽手柄添加CSS样式，确保拖拽体验流畅。使用cursor: move提示用户可拖拽，并通过阴影效果增强视觉反馈。

.calculator {
  position: absolute;
  width: 300px;
  padding: 20px;
  background: #f5f5f5;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  cursor: move;
}
.display {
  margin-bottom: 10px;
  padding: 10px;
  background: #fff;
  text-align: right;
  font-size: 24px;
}
.buttons {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
button {
  padding: 15px;
  font-size: 18px;
  border: none;
  background: #e0e0e0;
  border-radius: 5px;
}