Skip to content

Latest commit

 

History

History
87 lines (77 loc) · 3.47 KB

README.md

File metadata and controls

87 lines (77 loc) · 3.47 KB
Raw

FKPrizeWheel - https://www.FK68.net/

  • Version - 1.1.0

肥客大转盘抽奖fk-prize-wheel浏览器原生组件Web Components API

组件特性：

  • 原生组件Web Components API
  • 兼容Angular、Vue、React 和 原生JavaScript
  • 自动根据奖品项元素数量来动态均分奖盘和单项奖的角度
  • 自动停至指定奖品动画并回调事件
  • 支持奖盘和按扭等素材自定义
  • 相应式布局动态调整转盘尺寸适应容器或屏幕

组件安装：

  1. html引用（推荐）
<script type="module">
  import './fk-prize-wheel.js';
</script>
  1. 使用文件引入
<script type="module" src="./fk-prize-wheel.js"></script>
  1. vue或react项目引用
import './fk-prize-wheel.js';

组件配置：

  • title 属性 标题（ 可选 只是给背景图加alt属性的没什么其它含义 ）
  • colors 属性 转盘扇形颜色块轮替 ( 可选 可多个值以逗号分割如 #f9e4b0,#fbf5d0 )
  • pic 属性 转盘背景图地址（ 可选 可让设计出圆盘的 png 图片 ）
  • pic_size 属性 转盘背景图比例 ( 可选 默认 100% 有可能设计图的圆盘周围还有一圈灯的花边)
  • onchange 事件 点击中间按扭区域的事件
  • onPrizeEndOver 事件 动画结束后触发事件( 需要 addEventListener 来监听 )
  • slot 默认插槽 奖盘旋转区域（ 必填 主要用于放置奖品列表项元素 )
  • slot[name=button] 按扭插槽 奖盘固定区域 ( 如抽奖按扭、转盘阴影、图片、蒙层等 )

组件方法：

  • run(status) 方法 开始/停止 缓慢转动（status是布尔型）
  • go(index) 方法 转到哪个奖品(index为slot里的第一个奖品元素)

组件使用：

  <fk-prize-wheel title="肥客大转盘抽奖fk-prize-wheel浏览器原生组件Web Components API" onchange="console.log('默认事件:',event.detail)"
    colors="#9794f7,#f7c894,#94f5f7">
    <div>奖品1</div>
    <div>奖品2</div>
    <div>奖品3</div>
    <div>奖品4</div>
    <div>奖品5</div>
    <div>奖品6</div>
    <div>奖品8</div>
    <div>奖品7</div>

    <div slot="button" onclick="start(1)">
      <div style="box-sizing: border-box;width:100%;height:100%; border-radius: 50%;overflow: hidden;border: 2px solid #7e33dd;box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.6), 0 6px 20px 0 rgba(0, 0, 0, 0.5);" alt="转盘阴影" ></div>
      <button style="position: absolute; top:50%;left:50%; transform: translate(-50%, -50%);" width="80"
        onclick="start(2)">中间抽奖按钮(请求后)</button>
    </div>
  </fk-prize-wheel>
  <button onclick="run()" style="height:100px;width: 200px;" >开始无限转动(请求前)</button>
  <button onclick="stop()" style="height:100px;width: 200px;" >停止无限转动</button>
  <script>
    // 肥客大转盘抽奖fk-prize-wheel浏览器原生组件Web Components API
    var fkPrizewWeel = document.querySelector('fk-prize-wheel');
    // 抽奖转盘动画结束事件
    fkPrizewWeel.addEventListener('onPrizeEndOver', function (event) {
      console.log("---- onPrizeEndOver ----");
      console.log(event.detail);
    });
    // 抽奖
    function start() {
      fkPrizewWeel.go(3); // 传参 index 第几个奖品
    }
    function run() {
      fkPrizewWeel.run(true); // 开始无限转动
    }
    function stop() {
      fkPrizewWeel.run(false); // 停止无限转动
    }
  </script>