vue实现盖章
Vue 实现盖章效果
在 Vue 中实现盖章效果可以通过 CSS 动画和动态组件结合实现。以下是具体实现方法：
使用 CSS 动画和动态组件
创建印章组件，通过 CSS 定义印章的样式和动画效果：
<template>
<div class="stamp" :style="{ left: position.x + 'px', top: position.y + 'px' }">
{{ text }}
</div>
</template>
<script>
export default {
props: {
text: String,
position: Object
}
}
</script>
<style>
.stamp {
position: absolute;
padding: 10px 20px;
color: red;
border: 3px solid red;
border-radius: 5px;
font-weight: bold;
transform: rotate(-15deg);
opacity: 0;
animation: stamp 0.5s ease-out forwards;
}
@keyframes stamp {
0% {
transform: scale(3) rotate(-15deg);
opacity: 0;
}
100% {
transform: scale(1) rotate(-15deg);
opacity: 0.8;
}
}
</style>在父组件中使用
在需要盖章的页面中动态添加印章组件：
<template>
<div class="document" @click="addStamp">
<Stamp v-for="(stamp, index) in stamps" :key="index" :text="stamp.text" :position="stamp.position" />
<!-- 文档内容 -->
</div>
</template>
<script>
import Stamp from './Stamp.vue'
export default {
components: { Stamp },
data() {
return {
stamps: []
}
},
methods: {
addStamp(event) {
this.stamps.push({
text: '已审核',
position: { x: event.clientX, y: event.clientY }
})
}
}
}
</script>
<style>
.document {
position: relative;
min-height: 100vh;
cursor: pointer;
}
</style>使用 SVG 实现更复杂印章
如果需要更复杂的印章效果，可以使用 SVG：
<template>
<svg class="stamp" :style="{ left: position.x + 'px', top: position.y + 'px' }" viewBox="0 0 200 200">
<circle cx="100" cy="100" r="90" fill="none" stroke="red" stroke-width="5"/>
<text x="100" y="100" text-anchor="middle" fill="red" font-size="24" font-weight="bold">{{ text }}</text>
</svg>
</template>注意事项
- 确保印章组件有正确的定位上下文（父元素需要设置 position: relative）
- 调整动画时间和效果以获得最佳视觉体验
- 可以扩展组件支持不同印章样式和颜色
- 考虑添加点击事件阻止冒泡，避免与文档其他交互冲突
以上方法可以实现基本的盖章效果，可以根据实际需求调整样式和交互方式。
