add image to wheel

.gitignore

@@ -1,7 +1,7 @@
 .DS_Store
 node_modules
-/dist
-/lib
+# /dist
+# /lib
 /public
 
 # local env files

README.CN.md

@@ -68,7 +68,8 @@ export default {
       cavansVerify: true, // canvas 模式的转盘是否开启验证
       prizes: [
         {
-          id: 1, //* 每个奖品唯一的 id, 大于 0 的整数
+          id: '1', //* 每个奖品唯一的 id, 大于 0 的整数
+          contentType: 'text',
           name: 'Blue', // 奖品名, type 为 canvas 时的显示值 (type 为 image 时无需此参数)
           value: 'Blue\' value', //* 奖品值, 旋转结束后的返回值
           bgColor: '#45ace9', // 背景色 (type 为 image 时无需此参数)
@@ -77,7 +78,8 @@ export default {
           weight: 1 // 权重, 如果 useWeight 为 true, 则以 weight 计算概率 (即 probability 无效), weight 必须为整数
         },
         {
-          id: 2,
+          id: '2',
+          contentType: 'text',
           name: 'Red',
           value: 'Red\' value',
           bgColor: '#dd3832',
@@ -86,8 +88,9 @@ export default {
           weight: 1
         },
         {
-          id: 3,
-          name: 'Yellow',
+          id: '3',
+          contentType: 'image',
+          imageUri: 'https://perperook.ir/img/icons/offers.png',
           value: 'Yellow\' value',
           bgColor: '#fef151',
           color: '#ffffff',
@@ -150,6 +153,7 @@ export default {
 | canvas.textLength | 奖品一行几个字符, 超出换行 (最多两行) | Number | 6 |
 | canvas.textDirection | 奖品文本方向 (horizontal, vertical) | String | horizontal |
 | canvas.lineHeight | 文本行高 (type: canvas) | Number | 20 |
+| canvas.imageSize | Image size (type: canvas) | Number | 64 |
 | canvas.borderWidth | 圆的外边框 (type: canvas) | Number | 0 |
 | canvas.borderColor | 外边框的色值 (type: canvas) | String | transparent |
 | canvas.btnText | 按钮文本 (type: canvas) | String | GO |

README.md

@@ -71,7 +71,8 @@ export default {
       },
       prizes: [
         {
-          id: 1, //* The unique id of each prize, an integer greater than 0
+          id: '1', //* The unique id of each prize, a string
+          contentType: 'text',
           name: 'Blue', // Prize name, display value when type is canvas (this parameter is not needed when type is image)
           value: 'Blue\'s value', //* Prize value, return value after spinning
           bgColor: '#45ace9', // Background color (no need for this parameter when type is image)
@@ -80,7 +81,8 @@ export default {
           weight: 1 // Weight, if useWeight is true, the probability is calculated by weight (weight must be an integer), so probability is invalid
         },
         {
-          id: 2,
+          id: '2',
+          contentType: 'text',
           name: 'Red',
           value: 'Red\'s value',
           bgColor: '#dd3832',
@@ -89,8 +91,9 @@ export default {
           weight: 1
         },
         {
-          id: 3,
-          name: 'Yellow',
+          id: '3',
+          contentType: 'image',
+          imageUri: 'https://perperook.ir/img/icons/offers.png',
           value: 'Yellow\'s value',
           bgColor: '#fef151',
           color: '#ffffff',
@@ -153,6 +156,7 @@ export default {
 | canvas.textLength | A few characters in one line of the prize, beyond the line break (maximum two lines) | Number | 6 |
 | canvas.textDirection | Prize text direction (horizontal, vertical) | String | horizontal |
 | canvas.lineHeight | Text line height (type: canvas) | Number | 20 |
+| canvas.imageSize | Image size (type: canvas) | Number | 64 |
 | canvas.borderWidth | Round outer border (type: canvas) | Number | 0 |
 | canvas.borderColor | Color value of the outer border (type: canvas) | String | transparent |
 | canvas.btnText | Button text (type: canvas) | String | GO |

lib/demo.html

@@ -0,0 +1,10 @@
+<meta charset="utf-8">
+<title>vue-fortune-wheel demo</title>
+<script src="./vue-fortune-wheel.umd.js"></script>
+
+<link rel="stylesheet" href="./vue-fortune-wheel.css">
+
+
+<script>
+console.log(vue-fortune-wheel)
+</script>