使用 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
组件:
使用以下模板和脚本创建 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>
声明一个 options
prop,稍后我们将把它传递给 Flickity
构造函数。
<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
props: {
options: Object,
}
})
</script>
在组件的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>
添加名为 "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>
使用以下类型声明创建 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
}
添加以下 <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>
我一直在我的 Vue 3 应用程序中使用 Flickity,当我使用带有静态单元格的硬编码 HTML 轮播时它工作正常。但是,我需要在 运行 时间以编程方式添加单元格,但我无法让 Flickity API 正常工作。
我尝试按照 append()
示例进行操作,但出现错误:
flickity.js?1385:72 Bad element for Flickity: .carousel
在我的检查员 运行 时间内。我尝试遵循解决方案 @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
组件:
使用以下模板和脚本创建
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>
声明一个
options
prop,稍后我们将把它传递给Flickity
构造函数。<script lang="ts"> import { defineComponent } from 'vue' export default defineComponent({ props: { options: Object, } }) </script>
在组件的
mounted
hook, instantiateFlickity
with the"root"
template ref and theoptions
prop; and inunmounted
中,销毁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>
添加名为
"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>
使用以下类型声明创建
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 }
添加以下
<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>