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

src/packages/actionsheet/actionsheet.scss

@@ -9,6 +9,8 @@
     right: 0;
     bottom: 0;
     width: 100%;
+    max-height: 80%;
+    overflow: auto;
     z-index: $zindex-actionsheet;
     background-color: $body-background;
 }
@@ -50,6 +52,9 @@
 .nut-actionsheet-item-active{
     color: $primary-color;
 }
+.nut-actionsheet-item-disabled{
+    color: #e1e1e1;
+}
 .nut-actionsheet-cancel{
     margin-top: 5px;
     border-top: 1px solid $light-color;

src/packages/actionsheet/actionsheet.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="nut-actionsheet">
-        <transition :name="isAnimation?'nutFade':''">
+        <transition :name="isAnimation?'nutFade':''" v-if="isShowMask">
             <div class="nut-actionsheet-mask"  
                 @click="clickActionSheetMask" 
                 v-show="isVisible"
@@ -10,24 +10,24 @@
             <div class="nut-actionsheet-panel"  
                 v-show="isVisible"
             >
-                <div class="nut-actionsheet-custom"  v-if="$slots.custom">
-                    <slot name="custom" v-html="custom"></slot>
+                <div class="nut-actionsheet-custom"  slot-scope>
+                    <slot name="custom" ></slot>
                 </div>
                 <dl class="nut-actionsheet-modal" v-if="$slots.title || $slots.subTitle ">
-                    <dt class="nut-actionsheet-title"><slot name="title" v-html="title"></slot></dt>
-                    <dd class="nut-actionsheet-sub-title"><slot name="sub-title" v-html="subTitle"></slot></dd>
+                    <dt class="nut-actionsheet-title"><slot name="title" slot-scope></slot></dt>
+                    <dd class="nut-actionsheet-sub-title"><slot name="sub-title" slot-scope></slot></dd>
                 </dl>
                 <ul class="nut-actionsheet-menu" >
                     <li class="nut-actionsheet-item" 
-                        :class="{'nut-actionsheet-item-active': isHighlight(item)}"
+                        :class="{'nut-actionsheet-item-active': isHighlight(item), 'nut-actionsheet-item-disabled': item.disable}"
                         v-for="(item, index) of menuItems"
                         :key="index"
-                        @click="chooseItem(item)"
+                        @click="chooseItem(item, index)"
                     >{{item[optionTag]}}</li>
                 </ul>
                 <div class="nut-actionsheet-cancel" 
                     v-if="cancelTxt"
-                    @click="closeActionSheet" 
+                    @click="cancelActionSheet" 
                 >{{cancelTxt}}</div>
             </div>
         </transition>
@@ -41,10 +41,22 @@ export default {
             type: Boolean,
             default: true
         },
+        isLockBgScroll: {
+            type: Boolean,
+            default: false
+        },
         isVisible: {
             type: Boolean,
             default: false
         },
+        isShowMask: {
+            type: Boolean,
+            default: true
+        },
+        isClickChooseClose: {
+            type: Boolean,
+            default: true
+        },
         isClickCloseMask: {
             type: Boolean,
             default: true
@@ -72,23 +84,40 @@ export default {
     watch: {
         isVisible (value) {
             !!value && this.$emit('open');
+            if (this.isLockBgScroll) {
+                if (value) {
+                    document.body.classList.add('nut-overflow-hidden');
+                } else {
+                    document.body.classList.remove('nut-overflow-hidden');
+                }
+            }
         }
     },
     methods: {
         isHighlight(item) {
             return (this.chooseTagValue && this.chooseTagValue == item[this.optionTag]) || this.chooseTagValue === 0;
         },
+
         closeActionSheet() {
             this.$emit('close');
         },
 
+        cancelActionSheet() {
+            this.closeActionSheet();
+            this.$emit('cancel');
+        },
+
         clickActionSheetMask() {
-            !!this.isClickCloseMask && this.closeActionSheet();
+            this.isClickCloseMask && this.closeActionSheet();
         },
 
-        chooseItem(item) {
-            this.closeActionSheet();
-            this.$emit('choose', item);
+        chooseItem(item, index) {
+            if (!item.disable) {
+                if (this.isClickChooseClose) {
+                    this.closeActionSheet();
+                }
+                this.$emit('choose', item, index);
+            }
         }
     }
 }

src/packages/actionsheet/demo.vue

@@ -7,19 +7,19 @@
                 <div slot="desc" class="selected-option">{{sex}}</div>
             </nut-cell>
             <nut-cell :showIcon="true" :isLink="true" @click.native="switchActionSheet('isVisible1')">
-                <span slot="title"><label>年龄</label></span>
+                <span slot="title"><label>性别</label></span>
                 <span slot="sub-title">带取消按钮~~~~</span>
-                <div slot="desc" class="selected-option">{{agespec}}</div>
+                <div slot="desc" class="selected-option">{{sex1}}</div>
             </nut-cell>
             <nut-cell :showIcon="true" :isLink="true" @click.native="switchActionSheet('isVisible2')">
-                <span slot="title"><label>年龄</label></span>
+                <span slot="title"><label>性别</label></span>
                 <span slot="sub-title">高亮选中项~~~~</span>
-                <div slot="desc" class="selected-option">{{age}}</div>
+                <div slot="desc" class="selected-option">{{sex2}}</div>
             </nut-cell>
             <nut-cell :showIcon="true" :isLink="true" @click.native="switchActionSheet('isVisible3')">
-                <span slot="title"><label>星座</label></span>
-                <span slot="sub-title">设置列表项展示使用参数~~~~</span>
-                <div slot="desc" class="selected-option">{{constellation}}</div>
+                <span slot="title"><label>性别</label></span>
+                <span slot="sub-title">设置禁用状态~~~~</span>
+                <div slot="desc" class="selected-option">{{sex3}}</div>
             </nut-cell>
         </div>
         <h4>提示类</h4>
@@ -53,14 +53,13 @@
         <!-- demo(高亮选中）-->
         <nut-actionsheet :is-visible="isVisible2" 
             :menu-items="menuItems2"
-            :chooseTagValue="age"
+            :chooseTagValue="sex2"
             @close="switchActionSheet('isVisible2')"
             @choose="chooseItemAge"
         ></nut-actionsheet>
-        <!-- demo(设置列表项展示使用参数）-->
+        <!-- demo(设置禁用状态)-->
         <nut-actionsheet :is-visible="isVisible3" 
             :menu-items="menuItems3"
-            :optionTag="`title`"
             @close="switchActionSheet('isVisible3')"
             @choose="chooseItemConstellation"
         ></nut-actionsheet>
@@ -80,6 +79,7 @@
         >
             <div slot="custom" class="custom-wrap"><span>自定义</span></div>
         </nut-actionsheet>
+        <div style="height: 400px"></div>
     </div>
 </template>
 
@@ -88,9 +88,7 @@ export default {
     data() {
         return {
             sex: '请选择',
-            agespec: '请选择',
             isVisible: false,
-            isVisible1: false,
             menuItems: [
                 {
                     'name': '男',
@@ -101,44 +99,32 @@ export default {
                     'value': 1
                 }
             ],
-            age: '请选择',
+            sex1: '请选择',
+            isVisible1: false,
+            sex2: '请选择',
             isVisible2: false,
             menuItems2: [
                 {
-                    'name': '20岁以下',
+                    'name': '男',
                     'value': 0
                 },
                 {
-                    'name': '20~40岁',
+                    'name': '女',
                     'value': 1
-                },
-                {
-                    'name': '40~60岁',
-                    'value': 2
-                },
-                {
-                    'name': '60以上',
-                    'value': 3
                 }
             ],
-            constellation: '请选择',
+            sex3: '请选择',
             isVisible3: false,
             menuItems3: [
                 {
-                    'title': '天蝎座',
-                    'value': 0
-                },
-                {
-                    'title': '巨蟹座',
-                    'value': 1
-                },
-                {
-                    'title': '双鱼座',
-                    'value': 2
+                    'name': '男',
+                    'value': 0,
+                    'disable': false
                 },
                 {
-                    'title': '水瓶座',
-                    'value': 3
+                    'name': '女',
+                    'value': 1,
+                    'disable': true
                 }
             ],
             isVisible4: false,
@@ -160,15 +146,15 @@ export default {
         },
 
         chooseItemAgeSpec(itemParams) {
-            this.agespec = itemParams.name;
+            this.sex1 = itemParams.name;
         },
 
         chooseItemAge(itemParams) {
-            this.age = itemParams.name;
+            this.sex2 = itemParams.name;
         },
 
         chooseItemConstellation(itemParams) {
-            this.constellation = itemParams.title;
+            this.sex3 = itemParams.title;
         }
     }
 };

src/packages/actionsheet/doc.md

@@ -2,74 +2,26 @@
 
 从底部弹出的动作菜单面板。
 
-## 基本用法
+## 基本用法(选择类)
+
+默认
 ```html
+<div @click.native="switchActionSheet">
+    <span class="title"><label>性别</label></span>
+    <span class="selected-option">{{sex}}</span>
+</div>
 <nut-actionsheet :is-visible="isVisible" 
-    @close="switchActionSheet('isVisible')"
+    @close="switchActionSheet"
     :menu-items="menuItems"
     @choose="chooseItem"
 ></nut-actionsheet>
 ```
-## 带取消按钮
-```html
-<nut-actionsheet :is-visible="isVisible1" 
-    @close="switchActionSheet('isVisible1')"
-    cancelTxt="取消"
-    :menu-items="menuItems2"
-    @choose="chooseItemAgeSpec"
-></nut-actionsheet>
-```
-## 高亮已选项
-```html
-<nut-actionsheet :is-visible="isVisible2" 
-    :menu-items="menuItems2"
-    :chooseTagValue="age"
-    @close="switchActionSheet('isVisible2')"
-    @choose="chooseItemAge"
-></nut-actionsheet>
-```
-## 设置列表项展示使用参数
-```html
-<nut-actionsheet :is-visible="isVisible3" 
-    :menu-items="menuItems3"
-    :optionTag="`title`"
-    @close="switchActionSheet('isVisible3')"
-    @choose="chooseItemConstellation"
-></nut-actionsheet>
-```
-## 提示
-```html
-<nut-actionsheet :is-visible="isVisible4" 
-    :menu-items="menuItems4" 
-    chooseTagValue="确定"
-    cancelTxt="取消"
-    @close="switchActionSheet('isVisible4')"
->
-    <span slot="title"><label>确定删除吗？</label></span>
-    <span slot="sub-title">删除之后不能，描述信息，删除之后不能，描述信息</span>
-</nut-actionsheet>
-```
-## 自定义内容
-```html
-<nut-actionsheet :is-visible="isVisible5" 
-    @close="switchActionSheet('isVisible5')"
->
-    <div slot="custom" class="custom-wrap"><span>自定义</span></div>
-</nut-actionsheet>
-```
 ```javascript
-import nutactionsheet from "./actionsheet.vue";
-import "./actionsheet.scss";
 export default {
-    components: {
-        [nutactionsheet.name]: nutactionsheet
-    },
     data() {
         return {
             sex: '请选择',
-            agespec: '请选择',
             isVisible: false,
-            isVisible1: false,
             menuItems: [
                 {
                     'name': '男',
@@ -79,75 +31,218 @@ export default {
                     'name': '女',
                     'value': 1
                 }
-            ],
-            age: '请选择',
-            isVisible2: false,
-            menuItems2: [
+            ]
+        };
+    },
+    methods: {
+        switchActionSheet() {
+            this.isVisible = !this.isVisible;
+        },
+
+        chooseItem(itemParams) {
+            this.sex = itemParams.name;
+        }
+    }
+};
+```
+
+带取消按钮
+```html
+<div @click.native="switchActionSheet">
+    <span class="title"><label>性别</label></span>
+    <span class="selected-option">{{sex}}</span>
+</div>
+ <nut-actionsheet :is-visible="isVisible" 
+    @close="switchActionSheet"
+    :menu-items="menuItems"
+    @choose="chooseItem"
+    cancelTxt="取消"
+></nut-actionsheet>
+```
+```javascript
+export default {
+    data() {
+        return {
+            sex: '请选择',
+            isVisible: false,
+            menuItems: [
                 {
-                    'name': '20岁以下',
+                    'name': '男',
                     'value': 0
                 },
                 {
-                    'name': '20~40岁',
+                    'name': '女',
                     'value': 1
-                },
-                {
-                    'name': '40~60岁',
-                    'value': 2
-                },
-                {
-                    'name': '60以上',
-                    'value': 3
                 }
-            ],
-            constellation: '请选择',
-            isVisible3: false,
-            menuItems3: [
+            ]
+        };
+    },
+    methods: {
+        switchActionSheet() {
+            this.isVisible = !this.isVisible;
+        },
+
+        chooseItem(itemParams) {
+            this.sex = itemParams.name;
+        }
+    }
+};
+```
+
+高亮已选项
+```html
+<div @click.native="switchActionSheet">
+    <span class="title"><label>性别</label></span>
+    <span class="selected-option">{{sex}}</span>
+</div>
+<nut-actionsheet :is-visible="isVisible" 
+    @close="switchActionSheet"
+    :menu-items="menuItems"
+    @choose="chooseItem"
+    :chooseTagValue="sex"
+></nut-actionsheet>
+```
+```javascript
+export default {
+    data() {
+        return {
+            sex: '请选择',
+            isVisible: false,
+            menuItems: [
                 {
-                    'title': '天蝎座',
+                    'name': '男',
                     'value': 0
                 },
                 {
-                    'title': '巨蟹座',
+                    'name': '女',
                     'value': 1
-                },
+                }
+            ]
+        };
+    },
+    methods: {
+        switchActionSheet() {
+            this.isVisible = !this.isVisible;
+        },
+
+        chooseItem(itemParams) {
+            this.sex = itemParams.name;
+        }
+    }
+};
+```
+
+设置禁用状态
+```html
+<div @click.native="switchActionSheet">
+    <span class="title"><label>性别</label></span>
+    <span class="selected-option">{{sex}}</span>
+</div>
+<nut-actionsheet :is-visible="isVisible" 
+    @close="switchActionSheet"
+    :menu-items="menuItems"
+    @choose="chooseItem"
+    :chooseTagValue="sex"
+></nut-actionsheet>
+```
+```javascript
+export default {
+    data() {
+        return {
+            sex: '请选择',
+            isVisible: false,
+            menuItems: [
                 {
-                    'title': '双鱼座',
-                    'value': 2
+                    'name': '男',
+                    'value': 0,
+                    'disable': false
                 },
                 {
-                    'title': '水瓶座',
-                    'value': 3
+                    'name': '女',
+                    'value': 1,
+                    'disable': true
                 }
-            ],
-            isVisible4: false,
-            menuItems4: [
-                {
-                    'name': '确定'
-                } 
-            ],
-            isVisible5: false,
+            ]
         };
     },
     methods: {
-        switchActionSheet(param) {
-            this[`${param}`] = !this[`${param}`];
+        switchActionSheet() {
+            this.isVisible = !this.isVisible;
         },
 
         chooseItem(itemParams) {
             this.sex = itemParams.name;
-        },
+        }
+    }
+};
+```
 
-        chooseItemAgeSpec(itemParams) {
-            this.agespec = itemParams.name;
+## 提示
+```html
+<div @click.native="switchActionSheet">
+    <span class="title"><label>我就列表测试数据</label></span>
+    <span class="sub-title">我是描述~~~~</span>
+    <div class="selected-option">删除本条</div>
+</div>
+<nut-actionsheet :is-visible="isVisible" 
+    :menu-items="menuItems4" 
+    chooseTagValue="确定"
+    cancelTxt="取消"
+    @close="switchActionSheet"
+    @choos="choose"
+>
+    <span slot="title"><label>确定删除吗？</label></span>
+    <span slot="sub-title">删除之后不能，描述信息，删除之后不能，描述信息</span>
+</nut-actionsheet>
+```
+```javascript
+export default {
+    data() {
+        return {
+            sex: '请选择',
+            isVisible: false,
+            menuItems: [
+                {
+                     'name': '确定'
+                }
+            ]
+        };
+    },
+    methods: {
+        switchActionSheet() {
+            this.isVisible = !this.isVisible;
         },
 
-        chooseItemAge(itemParams) {
-            this.age = itemParams.name;
-        },
+        choose(itemParams) {
+            
+        }
+    }
+};
+```
+
+## 自定义内容
+```html
+<div @click.native="switchActionSheet">
+    <span class="title"><label>内容自定义</label></span>
+    <div class="selected-option">打开</div>
+</div>
+<nut-actionsheet :is-visible="isVisible" 
+    @close="switchActionSheet"
+>
+    <div slot="custom" class="custom-wrap"><span>自定义</span></div>
+</nut-actionsheet>
+```
+```javascript
 
-        chooseItemConstellation(itemParams) {
-            this.constellation = itemParams.title;
+export default {
+    data() {
+        return {
+            isVisible: false
+        }   
+    },
+    methods: {
+        switchActionSheet() {
+            this.isVisible = !this.isVisible;
         }
     }
 };
@@ -157,16 +252,29 @@ export default {
 
 | 字段 | 说明 | 类型 | 默认值
 |----- | ----- | ----- | ----- 
-| isVisible | 是否可见 | Boolean | false
-| isClickCloseMask | 是否点击mask蒙层关闭 | Boolean | true
-| cancelTxt | 取消文案 | String | 取消
-| chooseTagValue | 已选值，如果填写，高亮显示 | String | 空
-| menuItems | 列表项 | Array | []
-| optionTag | 设置列表项展示使用参数 | String | name
+| is-animation | 是否开启动画 | Boolean | true
+| is-lock-bg-scroll | 是否锁定背景滚动 | Boolean | false
+| is-visible | 是否可见 | Boolean | false
+| is-show-mask | 是否显示背景遮罩 | Boolean | true
+| is-click-choose-close | 是否点击列表项后立即关闭 | Boolean | true
+| is-click-close-mask | 是否点击mask蒙层关闭 | Boolean | true
+| cancel-txt | 取消文案 | String | 取消
+| choose-tag-value | 已选值，如果填写，高亮显示 | String | 空
+| menu-items | 列表项 | Array | []
+| option-tag | 设置列表项展示使用参数 | String | name
+
+## Slot
+
+| 名称 | 说明 
+|----- | ----- 
+| custom | 自定义内容
+| title | 自定义标题
+| subTitle | 自定义副标题  
 
 ## Event
 
 | 字段 | 说明 | 回调参数 
 |----- | ----- | ----- 
 | choose | 选择之后触发 | 选中列表项 
-| close | 关闭时触发 | 无 
+| close | 关闭时触发 | 无 
+| cancel | 点击取消文案时触发 | 无 

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/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

@@ -1,9 +1,34 @@
-import Vue from 'vue';
-import settings from './toast.vue';
+import Vue from "vue";
+import settings from "./toast.vue";
 
 let ToastConstructor = Vue.extend(settings);
 let instance;
 let instanceArr = [];
+let defaultOptionsMap = {};
+const defaultOptions = {
+  msg: "",
+  visible: false,
+  duration: 2000, //显示时间(毫秒)
+  timer: null,
+  center: true,
+  type: "",
+  customClass: "",
+  bottom: 30,
+  size: "base",
+  icon: null,
+  textAlignCenter: true,
+  loadingRotate: true,
+  bgColor: "rgba(36, 36, 36, 0.8)",
+  onClose: null,
+  textTimer: null,
+  cover: false, //透明遮罩层
+  coverColor: "rgba(0, 0, 0, 0)",
+  timeStamp: null,
+  closeOnClickOverlay: false
+};
+let currentOptions = {
+  ...defaultOptions
+};
 
 function _showToast() {
     instance.vm = instance.$mount();
@@ -14,94 +39,74 @@ function _showToast() {
 }
 
 function _getInstance(obj) {
-    let opt = {
-        id: "nut-toast-default-id",
-        msg: "",
-        visible: false,
-        duration: 2000, //显示时间(毫秒)
-        timer: null,
-        center: true,
-        type: "",
-        customClass: "",
-        bottom: 30,
-        size: "base",
-        icon: null,
-        textAlignCenter: true,
-        loadingRotate: true,
-        bgColor: "rgba(36, 36, 36, 0.8)",
-        onClose: null,
-        textTimer: null,
-        cover: false, //透明遮罩层
-        timeStamp: null
-    };
-
-    opt = Object.assign(opt, obj);
+  let opt = {
+    id: new Date().getTime(),
+    ...currentOptions,
+    ...defaultOptionsMap[obj.type],
+    ...obj
+  };
 
-    //有相同id者共用一个实例，否则新增实例
-    if (opt['id'] && instanceArr[opt['id']]) {
-        instance = instanceArr[opt['id']];
-        instance.hide(true);
-        instance = Object.assign(instance, opt);
-    } else {
-        instance = new ToastConstructor({
-            data: Object.assign(opt, obj)
-        });
-        opt['id'] && (instanceArr[opt['id']] = instance);
-    }
+  //有相同id者共用一个实例，否则新增实例
+  if (opt["id"] && instanceArr[opt["id"]]) {
+    instance = instanceArr[opt["id"]];
+    instance.hide(true);
+    instance = Object.assign(instance, opt);
+  } else {
+    instance = new ToastConstructor({
+      data: Object.assign(opt, obj)
+    });
+    opt["id"] && (instanceArr[opt["id"]] = instance);
+  }
 
     _showToast();
     return instance;
 }
 
+function errorMsg(msg) {
+  if (!msg) {
+    console.warn("[NutUI Toast]: msg不能为空");
+    return;
+  }
+}
+
 let Toast = {
-    text(msg, obj) {
-        if (!msg) {
-            console.warn('[NutUI Toast]: msg不能为空');
-            return;
-        }
-        obj = obj || {};
-        obj.msg = msg;
-        return _getInstance(obj);
-    },
-    success(msg, obj) {
-        if (!msg) {
-            console.warn('[NutUI Toast]: msg不能为空');
-            return;
-        }
-        obj = obj || {};
-        obj.msg = msg;
-        obj.type = 'success';
-        return _getInstance(obj);
-    },
-    fail(msg, obj) {
-        if (!msg) {
-            console.warn('[NutUI Toast]: msg不能为空');
-            return;
-        }
-        obj = obj || {};
-        obj.msg = msg;
-        obj.type = 'fail';
-        return _getInstance(obj);
-    },
-    warn(msg, obj) {
-        if (!msg) {
-            console.warn('[NutUI Toast]: msg不能为空');
-            return;
-        }
-        obj = obj || {};
-        obj.msg = msg;
-        obj.type = 'warn';
-        return _getInstance(obj);
-    },
-    loading(msg, obj) {
-        obj = obj || {};
-        obj.id = obj.id || 'loading';
-        obj.msg = msg;
-        obj.type = 'loading';
-        obj.cover = typeof(obj.cover) !== 'undefined' ? obj.cover : true; //loading类型默认打开遮罩层
-        obj.duration = obj.duration || 0;
-        return _getInstance(obj);
+  text(msg, obj = {}) {
+    errorMsg(msg);
+    return _getInstance({ ...obj, msg, type: "text" });
+  },
+  success(msg, obj = {}) {
+    errorMsg(msg);
+    return _getInstance({ ...obj, msg, type: "success" });
+  },
+  fail(msg, obj = {}) {
+    errorMsg(msg);
+    return _getInstance({ ...obj, msg, type: "fail" });
+  },
+  warn(msg, obj = {}) {
+    errorMsg(msg);
+    return _getInstance({ ...obj, msg, type: "warn" });
+  },
+  loading(msg, obj = {}) {
+    obj = { ...obj, id: obj.id || "loading", msg, type: "loading" };
+    obj.cover = typeof obj.cover !== "undefined" ? obj.cover : true; //loading类型默认打开遮罩层
+    obj.duration = obj.duration || 0; //loading类型默认不自动关闭
+    return _getInstance(obj);
+  },
+  setDefaultOptions(type, options) {
+    if (typeof type === "string") {
+      defaultOptionsMap[type] = options;
+    } else {
+      Object.assign(currentOptions, type);
+    }
+  },
+  resetDefaultOptions(type) {
+    if (typeof type === "string") {
+      defaultOptionsMap[type] = null;
+    } else {
+      currentOptions = { ...defaultOptions };
+      defaultOptionsMap = {};
     }
+  }
 };
 
-export default Toast;
+export default Toast;

src/packages/toast/doc.md

@@ -3,7 +3,7 @@
 轻提示。
 
 ## 基本用法
-
+文字提示
 ```javascript
 export default {
   mounted() {
@@ -12,25 +12,6 @@ export default {
 }
 ```
 
-## 高级用法
-
-第二个参数是一个对象，可以传入一些高级配置。
-
-```javascript
-export default {
-  mounted() {
-    this.$toast.text('提示信息',{
-        duration: 4000, //展示时长
-        center: true, //是否居中展示，值为false时展示在页面底部
-        bottom: 40, //展示在页面底部时，距底部的距离（px)
-        textAlignCenter:true //多行文本是否居中展示，值为false时单行居中，多行居左
-    });
-  }
-}
-```
-
-## 带ICON
-
 成功提示
 
 ```javascript
@@ -64,22 +45,48 @@ export default {
 ## 加载提示
 
 ```javascript
-//Loading类型，默认不会自动消失，带透明遮罩
-this.loading = this.$toast.loading();
-
-//手动关闭上面的Loading
-this.loading.hide();
+// 带文案，显示透明遮罩层（默认），自动消失
+this.$toast.loading('加载中...',{ 
+    duration:3000
+});
 
-//带文字，自动消失，不要遮罩
+//带文案，显示半透明遮罩层，自动消失，点击遮罩层后消失
 this.$toast.loading('加载中...',{ 
     duration:3000,
-    cover:false
+    coverColor: "rgba(0,0,0,0.5)",
+    closeOnClickOverlay: true
 });
+
+//不会自动消失(默认)，不带遮罩层
+this.loading = this.$toast.loading({
+    cover: false
+});
+
+//手动关闭上面的Loading
+this.loading.hide();
 ```
 
+## 自定义样式
+
+```javascript
+//自定义背景颜色/透明度
+this.$toast.text('自定义背景颜色/透明度',{
+    bgColor:'rgba(50, 50, 50, 0.9)'
+});
+
+//自定义class
+this.$toast.text('自定义class',{
+    customClass:'my-class'
+});
+
+//自定义Icon
+this.$toast.text('自定义Icon',{
+    icon:"https://img13.360buyimg.com/imagetools/jfs/t1/98294/28/14470/22072/5e65ba08E865683aa/ded7441bdd098511.png"
+});
+```
 ## 共享实例
 
-Toast的id如果相同，将共享一个实例。如果不设置id，多个Toast将拥有相同的id默认值，它们将共享一个实例（loading类型与其他类型实例不共享），新的内容和设置将取代旧的，多个Toast不能同时出现。如果不需要共享实例，可以给其设置id。
+如果不设置id，多个Toast将默认拥有相同的id，**它们将共享一个实例**（loading类型与其他类型实例不共享），新的内容和设置将取代旧的，多个Toast不能同时出现。如果不需要共享实例，可以给其设置id。
 
 ```javascript
 //二者id不同，不会共享一个实例
@@ -93,46 +100,73 @@ this.$toast.text(msg,{
 });
 ```
 
-## 自定义样式
-
+## 支持在JS模块中导入使用
 ```javascript
-//自定义背景颜色/透明度
-this.$toast.text('提示文案',{
-    bgColor:'rgba(50, 50, 50, 0.9)'
-});
+import { Toast } from "@nutui/nutui";
+
+Toast.text('在js模块中使用');
+// 返回实例，可以手动调用实例中的hide方法关闭提示
+const toast = Toast.loading('在js模块中使用');
+toast.hide();
+```
 
-//自定义字号，'small'/'base'/'large'三选一
-this.$toast.text('提示文案',{
-    size:'small'
+## 修改默认配置
+
+通过**Toast.setDefaultOptions**函数可以全局修改 Toast 的默认配置，**值得注意的是，loading无法支持默认配置的修改和重置**。
+
+```js
+// 更改所有Toast展示时长设置为5000毫秒
+Toast.setDefaultOptions({
+    duration: 5000,
+    coverColor: "rgba(0, 0, 0, 0.2)",
+    closeOnClickOverlay: true,
+    cover: true
 });
 
-//自定义class
-this.$toast.text('提示文案',{
-    customClass:'my-class'
+// 重置所有 Toast 的默认配置
+Toast.resetDefaultOptions();
+
+// 更改所有文字提示默认设置
+Toast.setDefaultOptions("text", {
+    size: "large",
+    cover: true,
+    coverColor: "rgba(0, 0, 0, 0.2)",
+    duration: 3000,
+    closeOnClickOverlay: true
 });
+
+// 重置 text Toast 的默认配置
+Toast.resetDefaultOptions("text");
 ```
-<!-- ```javascript
-//自定义loading的Icon
-this.$toast.loading(msg,{icon:"data:image/svg+xml,%3Csvg fill="#FFFFFF" xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 21'%3E%3Cpath d='M10 13.5l-7-6-3 3L10.5 21 28 3.5l-3-3z' fill-rule='evenodd'/%3E%3C/svg%3E"),
-    duration:3000
-});
-``` -->
-
-
-## API
-
-| 字段 | 说明 | 类型 | 默认值
-|----- | ----- | ----- | ----- 
-| msg | 消息文案 | String | ""
-| option.id | 标识符，相同者共用一个实例。loading类型默认使用一个实例，其他类型默认不共用。 | String/Number | -
-| option.duration | 展示时长（毫秒）,为0时不自动关闭（loading类型默认为0） | Number | 2000
-| option.center | 是否展示在页面中部（为false时展示在底部） | Boolean | true
-| option.bottom | 距页面底部的距离（像素），option.center为false时生效 | Boolean | true
-| option.textAlignCenter | 多行文案是否居中 | Boolean | true
-| option.bgColor | 背景颜色（透明度） | String | "rgba(46, 46, 46, 0.7)"
-| option.customClass | 增加自定义class | String | ""
-| option.icon | 自定义图标，Data URI格式 | String | ""
-| option.size | 尺寸，small/base/large三选一 | String | "base"
-| option.cover | 透明遮罩，loading类型默认打开 | Boolean | loading类型true/其他false
-| option.loadingRotate | loading图标是否旋转，仅对loading类型生效 | Boolean | true
-| option.onClose | 关闭时触发的事件 | function | null
+
+### API
+| 方法名                    | 说明                                                                    | 参数            | 返回值     |
+| ------------------------- | ----------------------------------------------------------------------- | --------------- | ---------- |
+| Toast.text                | 展示文字提示                                                            | options/message | toast 实例 |
+| Toast.loading             | 展示加载提示                                                            | options/message | toast 实例 |
+| Toast.success             | 展示成功提示                                                            | options/message | toast 实例 |
+| Toast.fail                | 展示失败提示                                                            | options/message | toast 实例 |
+| Toast.warn                | 展示警告提示                                                            | options/message | toast 实例 |
+| Toast.hide                | 关闭提示                                                                | force:boolean   | void       |
+| Toast.setDefaultOptions   | 修改默认配置，对所有 Toast 生效<br>传入 type 可以修改指定类型的默认配置 | type/options    | void       |
+| Toast.resetDefaultOptions | 重置默认配置，对所有 Toast 生效<br>传入 type 可以重置指定类型的默认配置 | type            | void       |
+
+## Options
+
+| 字段                | 说明                                                                          | 类型          | 默认值                        |
+| ------------------- | ----------------------------------------------------------------------------- | ------------- | ----------------------------- |
+| msg                 | 消息文本内容,支持传入HTML                                                     | String/VNode  | ""                            |
+| id                  | 标识符，相同者共用一个实例<br>loading类型默认使用一个实例，其他类型默认不共用 | String/Number | -                             |
+| duration            | 展示时长（毫秒）<br>值为 0 时，toast 不会自动消失（loading类型默认为0）       | Number        | 2000                          |
+| center              | 是否展示在页面中部（为false时展示在底部）                                     | Boolean       | true                          |
+| bottom              | 距页面底部的距离（像素），option.center为false时生效                          | Boolean       | true                          |
+| textAlignCenter     | 多行文案是否居中                                                              | Boolean       | true                          |
+| bgColor             | 背景颜色（透明度）                                                            | String        | "rgba(46, 46, 46, 0.7)"       |
+| customClass         | 自定义类名                                                                    | String        | ""                            |
+| icon                | 自定义图标，**支持图片链接或base64格式**                                        | String        | ""                            |
+| size                | 尺寸，**small**/**base**/**large**三选一                                                  | String        | "base"                        |
+| cover               | 是否显示遮罩层，loading类型默认显示                                           | Boolean       | loading类型true/其他类型false |
+| coverColor          | 遮罩层颜色，默认透明                                                          | String        | "rgba(0,0,0,0)"               |
+| loadingRotate       | loading图标是否旋转，仅对loading类型生效                                      | Boolean       | true                          |
+| onClose             | 关闭时触发的事件                                                              | function      | null                          |
+| closeOnClickOverlay | 是否在点击遮罩层后关闭提示                                                    | Boolean       | false                         |

src/packages/toast/toast.vue

@@ -1,18 +1,30 @@
 <template>
   <transition name="toastfade">
-    <div :id="id"
-      :class="['nut-toast',{'nut-toast-center':center},{'nut-toast-has-icon':type},{'nut-toast-cover':cover},{'nut-loading':type=='loading'},customClass,'nut-toast-'+size]"
+    <div
+      :id="id"
+      :class="toastClass"
       v-if="visible"
-      :style="{'bottom':center?'auto':bottom+'px'}"
+      :style="{
+        bottom: center ? 'auto' : bottom + 'px',
+        'background-color': coverColor
+      }"
+      @click="clickCover"
     >
       <div
         class="nut-toast-inner"
-        :style="{'text-align':textAlignCenter?'center':'left','background-color':bgColor}"
+        :style="{
+          'text-align': textAlignCenter ? 'center' : 'left',
+          'background-color': bgColor
+        }"
       >
-        <span class="nut-toast-icon-wrapper">
+        <span v-if="hasIcon" class="nut-toast-icon-wrapper">
           <i
-            :class="['nut-toast-icon',type,{'nut-toast-icon-rotate':type==='loading'&&loadingRotate}]"
-            :style="{'background-image':cusIcon}"
+            :class="[
+              'nut-toast-icon',
+              type,
+              { 'nut-toast-icon-rotate': type === 'loading' && loadingRotate }
+            ]"
+            :style="{ 'background-image': cusIcon }"
           ></i>
         </span>
         <span class="nut-toast-text" v-html="msg"></span>
@@ -26,24 +38,26 @@ export default {
   props: {},
   data() {
     return {
-        id:"",
-        msg: "",
-        visible: false,
-        duration: 2000, //显示时间(毫秒)
-        timer: null,
-        center: true,
-        type: "",
-        customClass: "",
-        bottom: 30,
-        size:"base",
-        icon:null,
-        textAlignCenter: true,
-        loadingRotate:true,
-        bgColor: "rgba(46, 46, 46, 0.7)",
-        onClose:null,
-        textTimer: null,
-        cover:false,
-        timeStamp:null
+      id: "",
+      msg: "",
+      visible: false,
+      duration: 2000, //显示时间(毫秒)
+      timer: null,
+      center: true,
+      type: "",
+      customClass: "",
+      bottom: 30,
+      size: "base",
+      icon: null,
+      textAlignCenter: true,
+      loadingRotate: true,
+      bgColor: "rgba(46, 46, 46, 0.7)",
+      onClose: null,
+      textTimer: null,
+      cover: false,
+      coverColor: "rgba(0, 0, 0, 0)",
+      timeStamp: null,
+      closeOnClickOverlay: false
     };
   },
   watch: {
@@ -56,6 +70,24 @@ export default {
   computed: {
     cusIcon() {
       return this.icon ? `url("${this.icon}")` : "";
+    },
+    toastClass() {
+      return [
+        "nut-toast",
+        { "nut-toast-center": this.center },
+        { "nut-toast-has-icon": this.hasIcon },
+        { "nut-toast-cover": this.cover },
+        { "nut-loading": this.type == "loading" },
+        this.customClass,
+        "nut-toast-" + this.size
+      ];
+    },
+    hasIcon() {
+      if (this.type !== "text") {
+        return true;
+      } else {
+        return this.cusIcon;
+      }
     }
   },
   methods: {
@@ -79,14 +111,23 @@ export default {
           this.msg = "";
         }, 300);
       }
-      typeof(this.onClose) === "function" && this.onClose();
+      typeof this.onClose === "function" && this.onClose();
     },
     clearTimer() {
       if (this.timer) {
         clearTimeout(this.timer);
         this.timer = null;
       }
+    },
+    clickCover() {
+      if (this.closeOnClickOverlay) {
+          this.hide();
+      }
     }
+  },
+  destroyed() {
+    this.textTimer = null;
+    this.timer = null;
   }
 };
-</script>
+</script>