简体   繁体   English

如何在 vue.js 中销毁 slider vue-awesome-swiper?

[英]How to destroy slider vue-awesome-swiper in vue.js?

I need to destroy vue-awesome-swiper on desktop and leave on tablet screen.我需要销毁桌面上的 vue-awesome-swiper 并留在平板电脑屏幕上。 exactly destroy, and not disable swipe.完全销毁,而不是禁用滑动。 But can I destroy swiper?但是我可以摧毁 swiper 吗? In directive:options I pass params and component-tag swiper will be worked in any case.在指令:选项中,我传递了参数,并且组件标签 swiper 在任何情况下都将起作用。 Only without passed params只有没有传递的参数

   <template lang="pug">
    .app
      swiper(:options="swiperOptions")
        swiper-slide(
          v-for="(slide, idx) in slides"
          :key="idx"
          )

    <script>

    import { swiper, swiperSlide } from 'vue-awesome-swiper'

    export default {
      name: 'MySlider',
      components: {
        swiper,
        swiperSlide
      },
      data() {
        return {
          slides: [
            {
              title: 'Заголовок 1',
              img: 'title.jpg',
            },
            {
              title: 'title2',
              img: 'slide2.jpg',
            },
            {
              title: 'title3',
              img: 'slide3.jpg',
            }
        ],
          swiperOptions: {
            slidesPerView: 5,
            spaceBetween: 21,
            // allowTouchMove: false,
            breakpoints: {
              992: {
                slidesPerView: 3,
                spaceBetween: 25,
              },
              768: {
                slidesPerView: 3.7,
                spaceBetween: 22,
              },
              640: {
                slidesPerView: 2.2,
                spaceBetween: 15,
                initialSlide: 0,
                centeredSlides: false,
              }
            },
          },
        }
      },

What about using v-if on swiper element so it won't be rendered when viewed on desktop?swiper元素上使用 v-if 怎么样,这样在桌面上查看时它不会被渲染?

You would create a method that detects if the client is desktop or tablet and pass the result to the v-if attribute.您将创建一个方法来检测客户端是台式机还是平板电脑,并将结果传递给v-if属性。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 如何仅在移动网格上使用 vue-awesome-swiper 组件 - How to use vue-awesome-swiper component only on mobile grid vue-awesome-swiper和回调函数 - vue-awesome-swiper and callback functions vue-awesome-swiper / 按钮名称是共享的,所以其他 swiper 也会移动 - vue-awesome-swiper / The button name is shared, so other swiper move as well 我如何最初将幻灯片容器设置为距左边距 10%,当到达末端时,距右边距 10%? (vue-awesome-swiper) - How can I initially set a slide container to be 10% away from left margin and when reached the end, 10% away from right margin? (vue-awesome-swiper) Swiper 无法与 vue.js 一起正常工作 - Swiper is not working correctly with vue.js Vue.js:如何更改Vue2-slider组件的colors - Vue.js: How to change the colors of Vue2-slider component 如何在Vue.js中添加不同的字体真棒图标 - How to add different font awesome icons in Vue.js 如何在 Vue.js 中动态添加字体真棒图标 - How to add a font awesome icon dynamically in Vue.js Vue.js - 如何使用三元运算符在 vue 中返回 html 和字体真棒图标 - Vue.js - How to use ternary operator to return html in vue with font awesome icons 使用Vue.js和vue-router构建SPA时如何销毁组件? - How to destroy a component when building SPA with Vue.js and vue-router?
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM