feature: 新增 useWeight 字段, 可以权重设置概率

XiaoLin1995 · Oct 23, 2020 · 101292b · 101292b
1 parent c2293d3
commit 101292b
Show file tree

Hide file tree

Showing 5 changed files with 29 additions and 11 deletions.
diff --git a/README.CN.md b/README.CN.md
@@ -31,6 +31,7 @@ https://xiaolin1995.github.io/vue-fortune-wheel/demo/
     <FortuneWheel
       style="width: 500px"
       type="image"
+      :useWeight="true"
       :prizes="prizes"
       :angleBase="-10"
       @rotateStart="onImageRotateStart"
@@ -72,23 +73,26 @@ export default {
           value: 'Blue\' value', //* 奖品值, 旋转结束后的返回值
           bgColor: '#45ace9', // 背景色 (type 为 image 时无需此参数)
           color: '#ffffff', // 字体色 (type 为 image 时无需此参数)
-          probability: 30 //* 概率，最多保留 4 位小数 （所有奖品的概率和必须为 100）
+          probability: 30, //* 概率, 最多保留 4 位小数 （所有奖品的概率和必须为 100）
+          weight: 1 // 权重, 如果 useWeight 为 true, 则以 weight 计算概率 (probability 则无效)
         },
         {
           id: 2,
           name: 'Red',
           value: 'Red\' value',
           bgColor: '#dd3832',
           color: '#ffffff',
-          probability: 40
+          probability: 40,
+          weight: 1
         },
         {
           id: 3,
           name: 'Yellow',
           value: 'Yellow\' value',
           bgColor: '#fef151',
           color: '#ffffff',
-          probability: 30
+          probability: 30,
+          weight: 1
         }
       ]
     }
@@ -138,6 +142,7 @@ export default {
 | 参数 | 说明 | 类型 | 默认值 |
 | ------ | ------ | ------ | ----- |
 | type | 转盘的类型 (canvas, image) | String | canvas |
+| useWeight | 是否以权重计算概率 | Boolean | false |
 | disabled | 是否禁用 (禁用后, 点击按钮不会旋转) | Boolean | false |
 | verify | 是否开启验证 | Boolean | false |
 | radius | 圆的半径 (type: canvas) | Number | 250 |

diff --git a/README.md b/README.md
@@ -31,6 +31,7 @@ https://xiaolin1995.github.io/vue-fortune-wheel/demo/
     <FortuneWheel
       style="width: 500px"
       type="image"
+      :useWeight="true"
       :prizes="prizes"
       :angleBase="-10"
       @rotateStart="onImageRotateStart"
@@ -72,23 +73,26 @@ export default {
           value: 'Blue\'s value', //* Prize value, return value after spinning
           bgColor: '#45ace9', // Background color (no need for this parameter when type is image)
           color: '#ffffff', // Font color (this parameter is not required when type is image)
-          probability: 30 //* Probability, up to 4 decimal places (the sum of the probabilities of all prizes 
+          probability: 30, //* Probability, up to 4 decimal places (the sum of the probabilities of all prizes
+          weight: 1 // Weight, if useWeight is true, the probability is calculated by weight, so probability is invalid
         },
         {
           id: 2,
           name: 'Red',
           value: 'Red\'s value',
           bgColor: '#dd3832',
           color: '#ffffff',
-          probability: 40
+          probability: 40,
+          weight: 1
         },
         {
           id: 3,
           name: 'Yellow',
           value: 'Yellow\'s value',
           bgColor: '#fef151',
           color: '#ffffff',
-          probability: 30
+          probability: 30,
+          weight: 1
         }
       ]
     }
@@ -138,6 +142,7 @@ export default {
 | Parameters | Description | Type | Default Value |
 | ------ | ------ | ------ | ----- |
 | type | Type of turntable (canvas, image) | String | canvas |
+| useWeight | Whether to calculate probability by weight | Boolean | false |
 | disabled | Whether to disable (after disabled, click the button will not rotate) | Boolean | false |
 | verify | Whether to enable verification mode | Boolean | false |
 | radius | Radius of circle (type: canvas) | Number | 250 |

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vue-fortune-wheel",
-  "version": "0.2.6",
+  "version": "0.3.0",
   "author": "Xiaolin Zhu",
   "license": "MIT",
   "bugs": {

diff --git a/src/App.vue b/src/App.vue
@@ -22,6 +22,7 @@
         <FortuneWheel
           style="width: 500px"
           type="image"
+          :useWeight="false"
           :prizeId="prizeId"
           :prizes="prizes"
           :angleBase="-2"
@@ -63,23 +64,26 @@ export default {
           value: 'Blue\'s value', // 奖品值
           bgColor: '#45ace9', // 背景色
           color: '#ffffff', // 字体色
-          probability: 30 // 概率，最多保留 4 位小数
+          probability: 30, // 概率，最多保留 4 位小数
+          weight: 1
         },
         {
           id: 2,
           name: 'Red',
           value: 'Red\'s value',
           bgColor: '#dd3832',
           color: '#ffffff',
-          probability: 40
+          probability: 40,
+          weight: 1
         },
         {
           id: 3,
           name: 'Yellow',
           value: 'Yellow\'s value',
           bgColor: '#fef151',
           color: '#ffffff',
-          probability: 30
+          probability: 30,
+          weight: 1
         }
       ]
     }

diff --git a/src/components/fortuneWheel/index.vue b/src/components/fortuneWheel/index.vue
@@ -33,6 +33,10 @@ export default {
       type: String,
       default: 'canvas' // canvas || image
     },
+    useWeight: {
+      type: Boolean,
+      default: false // 以权重算概率
+    },
     disabled: {
       type: Boolean,
       default: false // 是否禁用
@@ -114,7 +118,7 @@ export default {
     prizesIdArr() {
       const idArr = []
       this.prizes.forEach((row) => {
-        const count = Math.round(row.probability * this.decimalSpaces)
+        const count = this.useWeight ? (row.weight || 0) : Math.round(row.probability * this.decimalSpaces)
         const arr = (new Array(count)).fill(row.id)
         idArr.push(...arr)
       })