From f7710d370207c879968fcef4a0fc13aac2245cb4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=BE=A1=E9=A3=8E?= <18012261618@126.com>
Date: Wed, 18 Oct 2023 20:31:31 +0800
Subject: [PATCH] Fix/toast single theme (#181)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
* fix: 配置面板属性调整
---
scripts/genThemeConfig/property.json | 3 ++-
scripts/genThemeConfig/result.json | 7 ++++++-
scripts/lcap/usage.json | 21 +++++++++++----------
src-vusion/styles/theme.css | 1 +
src/toast/Toast.designer.js | 16 +++++++++-------
src/toast/ToastGroup.js | 20 +++++++++++++++++---
src/toast/api.yaml | 17 +++++++++--------
src/toast/index.less | 10 ++++++++++
8 files changed, 65 insertions(+), 30 deletions(-)
diff --git a/scripts/genThemeConfig/property.json b/scripts/genThemeConfig/property.json
index d3d69830c..b71ea894d 100644
--- 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
index 3f71607bf..d4078708e 100644
--- a/scripts/genThemeConfig/result.json
+++ b/scripts/genThemeConfig/result.json
@@ -2099,7 +2099,8 @@
"toPosition": "toast",
"type": [],
"preview": {
- "template": ""
+ "template": "弹出消息",
+ "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
index 4057020fd..1767cba91 100644
--- 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
index 4874d5684..51ddea9be 100644
--- 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
index a606cc72a..dd2f4a647 100644
--- 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 ;
+ return ;
}
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 (
-
+
);
}
},
diff --git a/src/toast/ToastGroup.js b/src/toast/ToastGroup.js
index a1d197c35..bd2450d86 100644
--- a/src/toast/ToastGroup.js
+++ b/src/toast/ToastGroup.js
@@ -191,7 +191,7 @@ export default createComponent({
if (customIcon) {
return (
@@ -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 ;
+ return (
+
+ );
}
},
diff --git a/src/toast/api.yaml b/src/toast/api.yaml
index 84c1e3646..0a1a8d6cc 100644
--- 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
index 92d2a2e84..242c6e326 100644
--- 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;