使用 Vue 3 和 Typescript 的 Flickity API

Flickity API with Vue 3 and Typescript

我一直在我的 Vue 3 应用程序中使用 Flickity,当我使用带有静态单元格的硬编码 HTML 轮播时它工作正常。但是,我需要在 运行 时间以编程方式添加单元格,但我无法让 Flickity API 正常工作。

我尝试按照 append() 示例进行操作,但出现错误:

flickity.js?1385:72 Bad element for Flickity: .carousel

在我的检查员 运行 时间内。我尝试遵循解决方案 and here,但都无法 运行 成功。看起来这是由于 Flickity 库上的 TypeScript 错误造成的。我也安装了@types/flickity,仅供参考。

我该怎么做才能修复下面的 append 逻辑?

<template>
        <div class="row">
          <div class="col d-block m-auto payment-option">
            <flickity ref="carousel" :options="flickityOptions">
            </flickity>
          </div>
      </div>
</template>

<script lang="ts">
import {defineComponent} from "vue";
//import Flickity from 'vue-flickity/src/flickity.vue';
import Flickity from 'flickity'
export default defineComponent({
  name: "PageName",
  components: {
    Flickity
  },
  data() {
    return {
      flickityOptions: {
        initialIndex: 3,
        prevNextButtons: false,
        pageDots: true,
        wrapAround: true
      }
    };
  },
  methods: {
    createBankAccountCarousel(flkty: Flickity) {
      flkty.append(this.makeFlickityCell())
    },
    makeFlickityCell() {
      const cell = document.createElement('div');
      cell.className = 'carousel-cell'
      cell.textContent = "Hi"
      return cell
    }
  },
  mounted() {
    let flkty = new Flickity(this.$refs.carousel)
    this.createBankAccountCarousel(flkty)
  }
});
</script>

看起来您可能正在尝试 vue-flickity in Vue 3, but that component was built for Vue 2

您可以在 Vue 3 中创建自己的 Flickity 组件:

  1. 使用以下模板和脚本创建 Flickity.vue,它应用 template ref on the root element, and contains a slot 来接收 .carousel-cell 元素:

    <template>
      <!--  template ref -->
      <div ref="root" class="flickity">
        <slot />
      </div>
    </template>
    
    <script lang="ts">
    import { defineComponent, ref } from 'vue'
    
    export default defineComponent({
      setup() {
        const root = ref<HTMLElement | null>(null) // reference to template ref named "root"
        return {
          root,
        }
      }
    })
    </script>
    
  2. 声明一个 options prop,稍后我们将把它传递给 Flickity 构造函数。

    <script lang="ts">
    import { defineComponent } from 'vue'
    
    export default defineComponent({
      props: {
        options: Object,
      }
    })
    </script>
    
  3. 在组件的mounted hook, instantiate Flickity with the "root" template ref and the options prop; and in unmounted中,销毁Flickity实例:

    <script lang="ts">
    import { defineComponent, onMounted, onUnmounted } from 'vue'
    import Flickity from 'flickity'
    
    export default defineComponent({
      setup(props) {
        let flickity: typeof Flickity | null = null
        onMounted(() => flickity = new Flickity(root.value as HTMLElement, props.options))
        onUnmounted(() => flickity?.destroy())
      }
    })
    </script>
    
  4. 添加名为 "append" 的方法以允许将新元素附加到轮播:

    <script lang="ts">
    import { defineComponent } from 'vue'
    import Flickity from 'flickity'
    
    export default defineComponent({
      setup() {
        let flickity: typeof Flickity | null = null
        return {
          append(element: HTMLElement) {
            flickity?.append(element)
            flickity?.select(-1)
          }
        }
      }
    })
    </script>
    
  5. 使用以下类型声明创建 src/flickity.d.ts(如果使用 VS Code,您必须重新启动 IDE 才能对这些类型进行索引):

    declare module 'flickity' {
      const Flickity: {
        new (el: string | HTMLElement, options?: Record<string, unknown>): this
        append(element: HTMLElement)
        destroy()
        select(id: string | number)
      }
      export = Flickity
    }
    
  6. 添加以下 <style> 块,它引入 flickity 默认样式,并设置将在插槽中接收的 .carousel-cell 元素的样式:

    <style scoped>
    @import '~flickity/dist/flickity.css';
    
    .flickity .carousel {
      background: #EEE;
      margin-bottom: 40px;
    }
    /* use ::v-deep to get at slot elements */
    .flickity::v-deep .carousel-cell {
      height: 200px;
      width: 25%;
      margin: 0 10px;
      background: #6C6;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 8px;
    }
    </style>
    

用法示例:

<template>
  <div class="app">
    <flickity ref="flickity" :options="flickityOptions">
      <div class="carousel-cell">1</div>
      <div class="carousel-cell">2</div>
      <div class="carousel-cell">3</div>
    </flickity>
    <div class="actions">
      <button @click="addElement">Append element</button>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import Flickity from './components/Flickity.vue'

export default defineComponent({
  name: 'App',
  components: {
    Flickity
  },
  data() {
    return {
      flickityOptions: {
        pageDots: true,
        wrapAround: true,
      }
    }
  },
  methods: {
    addElement() {
      // eslint-disable-next-line @typescript-eslint/no-explicit-any
      (this.$refs.flickity as any).append(this.makeFlickityCell())
    },
    makeFlickityCell() {
      const cell = document.createElement('div')
      cell.className = 'carousel-cell'
      cell.textContent = 'Hi'
      return cell
    }
  }
})
</script>

<style scoped>
.app {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  height: 50vh;
}
</style>

demo