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

sites/doc/app.vue

@@ -66,7 +66,7 @@
         </div>
       </div>
       <div class="foot">
-        Copyright © 2018~2019
+        Copyright © 2018~2020
         <a href="//jdc.jd.com" target="_blank">JDC</a>-
         <a target="_blank" href="javascript:;">前端开发部</a>
       </div>

src/config.json

@@ -17,7 +17,7 @@
       "type": "component",
       "showDemo": true,
       "desc": "列表项，可组合成列表",
-      "author": "Frans"
+      "author": "Frans、玉磊"
     },
     {
       "name": "Dialog",
@@ -28,7 +28,7 @@
       "showDemo": true,
       "desc": "模态弹窗，支持按钮交互，支持图片弹窗。",
       "star": 5,
-      "author": "Frans"
+      "author": "Frans、肖晓"
     },
     {
       "name": "Icon",
@@ -49,7 +49,7 @@
       "type": "method",
       "showDemo": true,
       "star": 4,
-      "author": "Frans"
+      "author": "Frans、张宇"
     },
     {
       "version": "1.0.0",
@@ -207,7 +207,7 @@
       "desc": "Flex布局速简便地创建布局",
       "type": "component",
       "showDemo": true,
-      "author": "秦伟伟"
+      "author": "秦伟伟,苏子刚"
     },
     {
       "version": "1.0.0",
@@ -217,7 +217,7 @@
       "desc": "Flex布局速简便地创建布局",
       "type": "component",
       "showDemo": false,
-      "author": "秦伟伟"
+      "author": "秦伟伟,苏子刚"
     },
     {
       "version": "1.0.0",
@@ -227,7 +227,7 @@
       "desc": "Flex布局速简便地创建布局",
       "type": "component",
       "showDemo": false,
-      "author": "秦伟伟"
+      "author": "秦伟伟,苏子刚"
     },
     {
       "version": "1.0.0",
@@ -411,7 +411,7 @@
       "type": "component",
       "sort": "2",
       "showDemo": true,
-      "author": "永无止晋"
+      "author": "永无止晋、richard1015"
     },
     {
       "version": "1.0.0",
@@ -472,7 +472,7 @@
       "type": "component",
       "sort": "0",
       "showDemo": true,
-      "author": "zhuzhida"
+      "author": "richard1015"
     },
     {
       "version": "1.0.0",

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/progress/demo.vue

@@ -5,7 +5,7 @@
     <div>
       <nut-cell>
         <span slot="title">
-          <nut-progress percentage="30" strokeColor="#8e71c7"/>
+          <nut-progress percentage="30" stroke-color="#8e71c7"/>
         </span>
       </nut-cell>
     </div>
@@ -13,7 +13,7 @@
     <div>
       <nut-cell>
         <span slot="title">
-          <nut-progress percentage="50" :showText="false" strokeWidth="24"/>
+          <nut-progress percentage="50" :show-text="false" stroke-width="24"/>
         </span>
       </nut-cell>
     </div>
@@ -29,7 +29,7 @@
     <div>
       <nut-cell>
         <span slot="title">
-          <nut-progress percentage="60" :textInside="true"/>
+          <nut-progress percentage="60" :text-inside="true"/>
         </span>
       </nut-cell>
     </div>
@@ -37,7 +37,7 @@
     <div>
       <nut-cell>
         <span slot="title">
-          <nut-progress percentage="30" :textInside="true" size="small">
+          <nut-progress percentage="30" :text-inside="true" :size="size">
             <slot>
               <span>small</span>
             </slot>
@@ -46,7 +46,7 @@
       </nut-cell>
       <nut-cell>
         <span slot="title">
-          <nut-progress percentage="50" :textInside="true" size="base">
+          <nut-progress percentage="50" :text-inside="true" size="base">
             <slot>
               <span>base</span>
             </slot>
@@ -55,7 +55,7 @@
       </nut-cell>
       <nut-cell>
         <span slot="title">
-          <nut-progress percentage="70" :textInside="true" size="large">
+          <nut-progress percentage="70" :text-inside="true" size="large">
             <slot>
               <span>large</span>
             </slot>
@@ -67,17 +67,17 @@
     <div>
       <nut-cell>
         <span slot="title">
-          <nut-progress percentage="30" strokeColor="#1890ff" status="active"/>
+          <nut-progress percentage="30" stroke-color="#1890ff" status="active"/>
         </span>
       </nut-cell>
       <nut-cell>
         <span slot="title">
-          <nut-progress percentage="50" strokeWidth="15" status="wrong"/>
+          <nut-progress percentage="50" :stroke-width="strokeWidth" status="wrong"/>
         </span>
       </nut-cell>
       <nut-cell>
         <span slot="title">
-          <nut-progress percentage="100" strokeColor="#1890ff" strokeWidth="15" status="success"/>
+          <nut-progress percentage="100" stroke-color="#1890ff" stroke-width="15" status="success"/>
         </span>
       </nut-cell>
     </div>
@@ -102,9 +102,16 @@
 export default {
   data() {
     return {
-      val: 0
+      val: 0,
+      strokeWidth:15,
+      size:'small'
     };
   },
+  mounted(){
+    setTimeout(() => {
+      this.size='large';
+    }, 3000);
+  },
   methods: {
     setAddVal() {
       if (this.val >= 100) {

src/packages/progress/doc.md

@@ -15,8 +15,8 @@
 ```html
 <nut-progress
     percentage="30"
-    strokeColor="#8e71c7" 
-    strokeWidth="12"
+    stroke-color="#8e71c7" 
+    stroke-width="12"
 >
 </nut-progress>
 ```
@@ -25,7 +25,7 @@
 ```html
 <nut-progress 
     percentage="50"
-    :showText="false"
+    :show-text="false"
 >
 </nut-progress>
 ```
@@ -34,8 +34,8 @@
 ```html
 <nut-progress 
     percentage="60" 
-    :textInside="true" 
-    strokeWidth="24"
+    :text-inside="true" 
+    stroke-width="24"
 ></nut-progress>
 ```
 设置状态显示
@@ -43,20 +43,20 @@
 ```html
 <nut-progress 
     percentage="30" 
-    strokeColor="#f30" 
+    stroke-color="#f30" 
     status="active"
 >
 </nut-progress>
 <nut-progress 
     percentage="50"
-    strokeColor="#f30"
-    strokeWidth="15"
+    stroke-color="#f30"
+    stroke-width="15"
     status="wrong"
 >
 </nut-progress>
 <nut-progress 
     percentage="100" 
-    :strokeWidth="15" 
+    :stroke-width="15" 
     status="success"
 >
 </nut-progress>
@@ -85,9 +85,9 @@
 | 字段 | 说明 | 类型 | 默认值
 |----- | ----- | ----- | -----
 | percentage | 百分比 | Number | 0
-| strokeColor | 进度条背景色 | String | #1890ff
-| strokeWidth | 进度条高度 | String | ''
+| stroke-color | 进度条背景色 | String | #1890ff
+| stroke-width | 进度条高度 | String | ''
 | size | 进度条及文字尺寸，可选值small/base/large | String | -
-| showText | 是否显示进度条文字内容 | Boolean | true
-| textInside | 进度条文字显示位置 | Boolean | false
+| show-text | 是否显示进度条文字内容 | Boolean | true
+| text-inside | 进度条文字显示位置 | Boolean | false
 | status | 进度条当前状态,可选值text/active/wrong/success | String | text

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,107 +1,112 @@
-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();
-  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) {
   let opt = {
-        id:new Date().getTime(),
-        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);
+    id: new Date().getTime(),
+    ...currentOptions,
+    ...defaultOptionsMap[obj.type],
+    ...obj
+  };
 
   //有相同id者共用一个实例，否则新增实例
-  if (opt['id'] && instanceArr[opt['id']]) {
-    instance = instanceArr[opt['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);
+    opt["id"] && (instanceArr[opt["id"]] = instance);
   }
 
-  _showToast();
-  return 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);
+  text(msg, obj = {}) {
+    errorMsg(msg);
+    return _getInstance({ ...obj, msg, type: "text" });
   },
-  success(msg, obj) {
-    if (!msg) {
-      console.warn('[NutUI Toast]: msg不能为空');
-      return;
-    }
-    obj = obj || {};
-    obj.msg = msg;
-    obj.type = 'success';
-    return _getInstance(obj);
+  success(msg, obj = {}) {
+    errorMsg(msg);
+    return _getInstance({ ...obj, msg, type: "success" });
   },
-  fail(msg, obj) {
-    if (!msg) {
-      console.warn('[NutUI Toast]: msg不能为空');
-      return;
-    }
-    obj = obj || {};
-    obj.msg = msg;
-    obj.type = 'fail';
+  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);
   },
-  warn(msg, obj) {
-    if (!msg) {
-      console.warn('[NutUI Toast]: msg不能为空');
-      return;
+  setDefaultOptions(type, options) {
+    if (typeof type === "string") {
+      defaultOptionsMap[type] = options;
+    } else {
+      Object.assign(currentOptions, type);
     }
-    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);
+  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>

types/nutui.d.ts

@@ -60,6 +60,7 @@ export declare class Scroller extends UIComponent {}
 export declare class CountDown extends UIComponent {}
 export declare class Uploader extends UIComponent {}
 export declare class TextInput extends UIComponent {}
+export declare class TextBox extends UIComponent {}
 export declare class Avatar extends UIComponent {}
 export declare class Infiniteloading extends UIComponent {}
 export declare class Lazyload extends UIComponent {}