h5-activity-components v0.2.0

H5常用活动组件

大转盘，刮刮乐组件

git地址

https://gitee.com/guome/h5-activity-components

安装

$ yarn add h5-activity-components

使用

全局注册

import { createApp } from 'vue'
import App from './App.vue'

// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
import H5ActivityComponents from 'h5-activity-components'
import 'h5-activity-components/dist/style.css'

createApp(App)
  .use(H5ActivityComponents)
  .mount('#app')

大转盘

注意：如果外层有 flex 布局需要再包一层，否则尺寸计算不出来暂时不知道什么原因

基本使用

<div class="lucky-wheel__box">
  <div class="inner">
    <VunLuckyWheel
      ref="lucyWheel"
      :disabled="myTimes < 1"
      @finish="handleFinish"
      @trigger-disabled="triggerDisabled"
      tipTextFontSize="16px"
    />
  </div>
</div>

<style>
  .lucky-wheel__box {
    display: flex;
    justify-content: center;
    .inner {
      width: 630px;
    }
  }
</style>

props和emits

export interface PrizeItemType {
  icon: string; // 奖品图片
  name: string; // 奖品名称
  isPrize: number; // 该奖项是否为奖品,0为没中奖
  weight: number; // 权重
  // 自定义配置
  meta?: {
    [index: string]: any;
  };
}

interface Props {
  // 奖品列表
  prizes?: PrizeItemType[];
  // 总旋转时间 ms
  duration?: number | string;
  // 旋转圈数
  circle?: number;
  // 动画效果
  mode?:
    | "ease"
    | "ease-in"
    | "ease-out"
    | "ease-in-out"
    | "cubic-bezier(<number [0,1]>, <number>, <number [0,1]>, <number>)";
  // 是否禁止旋转
  disabled?: boolean;
  // 禁止旋转的提示
  message?: string;
  // 点击抽奖字体大小
  tipTextFontSize?: string;
  // 点击抽奖字样
  tipText?: string;
  // 大转盘背景
  luckyWheelBgImg?: string;
  // 边框
  borderWidth?: string;
  // 图标偏移量
  iconOffset?: String;
}

// eslint-disable-next-line no-undef
const emit = defineEmits<{
  (e: "win", prize: PrizeItemType): void;	// 中奖回调
  (e: "miss", prize: PrizeItemType): void;	// 未中奖回调
  (e: "finish", prize: PrizeItemType): void;	// 结束回调（不管有没有中奖）
  (e: "trigger-disabled"): void; // 禁用点击的时候往外抛出的事件
}>();

效果图

刮刮乐

基本使用

<VunScratch
  ref="scratch"
  :disabled="!myTimes"
  @trigger-disabled="triggerDisabled"
  @finish="handleScratchFinish"
>
  <div class="scratch-bg__list">
    <img
      v-for="(imgSrc, index) in winBgImg"
      :key="index"
      :src="imgSrc"
      alt=""
    />
  </div>
</VunScratch>

props和emit

emits: [
  "finish", // 结束
  "start", // 开始刮
  "trigger-disabled", // 禁用点击的时候往外抛出的事件
],
props: {
  // 画笔粗细
  lineWidth: {
    type: Number,
    default: 30,
  },
  // 刮开1/3面积的时候结束游戏
  finishProportion: {
    type: Number,
    default: 1 / 3,
  },
 	// 是否禁用
  disabled: {
    type: Boolean,
    default: false,
  },
 	// 盒子高度
  height: {
    type: [String, Number],
    default: "200px",
  },
},

slot

只有一个默认 slot 放内容/奖品的盒子

效果图

开发注意事项

在 setup 和 普通的 script 出现在一起的时候，普通的 script 必须写下面，否则组件无法使用会出现类似提示：invalid vnode type: symbol fragment symbol

<script setup lang="ts">
	// ...
</script>

<!--必须写下面,否则无效-->
<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
  name: "VunLuckyWheel",
});
</script>