jw-client-ui v1.0.0

一、相关命令

打包编译命令：

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>

属性

事件