当前位置：首页 > VUE

vue实现盖章组件

2026-03-29 05:28:13VUE

实现思路

在Vue中实现盖章组件，可以通过动态渲染图片或SVG元素，结合CSS动画和交互逻辑完成。核心是定位、旋转、缩放等样式的控制。

vue实现盖章组件

基本实现步骤

创建Vue组件文件Stamp.vue，定义基本模板和样式：

vue实现盖章组件

<template>
  <div class="stamp-container" @click="handleStamp">
    <img 
      v-if="isStamped" 
      :src="stampImage" 
      class="stamp" 
      :style="stampStyle"
    />
  </div>
</template>

<script>
export default {
  props: {
    stampImage: {
      type: String,
      default: 'stamp.png'
    }
  },
  data() {
    return {
      isStamped: false,
      position: { x: 0, y: 0 },
      rotation: 0
    }
  },
  computed: {
    stampStyle() {
      return {
        left: `${this.position.x}px`,
        top: `${this.position.y}px`,
        transform: `rotate(${this.randomRotation()}deg)`
      }
    }
  },
  methods: {
    handleStamp(e) {
      const rect = e.target.getBoundingClientRect()
      this.position = {
        x: e.clientX - rect.left - 50,
        y: e.clientY - rect.top - 50
      }
      this.isStamped = true
    },
    randomRotation() {
      return Math.floor(Math.random() * 30) - 15
    }
  }
}
</script>

<style scoped>
.stamp-container {
  position: relative;
  width: 100%;
  height: 500px;
  border: 1px dashed #ccc;
  cursor: pointer;
}

.stamp {
  position: absolute;
  width: 100px;
  height: 100px;
  pointer-events: none;
  animation: stampEffect 0.3s ease-out;
}

@keyframes stampEffect {
  0% { transform: scale(3); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}
</style>

高级功能扩展

添加按压动画效果和自定义参数：

<script>
export default {
  props: {
    stampImage: String,
    size: {
      type: Number,
      default: 100
    },
    maxRotation: {
      type: Number,
      default: 15
    }
  },
  methods: {
    randomRotation() {
      return Math.floor(Math.random() * this.maxRotation*2) - this.maxRotation
    }
  }
}
</script>

使用方法

在父组件中引入并使用：

<template>
  <Stamp 
    stampImage="/path/to/stamp.png" 
    :size="120"
    :maxRotation="20"
  />
</template>

<script>
import Stamp from './Stamp.vue'

export default {
  components: { Stamp }
}
</script>