upd: toast

Lemon-Cai · Mar 30, 2021 · 0a915f8 · 0a915f8
1 parent 304204e
commit 0a915f8
Show file tree

Hide file tree

Showing 7 changed files with 48 additions and 44 deletions.
diff --git a/package.json b/package.json
@@ -61,6 +61,7 @@
   "devDependencies": {
     "@commitlint/cli": "^10.0.0",
     "@commitlint/config-conventional": "^10.0.0",
+    "@jd/upload-oss-tools": "^1.1.10",
     "@types/node": "^14.14.31",
     "@vitejs/plugin-vue": "^1.2.0",
     "@vue/compiler-sfc": "^3.0.5",

diff --git a/src/packages/toast/demo.vue b/src/packages/toast/demo.vue
@@ -42,10 +42,10 @@ export default createDemo({
     const { ctx } = getCurrentInstance();
 
     const textToast = msg => {
-      ctx.$toast.text(msg, { duration: 100000 });
+      ctx.$toast.text(msg, { duration: 1000 });
     };
     const successToast = msg => {
-      ctx.$toast.success(msg, { duration: 100000 });
+      ctx.$toast.success(msg, { duration: 2000 });
     };
     const errorToast = msg => {
       ctx.$toast.fail(msg);

diff --git a/src/packages/toast/doc.md b/src/packages/toast/doc.md
@@ -81,16 +81,16 @@ toast.hide();
 | duration            | 展示时长（毫秒）<br>值为 0 时，toast 不会自动消失（loading类型默认为0）       | Number        | 2000                          |
 | center              | 是否展示在页面中部（为false时展示在底部）                                     | Boolean       | true                          |
 | bottom              | 距页面底部的距离（像素），option.center为false时生效                          | Number       | 30                          |
-| textAlignCenter     | 多行文案是否居中                                                              | Boolean       | true                          |
-| bgColor             | 背景颜色（透明度）                                                            | String        | "rgba(46, 46, 46, 0.7)"       |
-| customClass         | 自定义类名                                                                    | String        | ""                            |
+| text-align-center     | 多行文案是否居中                                                              | Boolean       | true                          |
+| bg-color             | 背景颜色（透明度）                                                            | String        | "rgba(0, 0, 0, 0.8)"       |
+| custom-class         | 自定义类名                                                                    | 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                         |
-| toastStyle          | 提示框style                                                        | object       | {}                         |
-| toastClass          | 提示框class                                                        | String       | ""                         |
+| cover-color          | 遮罩层颜色，默认透明                                                          | String        | "rgba(0,0,0,0)"               |
+| loading-rotate       | loading图标是否旋转，仅对loading类型生效                                      | Boolean       | true                          |
+| on-close             | 关闭时触发的事件                                                              | function      | null                          |
+| close-on-click-overlay | 是否在点击遮罩层后关闭提示                                                    | Boolean       | false                         |
+| toast-style          | 提示框style                                                        | object       | {}                         |
+| toast-class          | 提示框class                                                        | String       | ""                         |
 
diff --git a/src/packages/toast/index.scss b/src/packages/toast/index.scss
@@ -16,60 +16,56 @@
   pointer-events: none;
   z-index: 9999;
   font-family: $font-family;
-  &.nut-toast-small {
+  &-small {
     .nut-toast-inner {
       font-size: $font-size-small;
     }
   }
-  &.nut-toast-large {
+  &-large {
     .nut-toast-inner {
       font-size: $font-size-large;
     }
   }
-  &.nut-toast-cover {
+  &-cover {
     display: flex;
     align-items: center;
     justify-content: center;
     pointer-events: auto;
     height: 100%;
   }
-  .nut-toast-inner {
-    // position: relative;
+  &-inner {
     display: inline-block;
     font-size: $font-size-base;
     min-width: 40%;
     max-width: 65%;
     text-align: center;
-    line-height: 1.5;
-    padding: 10px 30px;
+    padding: 24px 30px;
     word-break: break-all;
     background: rgba(0, 0, 0, 0);
-    border-radius: 7px;
-    color: #fff;
+    border-radius: 12px;
+    color: $white;
   }
-  .nut-toast-text {
+  &-text {
     font-size: 14px;
-  }
-  &.nut-toast-has-icon {
-    .nut-toast-inner {
-      padding: 22px 15px 15px;
+    &:empty {
+      margin-bottom: -8px;
     }
+  }
+  &-has-icon {
     .nut-toast-icon-wrapper {
       width: 100%;
-      height: 50px;
       display: flex;
       align-items: center;
       justify-content: center;
-      margin-bottom: 18px;
+      margin-bottom: 8px;
     }
   }
-  &.nut-toast-center {
+  &-center {
     top: 50%;
     transform: translateY(-50%);
   }
-  &.nut-loading {
+  &-loading {
     .nut-toast-inner {
-      padding: 25px;
       display: inline-flex;
       flex-direction: column;
       justify-content: center;
@@ -78,10 +74,6 @@
     .nut-toast-icon-wrapper {
       animation: rotation 2s linear infinite;
     }
-    .nut-toast-text:not(:empty) {
-      margin-top: 10px;
-      margin-bottom: -10px;
-    }
   }
 }
 

diff --git a/src/packages/toast/index.ts b/src/packages/toast/index.ts
@@ -13,7 +13,7 @@ const defaultOptions = {
   icon: null,
   textAlignCenter: true,
   loadingRotate: true,
-  bgColor: 'rgba(0, 0, 0, 1)',
+  bgColor: 'rgba(0, 0, 0, .8)',
   onClose: null,
   unmount: null,
   cover: false, //透明遮罩层
@@ -79,7 +79,6 @@ const mountToast = (opts: any) => {
   const instance: any = createVNode(ToastConstructor, opts);
   render(instance, container);
   document.body.appendChild(container);
-  console.log(instance.component);
   return instance.component.ctx;
 };
 
@@ -109,8 +108,7 @@ export const Toast = {
   },
   loading(msg: string, opts = {}) {
     return mountToast({
-      icon:
-        "data:image/svg+xml, %3Csvg class='icon' viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='rgb(230,230,230)' d='M874.667 533.333h-192c-12.8 0-21.334-8.533-21.334-21.333 0-12.8 8.534-21.333 21.334-21.333h192c12.8 0 21.333 8.533 21.333 21.333 0 12.8-8.533 21.333-21.333 21.333zM648.533 407.467C640 416 627.2 416 618.667 407.467c-8.534-8.534-8.534-21.334 0-29.867L755.2 241.067c8.533-8.534 21.333-8.534 29.867 0 8.533 8.533 8.533 21.333 0 29.866L648.533 407.467zM512 896c-12.8 0-21.333-8.533-21.333-21.333v-192c0-12.8 8.533-21.334 21.333-21.334s21.333 8.534 21.333 21.334v192c0 12.8-8.533 21.333-21.333 21.333zm0-533.333c-12.8 0-21.333-8.534-21.333-21.334v-192c0-12.8 8.533-21.333 21.333-21.333s21.333 8.533 21.333 21.333v192c0 12.8-8.533 21.334-21.333 21.334zM270.933 782.933c-8.533 8.534-21.333 8.534-29.866 0s-8.534-21.333 0-29.866L377.6 616.533c8.533-8.533 21.333-8.533 29.867 0 8.533 8.534 8.533 21.334 0 29.867L270.933 782.933zm104.534-375.466L238.933 270.933c-8.533-8.533-8.533-21.333 0-29.866s21.334-8.534 29.867 0L405.333 377.6c8.534 8.533 8.534 21.333 0 29.867-6.4 6.4-21.333 6.4-29.866 0zM362.667 512c0 12.8-8.534 21.333-21.334 21.333h-192C136.533 533.333 128 524.8 128 512c0-12.8 8.533-21.333 21.333-21.333h192c12.8 0 21.334 8.533 21.334 21.333zm285.866 104.533l136.534 136.534c8.533 8.533 8.533 21.333 0 29.866-8.534 8.534-21.334 8.534-29.867 0L618.667 646.4c-8.534-8.533-8.534-21.333 0-29.867 6.4-6.4 21.333-6.4 29.866 0z'/%3E%3C/svg%3E",
+      icon: 'loading',
       ...opts,
       msg,
       type: 'loading'

diff --git a/src/packages/toast/index.vue b/src/packages/toast/index.vue
@@ -17,7 +17,7 @@
         }"
       >
         <view v-if="hasIcon" class="nut-toast-icon-wrapper">
-          <nut-icon size="44px" color="#ffffff" :name="icon"></nut-icon>
+          <nut-icon size="20" color="#ffffff" :name="icon"></nut-icon>
         </view>
         <view class="nut-toast-text" v-html="msg"></view>
       </view>
@@ -65,7 +65,7 @@ export default create({
     },
     bgColor: {
       type: String,
-      default: 'rgba(0, 0, 0, 1)'
+      default: 'rgba(0, 0, 0, .8)'
     },
 
     onClose: Function,
@@ -140,7 +140,7 @@ export default create({
         { 'nut-toast-center': props.center },
         { 'nut-toast-has-icon': hasIcon.value },
         { 'nut-toast-cover': props.cover },
-        { 'nut-loading': props.type == 'loading' },
+        { 'nut-toast-loading': props.type === 'loading' },
         props.customClass,
         'nut-toast-' + props.size
       ];

diff --git a/src/sites/mobile/App.vue b/src/sites/mobile/App.vue
@@ -1,17 +1,26 @@
 <template>
-  <div v-if="title != '/'" id="nav">{{ title }}</div>
+  <div v-if="title != '/'" id="nav">
+    <span class="back" @click="goBack"><nut-icon name="left"></nut-icon></span>
+    {{ title }}
+  </div>
   <router-view />
 </template>
 <script lang="ts">
 import { defineComponent, ref, watch } from 'vue';
-import { useRoute } from 'vue-router';
+import { useRoute, useRouter } from 'vue-router';
 import { isMobile } from '@/sites/assets/util';
 export default defineComponent({
   name: 'app',
   setup() {
     const title = ref('NutUI');
     // 获取当前路由
     const route = useRoute();
+    const router = useRouter();
+
+    //返回demo页
+    const goBack = () => {
+      router.push('/');
+    };
     // 当当前路由发生变化时，调用回调函数
     watch(
       () => route,
@@ -31,7 +40,7 @@ export default defineComponent({
       }
     );
 
-    return { title };
+    return { title, goBack };
   }
 });
 </script>
@@ -57,6 +66,10 @@ export default defineComponent({
     font-size: 20px;
     color: rgba(51, 51, 51, 1);
     box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.07);
+    .back {
+      position: absolute;
+      left: 25px;
+    }
   }
 
   .demo {