feat:luckdraw 文档修改

src/packages/luckdraw/demo.vue

@@ -9,14 +9,14 @@
     <nut-luckdraw
       class="drawTable"
       ref="luckDrawPrize"
-      :luckWidth="luckWidth"
-      :luckheight="luckheight"
-      :prizeList="prizeList"
-      :turnsNumber="turnsNumber"
-      :turnsTime="turnsTime"
-      :prizeIndex="prizeIndex"
-      :styleOpt="styleOpt"
-      @endTurns="endTurns"
+      :luck-width="luckWidth"
+      :luck-height="luckheight"
+      :prize-list="prizeList"
+      :turns-number="turnsNumber"
+      :turns-time="turnsTime"
+      :prize-index="prizeIndex"
+      :style-opt="styleOpt"
+      @end-turns="endTurns"
     >
       <template slot="item" slot-scope="scope">
         <div class="drawTable-name">{{ scope.item.prizeName }}</div>
@@ -115,6 +115,7 @@
       },
       // 已经转动完转盘触发的函数
       endTurns() {
+        console.log(123)
         // 提示中奖
         this.$dialog({
           content: `恭喜中奖！！！${this.prizeList[this.prizeIndex].prizeName}`,

src/packages/luckdraw/doc.md

@@ -3,17 +3,17 @@
 ## 基本用法
 
 ```html
-<luck-draw
+<nut-luckdraw
   class="drawTable"
   ref="luckDrawPrize"
-  :luckWidth="luckWidth"
-  :luckheight="luckheight"
-  :prizeList="prizeList"
-  :turnsNumber="turnsNumber"
-  :turnsTime="turnsTime"
-  :prizeIndex="prizeIndex"
-  :styleOpt="styleOpt"
-  @endTurns="endTurns"
+  :luck-width="luckWidth"
+  :luck-height="luckheight"
+  :prize-list="prizeList"
+  :turns-number="turnsNumber"
+  :turns-time="turnsTime"
+  :prize-index="prizeIndex"
+  :style-opt="styleOpt"
+  @end-turns="endTurns"
 >
   <template slot="item" slot-scope="scope">
     <div class="drawTable-name">{{ scope.item.prizeName }}</div>
@@ -21,7 +21,7 @@
       <img :src="scope.item.prizeImg">
     </div>
   </template>
-</luck-draw>
+</nut-luckdraw>
 <div @click="startTurns" class="pointer" :style="pointerStyle"></div>
 ```
 
@@ -133,12 +133,12 @@ export default {
 | 字段 | 说明 | 类型 | 默认值
 |----- | ----- | ----- | ----- 
 | ref | 当前转盘的类名,转动的时候根据类名执行回调函数 | String | luckDrawPrize
-| luckWidth | 转盘的宽度 | String | 300px
-| luckHeight | 转盘的高度 | String | 300px
-| prizeList | 奖品列表 | Array | -
-| turnsNumber | 转动的圈数 | Number | 5
-| turnsTime | 从开始转动到结束所用时间 | Number | 5(单位是秒)
-| styleOpt | 转盘中的样式，包括每个扇区的背景颜色，扇区的边框颜色 | Object | {prizeBgColors: [],borderColor: ''}
+| luck-width | 转盘的宽度 | String | 300px
+| luck-height | 转盘的高度 | String | 300px
+| prize-list | 奖品列表 | Array | -
+| turns-number | 转动的圈数 | Number | 5
+| turns-time | 从开始转动到结束所用时间 | Number | 5(单位是秒)
+| style-opt | 转盘中的样式，包括每个扇区的背景颜色，扇区的边框颜色 | Object | {prizeBgColors: [],borderColor: ''}
 | pointerStyle | 转盘中指针的样式，包括背景图片、大小等 | Object | {width: '80px',height: '80px'}
 
 
@@ -147,4 +147,4 @@ export default {
 
 | 字段 | 说明 | 回调参数
 |----- | ----- | -----
-| endTurns | 转盘中停止转动后的回调函数 | - 
+| end-turns | 转盘中停止转动后的回调函数 | - 

src/packages/luckdraw/luckdraw.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="nut-luckdraw" ref="luckdraw" :style="{width:luckWidth, height:luckheight}">
+    <div class="nut-luckdraw" ref="luckdraw" :style="{width:luckWidth, height:luckHeight}">
         <div class="lucktable" :style="{transform: rotateAngle, transition: rotateTransition}">
             <canvas id="canvas" ref="canvas">
                 浏览器版本过低
@@ -22,7 +22,7 @@ export default {
       luckWidth: {
         required: true
       },
-      luckheight: {
+      luckHeight: {
         required: true
       },
       prizeList: {
@@ -105,7 +105,7 @@ export default {
         this.rotateAngle = `rotate(${rotateAngle}deg)`;
         this.rotateTransition = `transform ${turnsTime}s cubic-bezier(0.250, 0.460, 0.455, 0.995)`;
         setTimeout(() => {
-          this.$emit('endTurns');
+          this.$emit('end-turns');
         }, turnsTime * 1000 + 500)
       },
     },