0

我正在使用 vue-slick-carousel 来构建一个滑块。我包装为链接的图像有问题。当我单击图像重定向时不会发生。此外，我在图像下还有一个标题，我也将其包装为链接，并且带有文本效果很好，但是当我单击图像时却没有。它不仅在移动设备上工作，在桌面上当我点击图像时它会重定向。

这是我的代码：

 <VueSlickCarousel
            ref="slick"
            v-bind="slickOptions"
            class="post-category__slider"
          >
            <div
              v-for="post in posts"
              :key="`post-${post.id}`"
              class="post-category__list-item"
            >
              <div class="row">
                <div class="col-lg-6">
                  <div
                    class="post-category__list-item-image mb-4"
                  >
                    <a
                      :href="`/${item.slug}/${post.slug}`"
                    >
                      <img
                        :src="$store.state.env.panelUrl + post.get_thumbnail"
                        :alt="post.title"
                      >
                    </a>
                  </div>
                </div>
                <div class="col-lg-6">
                  <div class="d-lg-flex flex-lg-wrap flex-lg-column justify-content-lg-between h-100">
                    <div class="mb-4">
                      <h4 class="post-card__text-block-title">
                        <a :href="`/${item.slug}/${post.slug}`">
                          {{ post.title }}
                        </a>
                      </h4>
                      <div>
                        {{ post.short_story }}
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </VueSlickCarousel>
4

2 回答 2

2

尝试添加pointer-events: none到图像。它应该可以解决问题。

于 2020-06-28T22:47:24.323 回答
0

请分享您的属性以获得更好的图片，也尝试仅添加属性及其对象，如下所示：:href="item.slug/post.slug"，但为了更好的参考，请提供您的属性。

于 2020-06-28T21:41:47.957 回答