vue.js 更改数组索引以显示下一张幻灯片

dsekswqp 于 2023-02-24 发布在 Vue.js

关注(0)|答案(1)|浏览(109)

<template>
    <div class="carousel">
        
        <slot></slot>
         <button @click="index++">Next</button>
    </div>

</template>
<script setup>
import { useSlots, onMounted, onUpdated, ref} from 'vue';

const slots = useSlots()
const index = ref(0)
onMounted(() => {
  const defaultSlotElements = slots.default()
  console.log(`My default slot has ${defaultSlotElements.length} elements.`)
  
}),
onUpdated(() =>{
    console.log(defaultSlotElements[index])
}
)

</script>

我正在尝试创建基于插槽的carousel。感谢上一个关于堆栈溢出的人，他帮助我找到了如何提取插槽数组。现在，我正在处理另一个问题。为了创建carousel，我必须以某种方式改变数组中元素的索引。这样我就可以移动到我的carousel的下一张幻灯片。稍后我必须将它注入到我的幻灯片组件中，让V-show呈现默认为0的当前槽。但是index'的值被v-on指令改变了索引，所以它选择了数组中的下一个或上一个槽。我知道我在vue中选择了一个复杂的主题，但我不想使用基于图像数组的简单版本的carousel，因为我不能在这个里面添加另一个组件。
事实证明，我不能简单地通过改变索引arr[index]来选择数组中的下一个对象。

vue.js

来源：https://stackoverflow.com/questions/75534439/change-index-of-array-in-order-to-show-the-next-slide

1条答案

按热度按时间

oipij1gg1#

如果您真的需要使用插槽，那么您将不得不使用Vue Render Functions & JSX

<script setup>
import { useSlots, onMounted, onUpdated, ref, h} from 'vue';

const slots = useSlots()
const index = ref(0)
const current = ref(null)
onMounted(() => {
  const defaultSlotElements = slots.default()
  current.value = defaultSlotElements[0]
}),
onUpdated(() =>{
    console.log(defaultSlotElements[index])
    }
)  
const render = () => {
    return h('div', { class: 'carousel'}, [
    h('p', `My default slot has ${slots.default().length} elements.`),
    h('div', slots.default()[index.value]),
    h('p', `Picture ${ index.value + 1 }`),
    h('button', { onClick: () => { 
      index.value = index.value + 1 == slots.default().length ? 0 : index.value + 1
    } }, 'Next')
  ]);
};
</script>

<template>
    <render />
</template>

这是证监会的Playground

- 更新**

render函数可以与自定义组件一起使用。
下面尝试构建<Carousel><Slide><Lightbox></Lightbox></Slide></Carousel结构。
证监会Playground
我看不出有任何其他方法可以使用default slot而不使用render函数来构建您想要的内容。

赞(0）回复(0）举报 2023-02-24

我来回答

vue.js 更改数组索引以显示下一张幻灯片

1条答案

相关问题

热门标签

最新问答