1

components/chapter3/RandomImage.vue

@@ -1,5 +1,6 @@
 <template>
-	<image v-if="selectedItem" :src="selectedItem.image" class="random-image" mode="" />
+  <view>
+    <image v-if="selectedItem" :src="selectedItem.image" class="random-image" mode=""></image>
     <view v-if="selectedItem" class="random-image-name">
       {{selectedItem.name}}
     </view>
@@ -7,36 +8,47 @@
       {{selectedItem.desc}}
     </view>
     <MusicControl />
+  </view>
 </template>
 
-<script setup>
+<script>
-	import {
+import MusicControl from './MusicControl.vue'
-		ref,
-		onMounted
-	} from 'vue'
 
-	const props = defineProps({
+export default {
+  components: {
+    MusicControl
+  },
+  props: {
     images: {
       type: Array,
       required: true
     }
-	})
+  },
-	const selectedItem = ref(null)
+  data() {
-
+    return {
-	// 随机选择一项
+      selectedItem: null
-	const selectRandomImage = () => {
+    }
-		if (props.images && props.images.length > 0) {
+  },
-			const randomIndex = Math.floor(Math.random() * props.images.length)
+  mounted() {
-			selectedItem.value = props.images[randomIndex]
+    this.selectRandomImage()
+  },
+  methods: {
+    selectRandomImage() {
+      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
+      }
+    }
   }
 }
-	onMounted(() => {
-		selectRandomImage()
-	})
-	defineExpose({
-		selectRandomImage,
-		selectedItem
-	})
 </script>
 
 <style scoped>