Merge branch 'v2-dev' of https://github.com/jdf2e/nutui into v2-dev

Author: Drjingfubo

src/packages/luckycard/demo.vue

@@ -1,40 +1,37 @@
 <template>
-    <div class="demo-list">
-        <h4>基本用法</h4>
-        <nut-luckycard 
-        content="1000万"
-        ></nut-luckycard>
-        <h4>内容异步</h4>
-        <nut-luckycard 
-        :content="val"
-        ></nut-luckycard>
-        <h4>刮开层和背景层都支持自定义颜色，奖品信息支持HTML</h4>
-        <nut-luckycard 
-        coverColor="#F9CC9D" 
-        backgroundColor="#C3D08B" 
-        content="<em>1000<em><strong>元</strong>"
-        ></nut-luckycard>
-        <h4>刮开层支持图片</h4>
-        <nut-luckycard 
-        content="1000万" 
-        :coverImg="coverImage"
-        ></nut-luckycard>
-    </div>
+  <div class="demo-list">
+    <h4>基本用法</h4>
+    <nut-luckycard content="1000万"></nut-luckycard>
+    <h4>内容异步</h4>
+    <nut-luckycard :content="val"></nut-luckycard>
+    <h4>刮开层和背景层都支持自定义颜色，奖品信息支持HTML</h4>
+    <nut-luckycard coverColor="#F9CC9D" backgroundColor="#C3D08B" content="<em>1000<em><strong>元</strong>"></nut-luckycard>
+    <h4>刮开层支持图片</h4>
+    <nut-luckycard content="1000万" :coverImg="coverImage"></nut-luckycard>
+    <h4>事件回调</h4>
+    <nut-luckycard content="1000万" @open="opencard"></nut-luckycard>
+    <h4>设置刮开比列</h4>
+    <nut-luckycard content="1000万" @open="opencard" ratio="0.2"></nut-luckycard>
+    <p></p>
+  </div>
 </template>
 <script>
 export default {
-    data() {
-        return {
-            val:"谢谢惠顾",
-            coverImage:""
-        };
-    },
-    mounted(){
-        setTimeout(() => {
-           this.val="数据修改" 
-        }, 500);
-    },
-    methods: {
+  data() {
+    return {
+      val: '谢谢惠顾',
+      coverImage: ''
+    };
+  },
+  mounted() {
+    setTimeout(() => {
+      this.val = '数据修改';
+    }, 500);
+  },
+  methods: {
+    opencard() {
+      alert('callback');
     }
-}
-</script>
+  }
+};
+</script>

src/packages/luckycard/doc.md

@@ -32,6 +32,24 @@
         ></nut-luckycard>
 ```
 
+## 事件回调
+
+```html
+     <nut-luckycard 
+        content="1000万"
+        @open="opencard"
+     ></nut-luckycard>
+```
+## 设置刮开比例
+
+```html
+   <nut-luckycard 
+        content="1000万"
+        @open="opencard"
+        ratio="0.2"
+    ></nut-luckycard>
+```
+
 ## Prop
 
 | 字段 | 说明 | 类型 | 默认值
@@ -43,7 +61,13 @@
 | coverImg | 刮开层是图片（不支持跨域。设置此项后coverColor失效） | String | ''
 | fontSize | 中奖信息字号 | String | 20px
 | backgroundColor | 内容层背景颜色 | String | '#FFFFFF'
-| ratio | 触发事件的刮开比 | Number |0.5(介于0-1之间)
+| ratio | 触发事件的刮开比 | Number |0.8(介于0-1之间)
+
+## 事件
+
+| 字段 | 说明 | 类型 | 默认值
+|----- | ----- | ----- | ----- 
+| open | 刮开后回调函数 | function | ''
 
 
 

src/packages/luckycard/luckycard.vue

@@ -1,86 +1,92 @@
 <template>
-    <div class="nut-luckycard" :style="{height:height+'px',width:width+'px'}">
-        <div class="nut-content" v-html="content" :style="{backgroundColor:backgroundColor,fontSize:fontSize+'px'}"></div>
-    </div>
+  <div class="nut-luckycard" :style="{ height: height + 'px', width: width + 'px' }">
+    <div class="nut-content" v-html="content" :style="{ backgroundColor: backgroundColor, fontSize: fontSize + 'px' }"></div>
+  </div>
 </template>
 
 <script>
 import LuckyCard from './luckycard.js';
 export default {
-    name:'nut-luckycard',
-    props: {
-        content:{
-            type:String,
-            default:''
-        },
-        height: {
-            type: [String, Number],
-            default: 50
-        },
-        width: {
-            type: [String, Number],
-            default: 300
-        },
-        coverColor:{
-            type:String,
-            default:'#C5C5C5'
-        },
-        coverImg:{
-            type:String,
-            default:''
-        },
-        fontSize:{
-            type:[String, Number],
-            default:20
-        },
-        backgroundColor:{
-            type:String,
-            default:'#FFFFFF'
-        },
-        ratio:{
-            type: [String, Number],
-            default:0.5
-        }
+  name: 'nut-luckycard',
+  props: {
+    content: {
+      type: String,
+      default: ''
+    },
+    height: {
+      type: [String, Number],
+      default: 50
+    },
+    width: {
+      type: [String, Number],
+      default: 300
+    },
+    coverColor: {
+      type: String,
+      default: '#C5C5C5'
+    },
+    coverImg: {
+      type: String,
+      default: ''
     },
-    data() {
-        return {};
+    fontSize: {
+      type: [String, Number],
+      default: 20
     },
-    methods: {
+    backgroundColor: {
+      type: String,
+      default: '#FFFFFF'
     },
-    mounted(){
-        this.$nextTick(()=>{
-            const _vm = this;
-            LuckyCard({
-                scratchDiv:this.$el,
-                coverColor:this.coverColor,
-                coverImg:this.coverImg,
-                ratio:Number(this.ratio),
-                callback:function(){
-                    //console.log(this);
-                    //this.clearCover();
-                    _vm.$emit('open',this);
-                }
-            })
-        })
+    ratio: {
+      type: [String, Number],
+      default: 0.5
     }
-}
+  },
+  data() {
+    return {
+      luckcard: null
+    };
+  },
+  methods: {
+    clearCover() {
+      console.log(this.luckcard);
+      this.luckcard.clearCover();
+    }
+  },
+  mounted() {
+    this.$nextTick(() => {
+      const _vm = this;
+      this.luckcard = LuckyCard({
+        scratchDiv: this.$el,
+        coverColor: this.coverColor,
+        coverImg: this.coverImg,
+        ratio: Number(this.ratio),
+        callback: function() {
+          //console.log(this);
+          this.clearCover();
+          _vm.$emit('open', this);
+        }
+      });
+    });
+  }
+};
 </script>
 <style lang="scss">
-.nut-luckycard{ 
-    position: relative;
-    .nut-cover{ 
-        position:absolute; 
-        top:0; 
-        left:0;
-    }
-    .nut-content{
-        display:flex;
-        align-items: center;
-        justify-content: center;
-        height:100%;
-        width:100%;
-        line-height: 100%;
-        user-select:none;
-    }
+.nut-luckycard {
+  position: relative;
+  .nut-cover {
+    position: absolute;
+    top: 0;
+    left: 0;
+  }
+  .nut-content {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    width: 100%;
+    line-height: 100%;
+    user-select: none;
+  }
 }
-</style>
+</style>