方法 unix 后台ui模板 java并发编程视频 android实战项目 spark项目 网盘源码 jquery点击事件 jquery选择子元素 mysql错误代码1064 oracle查询数据库 python环境设置 python编程教程 python怎么下载安装 python安装程序 java类 java字符串 java环境配置 配置java环境 java8函数式编程 javascript实例 exescope教程 忧思华光玉 神龙kms 选项卡 源计划艾克 pdf安装包官方下载 疯狂java 梦幻手游助手 java表白代码 dnf卡邮件 摇骰子表情包 cdr透明度怎么调 ssh框架原理及流程 win10工作组 服务器系统安装教程 迅雷共享会员 图片格式太大怎么变小 php递归函数 unpack
当前位置: 首页 > 学习教程  > 编程语言

编写一个抽奖大转盘组件

2020/8/11 20:35:40 文章标签:

turn-table 是一个抽奖大转盘的 vue 组件

项目地址

有任何问题欢迎提 issue

使用方法

npm install prize-turn-table

import turnTable from 'prize-turn-table'

<turn-table :prize-list="prizeList"></turn-table>

demo 地址

组件抛出事件说明

  • 当转盘停止转动时,组件抛出一个 @rotate-over 事件,同时带出一个整型值,该值为中奖奖项在 prizeList 中的下标
  • 转盘开始转动之前,组件抛出一个 @rotate-start 事件

组件 slot 说明

  • 组件有一个 slot, centerText 显示在指针图标的中间,用法如下:

    <turnTable>
        <span slot="centerText">100次</span>
      </turnTable>
    

组件属性说明

  • size:Number | String 转盘大小
    接收数字类型或字符串类型的数据
    此属性类型为字符串时,此字符串必须是 px,rem 结尾的字符串
    此属性类型为数字时单位默认为 px;

  • prizeList: Array 奖品列表
    说明: 当奖品个数为单数时会自动补一个 谢谢惠顾 选项
    格式为:

    {
      icon: '', // 奖品图片
      name: "奖品1", // 奖品名称
    },
    {
      icon: '',
      name: "奖品2"
    },
    
  • getPrize: Function 抽奖函数
    获取抽奖结果的函数,由父组件传递,默认取随机数
    此函数必须有一个整型返回值,该返回值表示 prizeList 中中奖奖项的下标

  • count: Number 抽奖次数

  • spinConfig: Object 装盘旋转参数,有三个属性

    {
      duration: 4000, // 旋转时间
      circle: 8, // 旋转圈数
      mode: 'ease-out' // 过渡类型 (详情请查看MDN transition属性说明)
    }
    
  • strict: Boolean 严格模式
    此属性为 true 时,指针停止在扇形的随机位置
    此属性为 false 时,指针停留在扇形的中间

  • ifBackImg: Boolean 是否加上背景图片
    此属性为 true 时,有转盘背景图片
    此属性为 false 时,无转盘背景图片

  • colors: Array 抽奖扇形间隔背景颜色选项
    示例:

    [
      '#FFFFFF',
      '#F96C1C'
    ]
    
  • textColors: Array 抽奖扇形间隔文字颜色选项
    示例:

    [
      '#F96C1C',
      '#FFFFFF'
    ]
    
  • backImg:String 背景图片
    说明:仅当ifBackImg值为true时生效,若未指定值则取用默认值

  • ifCenterText:Boolean 是否展示转盘中间文字
    当 slot centerText 存在时此属性失效

  • arrowSize:String 转盘指针大小
    指定转盘中间指针图标的尺寸

  • arrowImg: String 转盘指针图片
    指定转盘中间指针图片

先放个readme文件上来,编写思路后面补


本文链接: http://www.dtmao.cc/news_show_100374.shtml

附件下载

上一篇:防火墙_源NAT实验

下一篇:生命周期初识

相关教程

    暂无相关的数据...

共有条评论 网友评论

验证码: 看不清楚?