1

components/chapter3/RandomImage.vue

@@ -1,68 +1,80 @@
 <template>
-	<image v-if="selectedItem" :src="selectedItem.image" class="random-image" mode="" />
+  <view>
-	<view v-if="selectedItem" class="random-image-name">
+    <image v-if="selectedItem" :src="selectedItem.image" class="random-image" mode=""></image>
-		{{selectedItem.name}}
+    <view v-if="selectedItem" class="random-image-name">
-	</view>
+      {{selectedItem.name}}
-	<view v-if="selectedItem" class="random-image-desc">
+    </view>
-		{{selectedItem.desc}}
+    <view v-if="selectedItem" class="random-image-desc">
-	</view>
+      {{selectedItem.desc}}
-	<MusicControl />
+    </view>
+    <MusicControl />
+  </view>
 </template>
 
-<script setup>
+<script>
-	import {
+import MusicControl from './MusicControl.vue'
-		ref,
-		onMounted
-	} from 'vue'
 
-	const props = defineProps({
+export default {
-		images: {
+  components: {
-			type: Array,
+    MusicControl
-			required: true
+  },
-		}
+  props: {
-	})
+    images: {
-	const selectedItem = ref(null)
+      type: Array,
-
+      required: true
-	// 随机选择一项
+    }
-	const selectRandomImage = () => {
+  },
-		if (props.images && props.images.length > 0) {
+  data() {
-			const randomIndex = Math.floor(Math.random() * props.images.length)
+    return {
-			selectedItem.value = props.images[randomIndex]
+      selectedItem: null
-		}
+    }
-	}
+  },
-	onMounted(() => {
+  mounted() {
-		selectRandomImage()
+    this.selectRandomImage()
-	})
+  },
-	defineExpose({
+  methods: {
-		selectRandomImage,
+    selectRandomImage() {
-		selectedItem
+      if (this.images && this.images.length > 0) {
-	})
+        const randomIndex = Math.floor(Math.random() * this.images.length)
+        this.selectedItem = this.images[randomIndex]
+      }
+    }
+  },
+  computed: {
+    exposedMethods() {
+      return {
+        selectRandomImage: this.selectRandomImage,
+        selectedItem: this.selectedItem
+      }
+    }
+  }
+}
 </script>
 
 <style scoped>
-	.random-image {
+.random-image {
-		width: 100%;
+  width: 100%;
-		height: 100%;
+  height: 100%;
-	}
+}
 
-	.random-image-name {
+.random-image-name {
-		position: absolute;
+  position: absolute;
-		bottom: 30%;
+  bottom: 30%;
-		left: 50%;
+  left: 50%;
-		transform: translate(-50%, -50%);
+  transform: translate(-50%, -50%);
-		color: #ffffff;
+  color: #ffffff;
-		font-size: 52rpx;
+  font-size: 52rpx;
-	}
+}
 
-	.random-image-desc {
+.random-image-desc {
-		white-space: nowrap;
+  white-space: nowrap;
-		position: absolute;
+  position: absolute;
-		bottom: 25%;
+  bottom: 25%;
-		left: 50%;
+  left: 50%;
-		transform: translate(-50%, -50%);
+  transform: translate(-50%, -50%);
-		color: #ffffff;
+  color: #ffffff;
-		font-size: 24rpx;
+  font-size: 24rpx;
-		font-weight: 300;
+  font-weight: 300;
-		opacity: .8;
+  opacity: .8;
-	}
+}
 </style>