Fix/toast single theme (#181)

* fix: 配置面板属性调整
vusion · Oct 19, 2023 · f7710d3 · f7710d3
1 parent f3db053
commit f7710d3
Show file tree

Hide file tree

Showing 8 changed files with 65 additions and 30 deletions.
diff --git a/scripts/genThemeConfig/property.json b/scripts/genThemeConfig/property.json
@@ -477,5 +477,6 @@
     "--van-toast-max-width": "70%",
     "--van-toast-font-size": "14px",
     "--van-toast-text-color": "#fff",
-    "--van-toast-background-color": "rgba(0, 0, 0, 0.7)"
+    "--van-toast-background-color": "rgba(0, 0, 0, 0.7)",
+    "--van-toast-custom-icon-color": "white"
 }
diff --git a/scripts/genThemeConfig/result.json b/scripts/genThemeConfig/result.json
@@ -2099,7 +2099,8 @@
                 "toPosition": "toast",
                 "type": [],
                 "preview": {
-                    "template": "<van-toast message=\"弹出消息\" :duration=\"2000\" type=\"text\" position=\"middle\"></van-toast>"
+                    "template": "<van-button @click=\"onOpen\">弹出消息</van-button>",
+                    "script": "export default {\n    data() {\n        return {\n     };\n    },\n    methods: {\n        onOpen() {\n            this.$toast.show(\"弹出消息\");\n        },\n    },\n};"
                 },
                 "cssProperty": {
                     "--van-toast-max-width": {
@@ -2117,6 +2118,10 @@
                     "--van-toast-background-color": {
                         "type": "color",
                         "desc": "弹出消息的背景色"
+                    },
+                    "--van-toast-custom-icon-color": {
+                        "type": "color",
+                        "desc": "弹出消息的自定义图标颜色"
                     }
                 }
             }

diff --git a/scripts/lcap/usage.json b/scripts/lcap/usage.json
@@ -10815,29 +10815,30 @@
                 },
                 {
                     "name": "message",
-                    "title": "文本",
+                    "title": "提示内容",
                     "type": "string",
-                    "default": "弹出消息消息",
-                    "description": "文本内容"
+                    "default": "弹出消息",
+                    "description": "默认提示内容"
                 },
                 {
                     "name": "type",
-                    "title": "类型",
+                    "title": "消息类型",
                     "type": "string",
+                    "description": "提示的类型",
                     "default": "custom",
                     "options": [
                         {
                             "value": "success",
                             "title": "成功"
                         },
-                        {
-                            "value": "fail",
-                            "title": "失败"
-                        },
                         {
                             "value": "warning",
                             "title": "警告"
                         },
+                        {
+                            "value": "fail",
+                            "title": "失败"
+                        },
                         {
                             "value": "loading",
                             "title": "加载中"
@@ -10860,10 +10861,10 @@
                 },
                 {
                     "name": "duration",
-                    "title": "展示时长",
+                    "title": "停留时间",
                     "type": "number",
                     "default": 2000,
-                    "description": "提示停留的时间。`0`表示常驻。"
+                    "description": "自动关闭的延时，单位毫秒。设为 0 时不自动关闭"
                 },
                 {
                     "name": "position",

diff --git a/src-vusion/styles/theme.css b/src-vusion/styles/theme.css
@@ -829,4 +829,5 @@
   --van-toast-font-size: 14px; /* @desc 弹出消息的字体大小 */
   --van-toast-text-color: #fff; /* @type color */ /* @desc 弹出消息的字体颜色 */
   --van-toast-background-color: rgba(0, 0, 0, 0.7); /* @type color */ /* @desc 弹出消息的背景色 */
+  --van-toast-custom-icon-color: white; /* @type color */ /* @desc 弹出消息的自定义图标颜色 */
 }
diff --git a/src/toast/Toast.designer.js b/src/toast/Toast.designer.js
@@ -96,7 +96,7 @@ export default createComponent({
 
       if (type === 'custom') {
         if (customIcon) {
-          return <Iconv class={bem('icon')} icotype="only" name={customIcon}></Iconv>;
+          return <Iconv class={bem('custom-icon')} icotype="only" name={customIcon}></Iconv>;
         }
 
         return null;
@@ -107,19 +107,21 @@ export default createComponent({
       }
 
       let name = type;
-      if (type === 'warning') {
+      let color;
+      if (type === 'success') {
+        color = '#26bd71';
+      } else if (type === 'fail') {
+        color = '#f24957';
+      } else if (type === 'warning') {
         name = 'info';
+        color = '#ffb21a';
       }
 
       const hasIcon = name;
 
       if (hasIcon) {
         return (
-          <Iconv
-            class={bem('icon')}
-            icotype="only"
-            name={name}
-          />
+          <Iconv class={bem('icon')} icotype="only" name={name} color={color} />
         );
       }
     },

diff --git a/src/toast/ToastGroup.js b/src/toast/ToastGroup.js
@@ -191,7 +191,7 @@ export default createComponent({
         if (customIcon) {
           return (
             <Iconv
-              class={bem('item__icon')}
+              class={bem('item__custom-icon')}
               icotype="only"
               name={customIcon}
             ></Iconv>
@@ -206,14 +206,28 @@ export default createComponent({
       }
 
       let name = type;
-      if (type === 'warning') {
+      let color;
+
+      if (type === 'success') {
+        color = '#26bd71';
+      } else if (type === 'fail') {
+        color = '#f24957';
+      } else if (type === 'warning') {
         name = 'info';
+        color = '#ffb21a';
       }
 
       const hasIcon = name;
 
       if (hasIcon) {
-        return <Iconv class={bem('item__icon')} icotype="only" name={name} />;
+        return (
+          <Iconv
+            class={bem('item__icon')}
+            icotype="only"
+            name={name}
+            color={color}
+          />
+        );
       }
     },
 

diff --git a/src/toast/api.yaml b/src/toast/api.yaml
@@ -14,21 +14,22 @@
       description: 是否展示弹出消息
       advanced: true
     - name: message
-      title: 文本
+      title: 提示内容
       type: string
-      default: 弹出消息消息
-      description: 文本内容
+      default: 弹出消息
+      description: 默认提示内容
     - name: type
-      title: 类型
+      title: 消息类型
       type: string
+      description: 提示的类型
       default: custom
       options:
         - value: success
           title: 成功
-        - value: fail
-          title: 失败
         - value: warning
           title: 警告
+        - value: fail
+          title: 失败
         - value: loading
           title: 加载中
         - value: custom
@@ -39,10 +40,10 @@
       dependency:
         - type: custom
     - name: duration
-      title: 展示时长
+      title: 停留时间
       type: number
       default: 2000
-      description: 提示停留的时间。`0`表示常驻。
+      description: 自动关闭的延时，单位毫秒。设为 0 时不自动关闭
     - name: position
       title: 位置
       type: string

diff --git a/src/toast/index.less b/src/toast/index.less
@@ -139,6 +139,11 @@
     font-size: @toast-icon-size;
   }
 
+  &__custom-icon {
+    font-size: @toast-icon-size;
+    color: var(--van-toast-custom-icon-color);
+  }
+
   &__loading {
     padding: @padding-base;
     color: @toast-loading-icon-color;
@@ -227,6 +232,11 @@
       font-size: @toast-icon-size;
     }
 
+    &__custom-icon {
+      font-size: @toast-icon-size;
+      color: var(--van-toast-custom-icon-color);
+    }
+
     &__loading {
       padding: @padding-base;
       color: @toast-loading-icon-color;