带有Vue 3和类型记录的Flickity API

Question

我一直在我的Vue 3应用程序中使用Flickity，当我使用带有静态单元格的硬编码HTML旋转木马时，它工作得很好。但是，我需要在运行时以编程方式添加单元格，并且无法使Flickity正确工作。

我正在尝试遵循append()的示例，但我得到了错误：

Flickity的flickity.js?1385:72坏元素：.carousel

我的巡查员在运行时。我试图遵循解决方案这里和这里，但都没有成功运行。看起来这是由于Flickity上的TypeScript错误造成的。我还安装了@types/flickity，fyi。

我能做些什么来修复下面的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>

Answer 1

看起来您可能在Vue 3中尝试了vue-flickity，但是该组件是为Vue 2构建的。。

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

1. 使用以下模板和脚本创建Flickity.vue，它在根元素上应用模板参考，并包含接收.carousel-cell元素的插槽： 导入{ defineComponent，ref }从'vue‘导出默认的defineComponent({ setup() { const = ref(null) //引用到名为" root“的模板ref返回{ root，} })
2. 声明一个options 道具，稍后我们将传递给Flickity构造函数。
3. 在组件的钩子中，使用"root"模板ref和options支柱实例化Flickity；在unmounted中，销毁Flickity实例：
4. 添加一个名为"append"的方法，允许在旋转木马中追加新元素：
5. 使用以下类型声明创建src/flickity.d.ts (如果使用VS代码，则必须重新启动IDE才能对这些类型进行索引)： 声明模块' Flickity‘{ const：{new(el: string \ HTMLElement，options?：Record)：此附加(元素: HTMLElement)破坏() select(id: string )}导出=Flickity}
6. 添加以下<style>块，这将引入flickity默认样式，并设置将在插槽中接收的.carousel-cell元素的样式：

示例用法：

<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>

演示