jw-client-ui

一、相关命令

打包编译命令：

npm run build

启动示例命令：

npm run example

二、页面引入组件库

若组件库放在 http://127.0.0.1/assets 目录，则引入代码如下所示：

  <!-- 引入组件库 -->
  <script src="http://127.0.0.1/assets/lib/index.js"></script>
  <!-- 引入样式 -->
  <link href="http://127.0.0.1/assets/lib/index.css" rel="stylesheet"></link>

三、通过 NPM 包引入组件库

安装组件库

npm i jw-client-ui -S

引入组件库

import JWClientUI from 'jw-client-ui';
import 'jw-client-ui/lib/index.css';

Vue.use(JWClientUI);

四、大转盘组件用法

使用示例：

<template>
  <div class="home">
    <div class="turn-table-cover">
      <turn-table
        :prize-list="prizeList"
        button-text="点击抽奖"
        lottery-tips="10超级币/次"
        @start="handleStart"
        @stoped="handleStoped"
        ref="turnTable">
      </turn-table>
    </div>
  </div>
</template>

<script>

export default {
  name: 'Home',
  components: {
  },
  data(){
    return {
      prizeList: [
        {
          name: '1五十个超级币',
          image: './img/coin.png'
        }, {
          name: '2五十个超级币',
          image: './img/coin.png'
        }, {
          name: '3五十个超级币',
          image: './img/coin.png'
        }, {
          name: '4五十个超级币',
          image: './img/coin.png'
        }, {
          name: '4五十个超级币',
          image: './img/coin.png'
        }, {
          name: '4五十个超级币',
          image: './img/coin.png'
        }, {
          name: '4五十个超级币',
          image: './img/coin.png'
        }, {
          name: '4五十个超级币',
          image: './img/coin.png'
        }
      ]
    }
  },
  methods: {
    handleStart(){
      console.log('start')
      setTimeout(()=> {
        this.$refs['turnTable'].stop(3)
      }, 1000)
    },
    handleStoped(){
      console.log('stoped')
    }
  }
}
</script>

<style>
  .home {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    padding-top: 5vh;
    background-color: rgb(254, 76, 3);
  }
  .turn-table-cover {
    width: 80vw;
    height: 80vw;
  }
</style>

属性

参数	说明	类型	默认值	必选
prizeList	奖品列表	array	——	true
borderColor	边框颜色	string	rgb(254, 205, 5)	false
buttonText	抽奖按钮文字	string	——	true
lotteryTips	抽奖提示	string	——	true

事件

事件名称	说明
start	点击抽奖按钮时触发
stoped	转盘停止转动时触发