@tanzhenxing/zx-scratchcard v1.0.1

zx-scratchcard 刮刮卡

基于canvas的刮刮卡组件，支持自定义刮开层颜色、图片、刮开比例等配置。

平台兼容性

基础用法

<template>
  <zx-scratchcard content="恭喜中奖1000元" @open="handleOpen" />
</template>

<script setup>
const handleOpen = () => {
  console.log('刮开了！')
}
</script>

异步数据

<template>
  <zx-scratchcard :content="prizeContent" @open="handleOpen" />
</template>

<script setup>
import { ref, onMounted } from 'vue'

const prizeContent = ref('')

onMounted(() => {
  setTimeout(() => {
    prizeContent.value = '恭喜获得iPhone 15'
  }, 2000)
})

const handleOpen = () => {
  console.log('刮开了！')
}
</script>

自定义颜色

<template>
  <zx-scratchcard
    cover-color="#F9CC9D"
    background-color="#C3D08B"
    content="<em>1000</em><strong>元</strong>"
    @open="handleOpen"
  />
</template>

<script setup>
const handleOpen = () => {
  console.log('刮开了！')
}
</script>

背景图片

<template>
  <zx-scratchcard
    content="恭喜中奖1000万"
    :cover-img="coverImage"
    @open="handleOpen"
  />
</template>

<script setup>
import { ref } from 'vue'

const coverImage = ref('https://example.com/cover.jpg')

const handleOpen = () => {
  console.log('刮开了！')
}
</script>

自定义尺寸和样式

<template>
  <zx-scratchcard
    width="400px"
    height="200px"
    font-size="24px"
    cover-color="#FF6B6B"
    background-color="#4ECDC4"
    cover-text="刮开有惊喜"
    cover-text-color="#FFFFFF"
    cover-text-size="18px"
    content="恭喜获得特等奖"
    @open="handleOpen"
  />
</template>

<script setup>
const handleOpen = () => {
  console.log('刮开了！')
}
</script>

设置刮开比例

<template>
  <zx-scratchcard
    content="恭喜中奖1000万"
    :ratio="0.3"
    @open="handleOpen"
  />
</template>

<script setup>
const handleOpen = () => {
  console.log('只需要刮开30%就触发事件！')
}
</script>

重置刮刮卡

<template>
  <view>
    <zx-scratchcard
      ref="scratchcardRef"
      content="恭喜中奖1000元"
      @open="handleOpen"
    />
    <button @click="resetCard">重置</button>
  </view>
</template>

<script setup>
import { ref } from 'vue'

const scratchcardRef = ref()

const handleOpen = () => {
  console.log('刮开了！')
}

const resetCard = () => {
  scratchcardRef.value?.reset()
}
</script>

Props

Events

Methods

注意事项

1. 组件基于canvas实现，在不同平台上可能存在性能差异
2. 图片资源建议使用网络地址或base64格式
3. 在小程序中使用时，需要确保canvas-id的唯一性
4. 刮开比例ratio建议设置在0.3-0.8之间，过小可能导致误触发，过大可能影响用户体验
5. 组件会自动适配高清屏幕，无需额外处理

常见问题

Q: 为什么在某些情况下canvas不显示？

A: 请确保组件已经正确挂载，可以尝试在nextTick中初始化或添加适当的延时。

Q: 如何实现更复杂的刮开效果？

A: 可以通过修改scratch方法中的绘制逻辑来实现不同的刮开效果，比如改变刮除半径、形状等。

Q: 在小程序中性能如何优化？

A: 建议合理设置刮开比例，避免过于频繁的重绘操作，必要时可以添加节流处理。