feat: 更新toast 样式

src/mixins/touch.js

@@ -0,0 +1,48 @@
+import Vue from "vue";
+
+const MIN_DISTANCE = 10;
+
+function getDirection(x, y) {
+  if (x > y && x > MIN_DISTANCE) {
+    return "horizontal";
+  }
+
+  if (y > x && y > MIN_DISTANCE) {
+    return "vertical";
+  }
+
+  return "";
+}
+
+const TouchMixin = Vue.extend({
+  data() {
+    return { direction: "" };
+  },
+
+  methods: {
+    touchStart(event) {
+      this.resetTouchStatus();
+      this.startX = event.touches[0].clientX;
+      this.startY = event.touches[0].clientY;
+    },
+
+    touchMove(event) {
+      const touch = event.touches[0];
+      this.deltaX = touch.clientX - this.startX;
+      this.deltaY = touch.clientY - this.startY;
+      this.offsetX = Math.abs(this.deltaX);
+      this.offsetY = Math.abs(this.deltaY);
+      this.direction =
+        this.direction || getDirection(this.offsetX, this.offsetY);
+    },
+
+    resetTouchStatus() {
+      this.direction = "";
+      this.deltaX = 0;
+      this.deltaY = 0;
+      this.offsetX = 0;
+      this.offsetY = 0;
+    },
+  },
+});
+export default TouchMixin;

src/packages/button/doc.md

@@ -315,7 +315,7 @@ export default {
 | ----- | ---------------------------------------------------------------------------------------- | ------- | ------ |
 | type  | 按钮类型，可选类型包含：空/bottom/red/gray/light/lightred/primary/default/actived/dashed | String  | -      |
 | block | 是否为通栏                                                                               | Boolean | false  |
-| size  | large /normal/small                                                                      | String  | normal |
+| size  | big /middle/small                                                                      | String  | big |
 | shape | 形状配置，可选类型：空、circle                                                           | String  | -      |
 | icon  | 按钮前的图标，参考Icon组件                                                               | String  | -      |
 | color | 自定义颜色，包含文字与图片颜色                                                           | String  | -      |

src/packages/popup/overlay/overlay-manager.js

@@ -42,15 +42,15 @@ const overlayManager = {
 
   //打开遮罩层
   openModal(vm, config) {
-    let { zIndex, duration, className, customStyle } = config;
-
+    let { zIndex, duration, overlayClass, overlayStyle} = config;
+ 
     modalStack.push({
       vm,
       config: {
         zIndex,
         duration,
-        className,
-        customStyle,
+        overlayClass,
+        overlayStyle,
       },
     });
 
@@ -105,8 +105,8 @@ const overlayProps = {
     default: "",
   },
   overlayStyle: {
-    type: String,
-    default: "",
+    type: Object,
+    default: {},
   },
   zIndex: {
     type: Number

src/packages/popup/overlay/overlay.vue

@@ -2,7 +2,7 @@
   <transition name="popup-fade">
     <div
       @touchmove.stop="touchmove"
-      :style="{ animationDuration: `${duration}s`, overlayStyle, zIndex }"
+      :style="{ animationDuration: `${duration}s`, ...overlayStyle, zIndex }"
       v-show="value"
       class="popup-bg nut-mask"
       :class="overlayClass"
@@ -36,8 +36,8 @@ const overlayProps = {
     default: "",
   },
   overlayStyle: {
-    type: String,
-    default: "",
+    type: Object,
+    default: {},
   },
   zIndex: {
     type: Number
@@ -47,6 +47,7 @@ export { overlayProps };
 export default {
   name: "nut-popup-overlay",
   props: overlayProps,
+   
   methods: {
     touchmove(e) {
       if (this.lockScroll) {

src/packages/popup/popup.scss

@@ -77,8 +77,7 @@ $popup-close-icon-margin: 16px;
   overflow-y: auto;
   background-color: #fff;
   transition: transform 0.3s;
-  -webkit-overflow-scrolling: touch;
-  z-index: 100;
+  -webkit-overflow-scrolling: touch; 
 }
 @keyframes nut-fade-in {
   from {
@@ -144,8 +143,7 @@ $popup-close-icon-margin: 16px;
   left: 0;
   width: 100%;
   height: 100%;
-  background-color: rgba(0, 0, 0, 0.7);
-  z-index: 99;
+  background-color: rgba(0, 0, 0, 0.7); 
 }
 
 @keyframes nut-fade-in {

src/packages/toast/_toast.js

@@ -40,7 +40,7 @@ function _showToast() {
 
 function _getInstance(obj) {
   let opt = {
-    id: new Date().getTime(),
+    id: 1,
     ...currentOptions,
     ...defaultOptionsMap[obj.type],
     ...obj

src/packages/toast/demo.vue

@@ -1,113 +1,42 @@
 <template>
   <div class="demo-list">
     <h4>基本用法</h4>
-    <div>
-      <nut-cell :showIcon="true" :isLink="true" @click.native="textToast1('我只传了文案一个参数')">
-        <span slot="title">
-          <label>文字提示</label>
-        </span>
-      </nut-cell>
-      <nut-cell :showIcon="true" :isLink="true" @click.native="textToast2('我传了文案和显示时长两个参数，多行文字默认居中展示', 5000)">
-        <span slot="title">
-          <label>长文字提示</label>
-        </span>
-      </nut-cell>
-      <nut-cell :showIcon="true" :isLink="true" @click.native="sucToast('操作成功')">
-        <span slot="title">
-          <label>成功提示</label>
-        </span>
-      </nut-cell>
-      <nut-cell :showIcon="true" :isLink="true" @click.native="failToast('操作失败')">
-        <span slot="title">
-          <label>失败提示</label>
-        </span>
-      </nut-cell>
-      <nut-cell :showIcon="true" :isLink="true" @click.native="warnToast('操作警告')">
-        <span slot="title">
-          <label>警告提示</label>
-        </span>
-      </nut-cell>
+    <div class="demo-content">
+      <nut-button size="middle" @click.native="textToast1('我只传了文案一个参数')">文字提示</nut-button>
+      <nut-button size="middle" @click.native="textToast2('我传了文案和显示时长两个参数，多行文字默认居中展示', 5000)">长文字提示</nut-button>
+      <nut-button size="middle" @click.native="sucToast('操作成功')">成功提示</nut-button>
+      <nut-button size="middle" @click.native="failToast('操作失败')">失败提示</nut-button>
+      <nut-button size="middle" @click.native="failToast('操作失败')" color="#fff">警告提示</nut-button>
     </div>
     <h4>加载提示</h4>
-    <div>
-      <nut-cell :showIcon="true" :isLink="true" @click.native="showLoading()">
-        <span slot="title">
-          <label>Loading</label>
-        </span>
-        <span slot="desc">带文案+带透明遮罩（默认）+自动消失</span>
-      </nut-cell>
-      <nut-cell :showIcon="true" :isLink="true" @click.native="showLoading2()">
-        <span slot="title">
-          <label>Loading</label>
-        </span>
-        <span slot="desc">带文案+带半透明遮罩+自动消失</span>
-      </nut-cell>
-      <nut-cell :showIcon="true" :isLink="true" @click.native="showLoading3()">
-        <span slot="title">
-          <label>Loading</label>
-        </span>
-        <span slot="desc">不自动消失+不带遮罩</span>
-      </nut-cell>
-      <nut-cell :showIcon="true" :isLink="true" @click.native="hideLoading()">
-        <span slot="title">
-          <label>隐藏Loading</label>
-        </span>
-        <span slot="desc">点击手动隐藏上面的Loading</span>
-      </nut-cell>
+    <div class="demo-content">
+      <nut-button size="middle" @click.native="showLoading()">透明遮罩</nut-button>
+      <nut-button size="middle" @click.native="showLoading2()">半透明遮罩</nut-button>
+      <nut-button size="middle" @click.native="showLoading3()">不自动消失+不带遮罩</nut-button>
+      <nut-button size="middle" @click.native="hideLoading()">隐藏Loading</nut-button>
     </div>
+
     <h4>自定义样式</h4>
-    <div>
-      <nut-cell :showIcon="true" :isLink="true" @click.native="cusBgToast('我修改了背景色和透明度')">
-        <span slot="title">
-          <label>自定义背景色和透明度</label>
-        </span>
-      </nut-cell>
-      <nut-cell :showIcon="true" :isLink="true" @click.native="cusClassToast('我有一个名为 my-class 自定义class')">
-        <span slot="title">
-          <label>自定义class</label>
-        </span>
-      </nut-cell>
-      <nut-cell :showIcon="true" :isLink="true" @click.native="cusIconToast('自定义Icon')">
-        <span slot="title">
-          <label>自定义Icon</label>
-        </span>
-      </nut-cell>
+    <div class="demo-content">
+      <nut-button size="middle" @click.native="cusBgToast('我修改了背景色和透明度')">自定义背景色和透明度</nut-button>
+      <nut-button size="middle" @click.native="cusClassToast('我有一个名为 my-class 自定义class')">自定义class</nut-button>
+      <nut-button size="middle" @click.native="cusIconToast('自定义Icon')">自定义Icon</nut-button>
     </div>
+
     <h4>共享实例</h4>
-    <div>
-      <nut-cell :showIcon="true" :isLink="true" @click.native="idToast1('我设置了id为123')">
-        <span slot="title">
-          <label>我设置了id为123</label>
-        </span>
-      </nut-cell>
-      <nut-cell :showIcon="true" :isLink="true" @click.native="idToast2('我设置了id为321')">
-        <span slot="title">
-          <label>我设置了id为321</label>
-        </span>
-      </nut-cell>
+
+    <div class="demo-content">
+      <nut-button size="middle" @click.native="idToast1('我设置了id为123')">我设置了id为123</nut-button>
+      <nut-button size="middle" @click.native="idToast2('我设置了id为321')">我设置了id为321</nut-button>
     </div>
+
     <h4>更改默认配置</h4>
-    <div>
-      <nut-cell :showIcon="true" :isLink="true" @click.native="setDefaultOptions()">
-        <span slot="title">
-          <label>将所有Toast提示展示时长设置为5000毫秒</label>
-        </span>
-      </nut-cell>
-      <nut-cell :showIcon="true" :isLink="true" @click.native="resetDefaultOptions()">
-        <span slot="title">
-          <label>恢复所有Toast提示默认配置</label>
-        </span>
-      </nut-cell>
-      <nut-cell :showIcon="true" :isLink="true" @click.native="setDefaultOptions2()">
-        <span slot="title">
-          <label>更改文字提示默认配置</label>
-        </span>
-      </nut-cell>
-      <nut-cell :showIcon="true" :isLink="true" @click.native="resetDefaultOptions2()">
-        <span slot="title">
-          <label>恢复文字提示默认配置</label>
-        </span>
-      </nut-cell>
+
+    <div class="demo-content">
+      <nut-button size="middle" @click.native="setDefaultOptions()">将所有Toast提示展示时长设置为5000毫秒</nut-button>
+      <nut-button size="middle" @click.native="resetDefaultOptions()">恢复所有Toast提示默认配置</nut-button>
+      <nut-button size="middle" @click.native="setDefaultOptions2()">更改文字提示默认配置</nut-button>
+      <nut-button size="middle" @click.native="resetDefaultOptions2()">恢复文字提示默认配置</nut-button>
     </div>
   </div>
 </template>
@@ -208,4 +137,11 @@ export default {
 };
 </script>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.demo-content {
+  margin: 12px;
+}
+/deep/.nut-button {
+  margin: 4px;
+}
+</style>

src/packages/toast/toast.scss

@@ -1,28 +1,21 @@
 @import '../../styles/animation/rotate';
-.nut-toast {
-  position: fixed;
-  left: 0;
-  bottom: 150px;
-  width: 100%;
-  text-align: center;
-  pointer-events: none;
-  z-index: 9999;
-  font-family: $font-family;
-  &.nut-toast-small {
+ 
+  .nut-toast-small {
     .nut-toast-inner {
       font-size: $font-size-small;
     }
   }
-  &.nut-toast-large {
+  .nut-toast-large {
     .nut-toast-inner {
       font-size: $font-size-large;
     }
   }
-  &.nut-toast-cover {
+  .nut-toast-cover {
     display: flex;
     align-items: center;
     justify-content: center;
     pointer-events: auto;
+    background-color: transparent;
     height: 100%;
   }
   .nut-toast-inner {
@@ -38,7 +31,7 @@
     border-radius: 7px;
     color: #fff;
   }
-  &.nut-toast-has-icon {
+  .nut-toast-has-icon {
     .nut-toast-inner {
       padding: 70px 50px 30px;
     }
@@ -74,11 +67,11 @@
       }
     }
   }
-  &.nut-toast-center {
+  .nut-toast-center {
     top: 50%;
     transform: translateY(-50%);
   }
-  &.nut-loading {
+  .nut-loading {
     .nut-toast-inner {
       padding: 25px;
       display: inline-flex;
@@ -102,7 +95,7 @@
       }
     }
   }
-}
+
 
 .toastfade-enter-active {
   transition: opacity 0.1s;

src/packages/toast/toast.vue

@@ -1,14 +1,11 @@
 <template>
   <transition name="toastfade">
-    <div
-      :id="id"
+    <nut-popup
+      :overlay='cover'
       :class="toastClass"
-      v-if="visible"
-      :style="{
-        bottom: center ? 'auto' : bottom + 'px',
-        'background-color': coverColor
-      }"
-      @click="clickCover"
+      v-model="visible"
+      :overlayStyle='{backgroundColor:coverColor}'
+      :style="{backgroundColor:'transparent'}"
     >
       <div
         class="nut-toast-inner"
@@ -25,7 +22,7 @@
         </span>
         <span class="nut-toast-text" v-html="msg"></span>
       </div>
-    </div>
+    </nut-popup>
   </transition>
 </template>
 <script>
@@ -71,8 +68,7 @@ export default {
       return [
         'nut-toast',
         { 'nut-toast-center': this.center },
-        { 'nut-toast-has-icon': this.hasIcon },
-        { 'nut-toast-cover': this.cover },
+        { 'nut-toast-has-icon': this.hasIcon }, 
         { 'nut-loading': this.type == 'loading' },
         this.customClass,
         'nut-toast-' + this.size
@@ -115,11 +111,7 @@ export default {
         this.timer = null;
       }
     },
-    clickCover() {
-      if (this.closeOnClickOverlay) {
-        this.hide();
-      }
-    }
+    
   },
   destroyed() {
     this.textTimer = null;

src/utils/event.js

@@ -0,0 +1,36 @@
+export let passiveSupported = false;
+
+ 
+try {
+    var options = Object.defineProperty({}, "passive", {
+      get: function() {
+        passiveSupported = true;
+      }
+    });
+  
+    window.addEventListener("test", null, options);
+} catch(err) {}
+  
+ 
+export function on(
+  target,
+  event,
+  handler,
+  passive = false
+) {
+ 
+    target.addEventListener(
+      event,
+      handler,
+      passiveSupported ? { capture: false, passive } : false
+    );
+ 
+}
+
+export function off(target, event, handler) {
+    target.removeEventListener(event, handler); 
+}
+ 
+
+ 
+