stellar-ui-v2 1.40.29 → 1.40.31

package/README.md

@@ -10,9 +10,9 @@
 
 ## ✨ 特性
 
-- 🎯 多平台覆盖，支持 微信小程序、支付宝小程序、H5.
-- 🚀 40+ 个高质量组件，覆盖移动端主流场景.
-- 📖 提供丰富的文档和组件示例.
+- 🎯 多平台覆盖，支持 微信小程序、支付宝小程序、H5.
+- 🚀 40+ 个高质量组件，覆盖移动端主流场景.
+- 📖 提供丰富的文档和组件示例.
 - 🎨 支持修改 CSS 变量实现主题定制.
 
 ## 📱 预览
@@ -75,11 +75,11 @@ npm i stellar-ui-v2 -S
 
 ## 周边生态
 
-| 项目																							| 描述															|
-| ---																							| ---															|
-|[StellarUI-Plus](https://github.com/wuhanshuzhiyun/stellar-ui-plus)							| 一个基于vue3构建，打造的uni-app组件库								|
-|[ste-vue-inset-loader](https://github.com/wuhanshuzhiyun/ste-vue-inset-loader)					|常用于小程序需要全局引入组件的场景的包								|
-|[ste-helper](https://github.com/wuhanshuzhiyun/stellar-ui-plus/tree/main/plugins/ste-helper)	|旨在帮助开发者更加有效率的使用 StellarUI-Plus来开发项目的vscode插件	|
+| 项目																							| 描述															|
+| ---																							| ---															|
+|[StellarUI-Plus](https://github.com/wuhanshuzhiyun/stellar-ui-plus)							| 一个基于vue3构建，打造的uni-app组件库								|
+|[ste-vue-inset-loader](https://github.com/wuhanshuzhiyun/ste-vue-inset-loader)					|常用于小程序需要全局引入组件的场景的包								|
+|[ste-helper](https://github.com/wuhanshuzhiyun/stellar-ui-plus/tree/main/plugins/ste-helper)	|旨在帮助开发者更加有效率的使用 StellarUI-Plus来开发项目的vscode插件	|
 |[ste-cli](https://github.com/wuhanshuzhiyun/ste-cli)											|stellar配套的脚手架												|
 
 ## 核心团队

package/components/ste-animate/README.md

@@ -90,7 +90,7 @@ export default {
 | `show`	| 控制动画，当值从`false`变为`true`时会触发一次动画					| `Boolean`	| `false`	| -		| -			|
 | `type`	| 动画类型，见下方`type`值说明										| `String`	| -			| -		| -			|
 | `loop`	| 是否循环执行。														| `Boolean`	| `false`	| -		| -			|
-| `duration`| 动画时长，单位 ms													| `Number`	|			| -		| -			|
+| `duration`| 动画时长，支持 `1500`/`"1500"`/`"1500ms"`/`"1.5s"`					| `Number/String`	| `300`		| -		| -			|
 | `action`	| 不能与 show 同时使用）触发方式，`initial`初始化执行; `click`点击执行	| `String`	| -			| -		| -			|
 
 #### 动画类型(type)
@@ -114,4 +114,4 @@ export default {
 | `default`	| 默认插槽	| -			|
 
 ---$
-{{fuyuwei}}
+{{fuyuwei}}

package/components/ste-animate/ste-animate.vue

@@ -19,23 +19,23 @@
 		},
 		props: {
 			show: {
-				type: [Boolean, null],
+				type: Boolean,
 				default: false,
 			},
 			type: {
-				type: [String, null],
+				type: String,
 				default: '',
 			},
 			loop: {
-				type: [Boolean, null],
+				type: Boolean,
 				default: false,
 			},
 			duration: {
-				type: [Number, null],
+				type: [Number, String],
 				default: 300,
 			},
 			action: {
-				type: [String, null],
+				type: String,
 				default: '',
 			},
 		},
@@ -57,8 +57,10 @@
 			},
 			cmpRootStyle() {
 				let style = {};
-				if (this.duration) {
-					style.animationDuration = this.duration;
+				const duration = this.normalizeDuration(this.duration);
+				if (duration) {
+					style.animationDuration = duration;
+					style['--ste-animate-duration'] = duration;
 				}
 				return style;
 			},
@@ -73,6 +75,25 @@
 			},
 		},
 		methods: {
+			normalizeDuration(duration) {
+				if (duration === null || duration === undefined || duration === '') {
+					return '';
+				}
+				if (typeof duration === 'number') {
+					return `${duration}ms`;
+				}
+				const val = String(duration).trim().toLowerCase();
+				if (!val) {
+					return '';
+				}
+				if (/^\d+(\.\d+)?$/.test(val)) {
+					return `${val}ms`;
+				}
+				if (/^\d+(\.\d+)?(ms|s)$/.test(val)) {
+					return val;
+				}
+				return '';
+			},
 			handleClick() {
 				if (this.action === 'click') {
 					this.animated();
@@ -176,7 +197,7 @@
 				border: 4rpx solid rgba(255, 255, 255, 0.6);
 				border-radius: 30px;
 				transform: scale(0);
-				animation: twinkle 2s ease-out infinite;
+				animation: twinkle var(--ste-animate-duration, 2s) ease-out infinite;
 			}
 
 			&::after {
@@ -199,8 +220,8 @@
 				filter: blur(6rpx);
 				opacity: 0.73;
 				transform: skew(-20deg);
-				animation: flicker 1.5s linear infinite;
+				animation: flicker var(--ste-animate-duration, 1.5s) linear infinite;
 			}
 		}
 	}
-</style>
+</style>