# jw-client-ui

> 大转盘抽奖组件

Latest version **1.0.0** (published 2021-08-24) · ISC license · 0 weekly downloads

## Install

```sh
npm install jw-client-ui
pnpm add jw-client-ui
yarn add jw-client-ui
bun add jw-client-ui
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.0 |
| Published | 2021-08-24 |
| First published | 2021-08-24 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 42.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | wsq_jw |

## Links

- npm: https://www.npmjs.com/package/jw-client-ui
- npm.io page: https://npm.io/package/jw-client-ui

## Recent versions

- 1.0.0 (latest) — 2021-08-24

## README

# 一、相关命令

打包编译命令：

```
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);
```

# 四、大转盘组件用法

使用示例：

``` vue
<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 | 转盘停止转动时触发 |

---
_Source: https://npm.io/package/jw-client-ui · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._