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

src/packages/backtop/backtop.vue

@@ -1,5 +1,5 @@
 <template>
-  <div :class="['nut-backtop', {'show': backTop}]" :style="styles" @click="goto">
+  <div :class="['nut-backtop', {'show': backTop}]" :style="styles" @click.stop="click">
     <slot>
       <div class="nut-backtop-main"></div>
     </slot>
@@ -25,6 +25,14 @@ export default {
       type: Number,
       default: 1000
     },
+    isAnimation: {
+      type: Boolean,
+      default: true
+    },
+    elId: {
+      type: String,
+      default: ""
+    },
     zIndex: {
       type: Number,
       default: 1111
@@ -32,17 +40,30 @@ export default {
   },
   data() {
     return {
-      backTop: false
+      backTop: false,
+      scrollEl: window
     };
   },
   mounted() {
-    window.addEventListener("scroll", this.handleScroll, false);
-    window.addEventListener("resize", this.handleScroll, false);
+    this.init();
+  },
+
+  activated() {
+    if (this.keepAlive) {
+      this.keepAlive = false;
+      this.init();
+    }
   },
-  beforeDestroy() {
-    window.removeEventListener("scroll", this.handleScroll, false);
-    window.removeEventListener("resize", this.handleScroll, false);
+
+  deactivated() {
+    this.keepAlive = true;
+    this.removeEventListener();
+  },
+
+  destroyed() {
+    this.removeEventListener();
   },
+
   computed: {
     styles() {
       return {
@@ -53,68 +74,76 @@ export default {
     }
   },
   methods: {
-    handleScroll() {
-      this.backTop = window.pageYOffset >= this.distance;
+    addEventListener() {
+      this.scrollEl.addEventListener("scroll", this.scrollListener, false);
+      this.scrollEl.addEventListener("resize", this.scrollListener, false);
+    },
+    removeEventListener() {
+      this.scrollEl.removeEventListener("scroll", this.scrollListener, false);
+      this.scrollEl.removeEventListener("resize", this.scrollListener, false);
     },
-    goto() {
-      const sTop =
-        document.documentElement.scrollTop || document.body.scrollTop;
-      this.scrollTop(window, sTop, 0, this.duration);
-      this.$emit("click");
+    requestAniFrame() {
+      return (
+        window.requestAnimationFrame ||
+        window.webkitRequestAnimationFrame ||
+        window.mozRequestAnimationFrame ||
+        function(callback) {
+          window.setTimeout(callback, 1000 / 60);
+        }
+      );
     },
-    scrollTop(el, from = 0, to, duration = 500, endCallback) {
-      this.el = el;
-      let lastTime = 0;
+    initCancelAniFrame() {
       let vendors = ["webkit", "moz"];
       for (
         let x = 0;
         x < vendors.length && !window.requestAnimationFrame;
         ++x
       ) {
-        window.requestAnimationFrame =
-          window[vendors[x] + "RequestAnimationFrame"];
         window.cancelAnimationFrame =
           window[vendors[x] + "CancelAnimationFrame"] ||
           window[vendors[x] + "CancelRequestAnimationFrame"];
       }
-
-      if (!window.requestAnimationFrame) {
-        window.requestAnimationFrame = function(callback, element) {
-          let currTime = new Date().getTime();
-          let timeToCall = Math.max(0, 16.7 - (currTime - lastTime));
-          let id = window.setTimeout(function() {
-            callback(currTime + timeToCall);
-          }, timeToCall);
-          lastTime = currTime + timeToCall;
-          return id;
-        };
-      }
-      if (!window.cancelAnimationFrame) {
-        window.cancelAnimationFrame = function(id) {
-          clearTimeout(id);
-        };
-      }
-      const difference = Math.abs(from - to);
-      const step = Math.ceil((difference / duration) * 50);
-
-      this.scroll(from, to, step, endCallback);
     },
-    scroll(start, end, step, endCallback) {
-      if (start === end) {
-        endCallback && endCallback();
-        return;
-      }
-
-      let d = start + step > end ? end : start + step;
-      if (start > end) {
-        d = start - step < end ? end : start - step;
+    init() {
+      if (this.elId && document.getElementById(this.elId)) {
+        this.scrollEl = document.getElementById(this.elId);
       }
-      if (this.el === window) {
-        window.scrollTo(d, d);
+      this.addEventListener();
+      this.initCancelAniFrame();
+    },
+    scrollListener() {
+      this.scrollTop =
+        this.scrollEl.pageYOffset !== undefined
+          ? this.scrollEl.pageYOffset
+          : this.scrollEl.scrollTop;
+      this.backTop = this.scrollTop >= this.distance;
+    },
+    click() {
+      this.startTime = +new Date();
+      this.isAnimation && this.duration > 0
+        ? this.scrollAnimation()
+        : this.scroll();
+    },
+    scrollAnimation() {
+      const self = this;
+      var cid = self.requestAniFrame()(function fn() {
+        var t =
+          self.duration -
+          Math.max(0, self.startTime - +new Date() + self.duration);
+        var y = (t * -self.scrollTop) / self.duration + self.scrollTop;
+        self.scroll(y);
+        cid = self.requestAniFrame()(fn);
+        if (t == self.duration) {
+          window.cancelAnimationFrame(cid);
+        }
+      });
+    },
+    scroll(y = 0) {
+      if (this.scrollEl === window) {
+        window.scrollTo(0, y);
       } else {
-        this.el.scrollTop = d;
+        this.scrollEl.scrollTop = y;
       }
-      window.requestAnimationFrame(() => this.scroll(d, end, step));
     }
   }
 };

src/packages/backtop/demo.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="back-top-demo">
+  <div class="back-top-demo" id="backtopid">
     <h3>《再别康桥》</h3>
     <p>徐志摩</p>
     <p>轻轻的我走了，正如我轻轻的来；</p>
@@ -38,7 +38,7 @@
     <p>乡愁是一湾浅浅的海峡</p>
     <p>我在这头</p>
     <p>大陆在那头</p>
-    
+
     <h3>《盼望》</h3>
     <p>席慕容</p>
     <p>其实我盼望的</p>
@@ -53,6 +53,28 @@
     <p>回首时</p>
     <p>那短短的一瞬</p>
     <nut-backtop @click="handleClick"></nut-backtop>
+    <nut-backtop :bottom="120" :is-animation="false" @click="handleClick">
+      <div
+        style="background-color: rgb(0, 0, 0);
+    color: rgb(255, 255, 255);
+    display: flex;
+    height: 44px;
+    width: 44px;
+    align-items: center;
+    justify-content: center;"
+      >无</div>
+    </nut-backtop>
+    <nut-backtop :bottom="70" @click="handleClick">
+      <div
+        style="background-color: rgb(0, 0, 0);
+    color: rgb(255, 255, 255);
+    display: flex;
+    height: 44px;
+    width: 44px;
+    align-items: center;
+    justify-content: center;"
+      >Top</div>
+    </nut-backtop>
   </div>
 </template>
 

src/packages/backtop/doc.md

@@ -18,6 +18,38 @@
 </nut-backtop>
 ```
 
+## 无动画
+
+``` html
+<nut-backtop :bottom="120" :is-animation="false" @click="handleClick">
+      <div
+        style="background-color: rgb(0, 0, 0);
+    color: rgb(255, 255, 255);
+    display: flex;
+    height: 44px;
+    width: 44px;
+    align-items: center;
+    justify-content: center;"
+      >无</div>
+    </nut-backtop>
+```
+
+## 自定义样式
+
+``` html
+<nut-backtop :bottom="70" @click="handleClick">
+      <div
+        style="background-color: rgb(0, 0, 0);
+    color: rgb(255, 255, 255);
+    display: flex;
+    height: 44px;
+    width: 44px;
+    align-items: center;
+    justify-content: center;"
+      >Top</div>
+    </nut-backtop>
+```
+
 > “页面垂直方向滚动高度”后出现
 
 ## click事件
@@ -44,7 +76,7 @@ export default {
 <nut-backtop 
   :bottom="20"
   :right="20"
-  :zIndex="10"
+  :z-index="10"
 >
 </nut-backtop>
 ```
@@ -61,15 +93,19 @@ export default {
 
 ## Prop
 
-| 字段 | 说明 | 类型 | 默认值
-|----- | ----- | ----- | ----- 
-| duration | 设置动画持续时间 | Number | 1000
-| distance | “页面垂直方向滚动高度”后出现 | Number | 200
-| bottom | 设置离页面底部距离 | Number | 30
-| right | 设置离页面右边距离 | Number | 30
-| zIndex | 设置层级 | Number | 1111
+| 字段         | 说明                         | 类型    | 默认值 |
+|--------------|------------------------------|---------|--------|
+| distance     | “页面垂直方向滚动高度”后出现 | Number  | 200    |
+| is-animation | 是否有动画,和duration参数互斥 | Boolean | true   |
+| duration     | 设置动画持续时间             | Number  | 1000   |
+| z-index       | 设置层级                     | Number  | 1111   |
+| el-id        | 设置滚动事件监听的容器id     | String  | -      |
+| right        | 设置离页面右边距离           | Number  | 30     |
+| bottom       | 设置离页面底部距离           | Number  | 30     |
+
+> 常见问题 : 滚动监听对象默认为window对象，开发者页面布局高度100%布局场景下，请采用此参数el-id
 
 ## Event
-| 字段 | 说明 | 回调参数 
-|----- | ----- | ----- 
-| click | 按钮点击时触发 | -
+| 字段  | 说明           | 回调参数 |
+|-------|----------------|----------|
+| click | 按钮点击时触发 | -        |

src/packages/col/col.scss

@@ -1,13 +1,3 @@
-
-.nut-row-flex{
-	display: flex;
-	&:after{
-		display:none;
-	}
-	.nut-col{
-		float: none;
-	}
-}
 .nut-col{
 	float: left;
 	box-sizing: border-box;

src/packages/col/col.vue

@@ -42,8 +42,6 @@ export default {
           },
           immediate: true
         }
-    },
-    methods: {
     }
 }
 </script>

src/packages/dialog/demo.vue

@@ -2,37 +2,37 @@
   <div class="demo-list">
     <h4>基本用法</h4>
     <div>
-      <nut-cell :isLink="true" :showIcon="true" @click.native="showDialog1">
+      <nut-cell :is-link="true" :show-icon="true" @click.native="showDialog1">
         <span slot="title">
           <label>自定义标题和内容</label>
         </span>
       </nut-cell>
-      <nut-cell :isLink="true" :showIcon="true" @click.native="showDialog2">
+      <nut-cell :isLink="true" :show-icon="false" @click.native="showDialog2">
         <span slot="title">
           <label>只有标题</label>
         </span>
       </nut-cell>
-      <nut-cell :isLink="true" :showIcon="true" @click.native="showDialog3">
+      <nut-cell :is-link="true" :show-icon="true" @click.native="showDialog3">
         <span slot="title">
           <label>只有内容</label>
         </span>
       </nut-cell>
-      <nut-cell :isLink="true" :showIcon="true" @click.native="showDialog4">
+      <nut-cell :is-link="true" :show-icon="true" @click.native="showDialog4">
         <span slot="title">
           <label>移除按钮栏</label>
         </span>
       </nut-cell>
-      <nut-cell :isLink="true" :showIcon="true" @click.native="showDialog5">
+      <nut-cell :is-link="true" :show-icon="true" @click.native="showDialog5">
         <span slot="title">
           <label>事件</label>
         </span>
       </nut-cell>
-      <nut-cell :isLink="true" :showIcon="true" @click.native="showDialog6">
+      <nut-cell :is-link="true" :show-icon="true" @click.native="showDialog6">
         <span slot="title">
-          <label>无弹出动效</label>
+          <label>无弹出动效且关闭时不销毁dislog实例</label>
         </span>
       </nut-cell>
-      <nut-cell :isLink="true" :showIcon="true" @click.native="showDialog7">
+      <nut-cell :is-link="true" :show-icon="true" @click.native="showDialog7">
         <span slot="title">
           <label>遮罩层透明</label>
         </span>
@@ -41,7 +41,7 @@
     <h4>图片弹窗</h4>
     <p>type值为“image”时为图片弹窗，需要配置一张图片，可带链接（非必须）。默认展示关闭按钮。点击图片触发onClickImageLink事件，返回false可阻止默认的跳转链接行为。</p>
     <div>
-      <nut-cell :isLink="true" :showIcon="true" @click.native="showImageDialog">
+      <nut-cell :is-link="true" :show-icon="true" @click.native="showImageDialog">
         <span slot="title">
           <label>图片弹窗</label>
         </span>
@@ -50,12 +50,12 @@
     <h4>背景滚动锁定</h4>
     <p>lockBgScroll值设为true时，可在弹窗出现时锁定页面滚动，且不影响窗体内部滚动。</p>
     <div>
-      <nut-cell :isLink="true" :showIcon="true" @click.native="showDialog8">
+      <nut-cell :is-link="true" :show-icon="true" @click.native="showDialog8">
         <span slot="title">
           <label>背景滚动锁定</label>
         </span>
       </nut-cell>
-      <nut-cell :isLink="true" :showIcon="true" @click.native="showDialog9">
+      <nut-cell :is-link="true" :show-icon="true" @click.native="showDialog9">
         <span slot="title">
           <label>窗体内部滚动不影响页面滚动</label>
         </span>
@@ -64,14 +64,14 @@
     <h4>高级用法</h4>
     <p>如果Dialog内容有复杂交互，可使用Dialog的标签式用法。</p>
     <div>
-      <nut-cell :isLink="true" :showIcon="true" @click.native="dialogShow=true">
+      <nut-cell :is-link="true" :show-icon="true" @click.native="dialogShow=true">
         <span slot="title">
           <label>以标签形式调用Dialog</label>
         </span>
       </nut-cell>
     </div>
     <!-- 以标签形式调用Dialog -->
-    <nut-dialog title="标签形式调用" :visible="dialogShow" :cancelAutoClose="false" @ok-btn-click="dialogShow=false" @cancel-btn-click="dialogShow=false" @close="dialogShow=false">
+    <nut-dialog title="标签形式调用" :visible="dialogShow" :cancel-auto-close="false" @ok-btn-click="dialogShow=false" @cancel-btn-click="dialogShow=false" @close="dialogShow=false">
       
       <a href="javascript:;" @click="dialogShow=false" :noCancelBtn="true">点我可以直接关闭对话框</a>
     </nut-dialog>
@@ -98,7 +98,7 @@ export default {
     showDialog1: function() {
       const options = {
         title: "确定删除此订单？",
-        content: "删除后将从你的记录里消失，无法找回"
+        content: "删除后将从你的记录里消失，无法找回"     
       };
 
       this.$dialog(options);
@@ -161,6 +161,7 @@ export default {
       this.$dialog({
         animation: false, //禁用弹出动效
         title: "注册说明",
+        canDestroy:false,
         content:
           "原账号为您本人所有，建议直接登录或找回密码。原账号内的订单资产可能丢失，可联系京东客服找回。"
       });

src/packages/dialog/dialog.vue

@@ -1,5 +1,5 @@
 <template>
-  <div
+  <div  v-if="destroy"
     :class="['nut-dialog-wrapper',customClass,{'nut-dialog-image-wrapper':type==='image'}]"
     :id="id"
   >
@@ -155,29 +155,33 @@ export default {
       default: 'center'
     },
     onOkBtn: {
-      type: Object,
+      type: Function,
       default: null
     },
     onCloseBtn: {
-      type: Object,
+      type: Function,
       default: null
     },
     onCancelBtn: {
-      type: Object,
+      type: Function,
       default: null
     },
     closeCallback: {
-      type: Object,
+      type: Function,
       default: null
     },
     onClickImageLink: {
-      type: Object,
+      type: Function,
       default: null
     },
     maskBgStyle: {
       type: String,
       default: ''
     },
+    canDestroy:{
+      type: Boolean,
+      default: true
+    },
     customClass: {
       type: String,
       default: ''
@@ -185,17 +189,25 @@ export default {
   },
   data() {
     return {
-      curVisible: false
+      curVisible: false,
+      destroy:false
     };
   },
+  created(){
+    this.destroy=true
+  },
   methods: {
     modalClick() {
       if (!this.closeOnClickModal) {return};
       this.close('modal');
     },
+    todestroy(){
+      this.canDestroy? this.destroy=false:"";
+    },
     close(target) {
       this.$emit('close', target);
       this.$emit('close-callback', target);
+      this.todestroy();
       if (
         typeof this.closeCallback === 'function' &&
         this.closeCallback(target) === false

src/packages/dialog/doc.md

@@ -48,7 +48,17 @@ this.$dialog({
 });
         
 ```
-
+## 关闭dialog不销毁实例
+```javascript
+ this.$dialog({
+        animation: false, //禁用弹出动效
+        title: "注册说明",
+        canDestroy:false,
+        content:
+          "原账号为您本人所有，建议直接登录或找回密码。原账号内的订单资产可能丢失，可联系京东客服找回。"
+      });
+        
+```
 ## 页面滚动锁定
 
 **lockBgScroll** 值设为 **true** 时，可在弹窗出现时锁定页面滚动，且不影响窗体内部滚动。
@@ -79,7 +89,7 @@ this.$dialog({
 
 ## 标签式写法
 
-如果Dialog内容有复杂交互，可使用Dialog的标签式用法。
+如果Dialog内容有复杂交互，可使用Dialog的标签式用法。注意标签使用的时候，属性不建议使用驼峰，推荐使用如下写法
 
 ```html
 <nut-dialog title="标签形式调用" :visible="dialogShow" @ok-btn-click="dialogShow=false" @cancel-btn-click="dialogShow=false" @close="dialogShow=false">
@@ -101,7 +111,8 @@ export default {
 
 | 字段 | 说明 | 类型 | 默认值
 |----- | ----- | ----- | ----- 
-| id | 标识符，相同者共享一个实例 | String/Number | -
+| id | 标识符，相同者共享一个实例 | String/Number | nut-dialog-default-id
+| canDestroy | 是否关闭弹窗时销毁实例 | Beelean | true
 | title | 标题 | String | -
 | content | 内容，支持HTML | String | -
 | type | 弹窗类型，值为**image**时为图片弹窗 | String | -

src/packages/flex/demo.vue

@@ -306,7 +306,7 @@
 export default {
   data() {
       return {
-          myValue:4
+          myValue:6
       };
   },
   methods:{

src/packages/flex/doc.md

@@ -91,6 +91,21 @@
     <nut-col :span="6">
         <div class="flex-content flex-content-light">2</div>
     </nut-col>
+    <nut-col :span="6">
+        <div class="flex-content">3</div>
+    </nut-col>
+    <nut-col :span="6">
+        <div class="flex-content flex-content-light">4</div>
+    </nut-col>
+    <nut-col :span="6">
+        <div class="flex-content">5</div>
+    </nut-col>
+    <nut-col :span="6">
+        <div class="flex-content flex-content-light">6</div>
+    </nut-col>
+    <nut-col :span="6">
+        <div class="flex-content">7</div>
+    </nut-col>
 </nut-row>
 <nut-row type="flex" flexWrap="wrap" :gutter="10">
     <nut-col :span="6">
@@ -99,6 +114,21 @@
     <nut-col :span="6">
         <div class="flex-content flex-content-light">2</div>
     </nut-col>
+    <nut-col :span="6">
+        <div class="flex-content">3</div>
+    </nut-col>
+    <nut-col :span="6">
+        <div class="flex-content flex-content-light">4</div>
+    </nut-col>
+    <nut-col :span="6">
+        <div class="flex-content">5</div>
+    </nut-col>
+    <nut-col :span="6">
+        <div class="flex-content flex-content-light">6</div>
+    </nut-col>
+    <nut-col :span="6">
+        <div class="flex-content">7</div>
+    </nut-col>
 </nut-row>
 <nut-row type="flex" flexWrap="reverse" :gutter="10">
     <nut-col :span="6">
@@ -107,6 +137,21 @@
     <nut-col :span="6">
         <div class="flex-content flex-content-light">2</div>
     </nut-col>
+    <nut-col :span="6">
+        <div class="flex-content">3</div>
+    </nut-col>
+    <nut-col :span="6">
+        <div class="flex-content flex-content-light">4</div>
+    </nut-col>
+    <nut-col :span="6">
+        <div class="flex-content">5</div>
+    </nut-col>
+    <nut-col :span="6">
+        <div class="flex-content flex-content-light">6</div>
+    </nut-col>
+    <nut-col :span="6">
+        <div class="flex-content">7</div>
+    </nut-col>
 </nut-row>
 
 ```
@@ -118,26 +163,56 @@
     <nut-col :span="6">
         <div class="flex-content">start</div>
     </nut-col>
+    <nut-col :span="6">
+        <div class="flex-content flex-content-light">start</div>
+    </nut-col>
+    <nut-col :span="6">
+        <div class="flex-content">start</div>
+    </nut-col>
 </nut-row>
 <nut-row type="flex" justify="center">
     <nut-col :span="6">
         <div class="flex-content">center</div>
     </nut-col>
+    <nut-col :span="6">
+        <div class="flex-content flex-content-light">center</div>
+    </nut-col>
+    <nut-col :span="6">
+        <div class="flex-content">center</div>
+    </nut-col>
 </nut-row>
 <nut-row type="flex" justify="end">
     <nut-col :span="6">
         <div class="flex-content">end</div>
     </nut-col>
+    <nut-col :span="6">
+        <div class="flex-content flex-content-light">end</div>
+    </nut-col>
+    <nut-col :span="6">
+        <div class="flex-content">end</div>
+    </nut-col>
 </nut-row>
 <nut-row type="flex" justify="space-between">
     <nut-col :span="6">
         <div class="flex-content">between</div>
     </nut-col>
+    <nut-col :span="6">
+        <div class="flex-content flex-content-light">between</div>
+    </nut-col>
+    <nut-col :span="6">
+        <div class="flex-content">between</div>
+    </nut-col>
 </nut-row>
 <nut-row type="flex" justify="space-around">
     <nut-col :span="6">
         <div class="flex-content">around</div>
     </nut-col>
+    <nut-col :span="6">
+        <div class="flex-content flex-content-light">around</div>
+    </nut-col>
+    <nut-col :span="6">
+        <div class="flex-content">around</div>
+    </nut-col>
 </nut-row>
 
 ```
@@ -146,19 +221,37 @@
 
 ```html
 <nut-row type="flex" gutter="10" align="flex-start">
+    <nut-col :span="6">
+        <div class="flex-content flex-content-height">1</div>
+    </nut-col>
     <nut-col :span="12">
         <div class="flex-content flex-content-light">顶部对齐 - flex-start</div>
     </nut-col>
+    <nut-col :span="6">
+        <div class="flex-content flex-content-height">3</div>
+    </nut-col>
 </nut-row>
 <nut-row type="flex" gutter="10" align="center">
+    <nut-col :span="6">
+        <div class="flex-content flex-content-height">1</div>
+    </nut-col>
     <nut-col :span="12">
         <div class="flex-content flex-content-light">居中对齐 - center</div>
     </nut-col>
+    <nut-col :span="6">
+        <div class="flex-content flex-content-height">3</div>
+    </nut-col>
 </nut-row>
 <nut-row type="flex" gutter="10" align="flex-end">
+    <nut-col :span="6">
+        <div class="flex-content flex-content-height">1</div>
+    </nut-col>
     <nut-col :span="12">
         <div class="flex-content flex-content-light">底部对齐 - flex-end</div>
     </nut-col>
+    <nut-col :span="6">
+        <div class="flex-content flex-content-height">3</div>
+    </nut-col>
 </nut-row>
 
 ```
@@ -210,12 +303,12 @@
 | tag | 自定义元素标签 | String | div
 | justify | Flex 主轴对齐方式，可选值为 start end center space-around space-between | String | start
 | align | Flex 交叉轴对齐方式，可选值为 flex-start center flex-end | String | flex-start
-| flexWrap | Flex是否换行，可选值为 nowrap wrap reverse | String | nowrap
+| flex-wrap | Flex是否换行，可选值为 nowrap wrap reverse | String | nowrap
 
 ### col
 
 | 字段 | 说明 | 类型 | 默认值
 |----- | ----- | ----- | ----- 
-| span | 列元素宽度 | String/Number | -
+| span | 列元素宽度（共分为24份，例如设置一行3个，那么span值为8） | String/Number | -
 | offset | 列元素偏移距离 | String/Number | - 
 

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)
       },
     },

src/packages/row/row.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="nut-row" :class="classObject" :style="styleObject">
+    <div class="nut-row" :class="getClassObject()">
     	<slot></slot>
     </div>
 </template>
@@ -32,46 +32,34 @@ export default {
             default:'nowrap'
         }
     },
-    data() {
-        return {
-            classObject:{
-                'nut-row-flex' : this.type == 'flex',
-                'nut-row-justify-center':this.justify == 'center',
-                'nut-row-justify-end':this.justify == 'end',
-                'nut-row-justify-space-between':this.justify == 'space-between',
-                'nut-row-justify-space-around':this.justify == 'space-around',
-                'nut-row-align-center':this.align == 'center',
-                'nut-row-align-flex-end':this.align == 'flex-end',
-                'nut-row-flex-wrap':this.flexWrap == 'wrap',
-                'nut-row-flex-reverse':this.flexWrap == 'reverse'
-            },
-            styleObj:{
-                'margin-left':-this.gutter+'px',
-                'margin-right':-this.gutter+'px'
-            }
-        };
-    },
     computed:{
-        styleObject(){
-            if(this.gutter!=''){
-                return function(){
-                    this.styleObj;
-                }
-            }
+        getGutter() {
+            return `${this.gutter}px`
         }
     },
     methods: {
-        initCol:function(slot){
+        initCol(slot){
             for(let i = 0;i<slot.length;i++){
                 let tag = slot[i].tag;
                 if(typeof tag == 'string'){
                     if(tag.indexOf('nut-col') != -1) {
                         var slotElm = slot[i].elm;
-                        slotElm.style.paddingLeft = this.gutter+'px';
-                        slotElm.style.paddingRight = this.gutter+'px';
+                        slotElm.style.paddingLeft = this.getGutter;
+                        slotElm.style.paddingRight = this.getGutter;
                     }
                 }
             }
+        },
+        getClass(prefix, type) {
+            return prefix ? (type ? `nut-row-${prefix}-${type}` : '') : `nut-row-${type}`;
+        },
+        getClassObject() {
+            return `
+                ${this.getClass('',this.type)}  
+                ${this.getClass('justify',this.justify)} 
+                ${this.getClass('align',this.align)} 
+                ${this.getClass('flex',this.flexWrap)}
+                `
         }
     },
     mounted() {

src/packages/toast/_toast.js

@@ -31,11 +31,11 @@ let currentOptions = {
 };
 
 function _showToast() {
-  instance.vm = instance.$mount();
-  document.body.appendChild(instance.$el);
-  Vue.nextTick(() => {
-    instance.visible = true;
-  });
+    instance.vm = instance.$mount();
+    document.body.appendChild(instance.$el);
+    Vue.nextTick(() => {
+        instance.visible = true;
+    });
 }
 
 function _getInstance(obj) {
@@ -58,8 +58,8 @@ function _getInstance(obj) {
     opt["id"] && (instanceArr[opt["id"]] = instance);
   }
 
-  _showToast();
-  return instance;
+    _showToast();
+    return instance;
 }
 
 function errorMsg(msg) {