在Vue.js中可以使用发光吗?

Question

我正在尝试使用vue.js和Laravel创建照片网站，并在点击照片时使用发光来放大照片。我的照片存储在AWS S3桶中。

我的vue.js结构如下:

1. photocomponent.vue

• 这个组件逐字渲染每张照片。

<template>
<div class="photo">
<a class="luminous" :href="item.url">
<img class="photo_image" :src="item.url" :alt="`photo taken by ~~`">
</a>
</div>
</template>
<script>
export default {
name: "PhotoComponent.vue",
props: {
item: { // this item has photo info(like url)
type: Object, 
required: true
}
},
}
</script>
<style scoped>

</style>

2. photolistcomponent.vue

• 这个组件正在制作PhotoComponent.vue的列表。

<template>
<div class="photo-list">
<div class="grid">
<PhotoComponent
class="grid_item"
v-for="photo in photos"
:key="photo.id"
:item="photo"
></PhotoComponent>
</div>
<PaginateComponent :current-page="currentPage" :last-page="lastPage"></PaginateComponent>
</div>
</template>
<script>
import {OK} from '../util';
import PhotoComponent from "./PhotoComponent";
import PaginateComponent from "./PaginateComponent";
export default {
name: "PhotoListComponent.vue",
components: {
PhotoComponent,
PaginateComponent
},
props: {
page: {
type: Number,
required: false,
default: 1,
}
},
data() {
return {
photos: [],
currentPage: 0,
lastPage: 0
}
},
methods: {
async fetchPhotos() { // I get each photo information through this method.
const response = await axios.get(`/api/photos/?page=${this.page}`);
if (response.status !== OK) {
this.$store.commit('error/setCode', response.status);
return false;
}
this.photos = response.data.data;
this.currentPage = response.data.current_page;
this.lastPage = response.data.last_page;
},
},
watch: {
$route: {
async handler() {
await this.fetchPhotos();
},
immediate: true,
}
},
}
</script>
<style scoped>
</style>

到目前为止，我已经尝试了三件事。

1. 在PhotoComponent中添加new Luminous()，并将该函数放在mounted section中。

<template>
<div class="photo">
<a class="luminous" :href="item.url">
<img class="photo_image" :src="item.url" :alt="`photo taken by ~~`">
</a>
</div>
</template>
<script>
import { Luminous } from 'luminous-lightbox';
export default {
name: "PhotoComponent.vue",
props: {
item: { // this item has photo info(like url)
type: Object, 
required: true
}
},
methods: {
luminous() {
new Luminous(document.querySelector(".luminous"));
}
},
mounted: {
this.luminous();
}
}
</script>

在这种情况下，第一张图片可以工作，但是"打开和PhotoComponent.vue一样多的组件。例如，如果我在PhotoListComponent中创建一个包含9张图片的列表，然后点击第一张照片，"打开9次。但是，其他图片根本不起作用，但是新选项卡打开了。

2. 将new LuminousGallery()放在PhotoListComponent中，并将该函数放在mounted section中。

<template>
<div class="photo-list">
<div class="grid">
<PhotoComponent
class="grid_item"
v-for="photo in photos"
:key="photo.id"
:item="photo"
></PhotoComponent>
</div>
<PaginateComponent :current-page="currentPage" :last-page="lastPage"></PaginateComponent>
</div>
</template>
<script>
import {OK} from '../util';
import PhotoComponent from "./PhotoComponent";
import PaginateComponent from "./PaginateComponent";
import {LuminousGallery} from 'luminous-lightbox';
export default {
name: "PhotoListComponent.vue",
components: {
PhotoComponent,
PaginateComponent
},
props: {
page: {
type: Number,
required: false,
default: 1,
}
},
data() {
return {
photos: [],
currentPage: 0,
lastPage: 0
}
},
methods: {
async fetchPhotos() { // I get each photo information through this method.
const response = await axios.get(`/api/photos/?page=${this.page}`);
if (response.status !== OK) {
this.$store.commit('error/setCode', response.status);
return false;
}
this.photos = response.data.data;
this.currentPage = response.data.current_page;
this.lastPage = response.data.last_page;
},
luminous() {
new LuminousGallery(document.querySelectorAll('.luminous'));
},
},
watch: {
$route: {
async handler() {
await this.fetchPhotos();
},
immediate: true,
}
},
mounted: {
this.luminous();
}.
}
</script>

在这种情况下，只要点击照片，就会打开一个新标签，这意味着发光不起作用。

3. 未挂载，但在这些组件中添加了点击事件
例如…

<template>
<div class="photo">
<a class="luminous" :href="item.url" @click.prevent="luminous">
<img class="photo_image" :src="item.url" :alt="`photo taken by ~~`">
</a>
</div>
</template>
<script>
import { Luminous } from 'luminous-lightbox';
export default {
name: "PhotoComponent.vue",
props: {
item: { // this item has photo info(like url)
type: Object, 
required: true
}
},
methods: {
luminous() {
new Luminous(document.querySelector(".luminous"));
}
},
}
</script>

在这种情况下，结果与模式1几乎相同，但第一张图片如我预期的那样完美地工作。但是，其他图片不能打开任何东西，甚至不能打开一个新标签页。

对不起，我咆哮了。这个问题困扰了我一个星期。我真的需要别人的帮助。谢谢您的合作。

Answer 1

Konnichiwa @wadakatu, Fred来自@imgix这里(Luminous的维护者)。

你应该能够使你所有的解决方案工作。

对于1/我认为你需要能够只针对存在于该组件中的图像，所以像这样的东西可以工作:

<template>
<div class="photo">
<a class="luminous" :href="item.url">
<img class="photo_image" :src="item.url" :alt="`photo taken by ~~`" />
</a>
</div>
</template>
<script>
import { Luminous } from "luminous-lightbox";
export default {
name: "PhotoComponent.vue",
props: {
item: {
// this item has photo info(like url)
type: Object,
required: true,
},
},
methods: {
luminous() {
// only look for relevant elements *inside* this component. Should only match one element
new Luminous(this.$el.querySelector(".luminous"));
},
},
mounted() {
this.luminous();
},
};
</script>

对于2/我认为可能存在一个问题，代码实际上没有找到图像元素，因此没有为LuminousGallery调用提供任何东西。也许你可以试着调试它来找到你的问题。