jiazhipeng 4 months ago
parent
commit
e0598b9bd3
  1. 68
      components/chapter3/RandomImage.vue

68
components/chapter3/RandomImage.vue

@ -1,5 +1,6 @@
<template> <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"> <view v-if="selectedItem" class="random-image-name">
{{selectedItem.name}} {{selectedItem.name}}
</view> </view>
@ -7,54 +8,65 @@
{{selectedItem.desc}} {{selectedItem.desc}}
</view> </view>
<MusicControl /> <MusicControl />
</view>
</template> </template>
<script setup> <script>
import { import MusicControl from './MusicControl.vue'
ref,
onMounted
} from 'vue'
const props = defineProps({ export default {
components: {
MusicControl
},
props: {
images: { images: {
type: Array, type: Array,
required: true 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> </script>
<style scoped> <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%;
@ -64,5 +76,5 @@
font-size: 24rpx; font-size: 24rpx;
font-weight: 300; font-weight: 300;
opacity: .8; opacity: .8;
} }
</style> </style>
Loading…
Cancel
Save