合并

component/public/donghua.vue

@@ -1,3 +1,24 @@
+<!-- 使用示例 已经全局暴露直接用就行 注意！这个组件的性能不如用AE写的动画-->
+<!-- <donghua :width="`1300rpx`" :height="`900rpx`" :links="blueArray" :playing="photoplay" :loop="true" :interval="120" /> -->
+<!-- 注意看参数是什么意思 -->
+<!-- 通用的生成函数 这个方法可以快速让你写出图片数组
+	function genPaths(base, prefix, count, ext = 'png', startIndex = 0, pad = false) {
+		return Array.from({ length: count }, (_, i) => {
+			const idx = pad
+				? String(i + startIndex).padStart(2, '0')
+				: i + startIndex
+			return `${base}/${prefix}${idx}.${ext}`
+		})
+	} -->
+<!-- 数组的示例
+	const leftArray = ref(genPaths(
+		'/static/index/newindex/leftmenu',地址
+		'',图片前缀
+		3,     // 一共加一起多少张图片
+		'png',	类型
+		0,     // 起始索引
+		false  // 不补零
+	)) -->
 <template>
 	<view>
 		<image :src="isError ? defaultImage : links[currentIndex]" :style="{ width: width, height: height }"
@@ -17,10 +38,12 @@
 
 	// 定义组件的 props
 	const props = defineProps({
+		// links是图片地址所组成的数组
 		links: {
 			type: Array,
 			default: () => []
 		},
+		// 长宽的值可以传任何类型
 		width: {
 			type: String,
 			default: '65rpx'
@@ -29,26 +52,32 @@
 			type: String,
 			default: '65rpx'
 		},
+		// 展示的动画中每一帧的图片类型
 		objectFit: {
 			type: String,
 			default: 'aspectFill'
 		},
+		// 动画如果加载失败，展示的图片
 		defaultImage: {
 			type: String,
 			default: ''
 		},
+		// 注意这是每一帧图片的间隔，这个值越小加载的越快
 		interval: {
 			type: Number,
 			default: 80
 		},
+		// 注意，因为这是监听的机制，所以默认转态必须是false，然后在mounted这类钩子或按钮变成true来播放
 		playing: {
 			type: Boolean,
 			default: false
 		},
+		// 展示是否停止、开启动画的按钮
 		showButton: {
 			type: Boolean,
 			default: false
 		},
+		// 重要：动画时候会不停的循环
 		loop: {
 			type: Boolean,
 			default: false