小编Aly*_*lex的帖子

这可能是一个简单的问题，但我似乎找不到解决方案。

我正在使用 vue-awesome-swiper( https://github.surmon.me/vue-awesome-swiper/ )。我想要这样的东西：

左侧初始边距为 10%：

当内部幻灯片可见时，它们左右接触（全宽拉伸）：

当到达最后一张幻灯片时，右边距为 10%：

示例可以在这里找到： https: //github.surmon.me/vue-awesome-swiper/。

我添加margin-left:10%;到了swiper-wrapper适合我的类作为初始边距，但这涵盖了我的最后一张幻灯片，因为内容移动了 10%。我希望在到达最后一张幻灯片时删除 margin-left，反之亦然。

我尝试查看事件（https://swiperjs.com/api/#events）：reachEnd和reachBeginning。这两个，我尝试像这样申请：

<template>
<div>
      <swiper
        class="swiper"
        :options="swiperOption"
        :reach-beginning="handleTransitionStart"
        :reach-end="handleTransitionEnd"
        :style="transitionStarted ? { margin: '0 0 0 10%' } : { margin: '0 10% 0 0' }"

      >
.....
</swiper>
</div>
</template>

<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';

@Component
export default class InformationSection extends Vue {
  @Prop() 'reachEnd'!: any;
  @Prop() 'reachBeginning'!: …

我正在使用 vue-awesome-swiper 并按照以下步骤操作：https : //github.com/surmon-china/vue-awesome-swiper。我选择在 Nuxt js 中全局注册这个插件。

问题：Dev 工作得非常好，幻灯片在每个页面上，导航工作正常。另一方面，生产中的所有幻灯片都在第一页上，导航在这里工作，其他页面留空，因为所有幻灯片都在第一页上。

在开发上：

关于生产：

这些是我的文件：

插件/VueAwesomeSwiper.js

import Vue from 'vue';
import VueAwesomeSwiper from 'vue-awesome-swiper';

// import style
import 'swiper/css/swiper.css';

Vue.use(VueAwesomeSwiper);

nuxt.config.js

...
css: [], <--- Do I need to add something to add here?
plugins: [
    { src: '~/plugins/VueAwesomeSwiper.js' },
  ]
...

滑块.vue

<template>
  <div>
      <swiper class="swiper" :options="swiperOption">
        <swiper-slide>Slide 1</swiper-slide>
        <swiper-slide>Slide 2</swiper-slide>
        <swiper-slide>Slide 3</swiper-slide>
        <swiper-slide>Slide 4</swiper-slide>
        <swiper-slide>Slide 5</swiper-slide>
        <swiper-slide>Slide 6</swiper-slide>
        <swiper-slide>Slide 7</swiper-slide>
        <swiper-slide>Slide 8</swiper-slide>
        <swiper-slide>Slide 9</swiper-slide>
        <swiper-slide>Slide 10</swiper-slide>
        <div …

<div>
  <b-btn v-b-modal="'productModal'" class="more_details_button" @click="chooseProduct(product)" product_item="'product'">More Info</b-btn>
</div>

<b-modal v-if="chosenProduct" hide-footer="true" ok-title="Buy Now" modal-title="{{ chosenProduct.Name }}">...</b-modal>

这就是我上面的。我想更改模式标题的名称。 chosenProduct()是我的方法之一，Name也是我数据库中的一列。我不确定如何在 . 领域中表示我的数据库中的数据元素之一modal-title。我尝试过绑定它，但:modal-title="chosenProduct.Name"似乎没有任何作用。希望得到一些帮助。谢谢！