如何在Vue.js中创建插槽索引数组？

chhqkbe1 于 2023-03-03 发布在 Vue.js

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

我正在创建我自己的carousel，在其中添加图像。我认为在vue中创建carousel组件的方法更加灵活，因为我想在我的carousel的插槽中添加内部LightBox组件. I think that the method of creating carousel component in vue is way more flexible because I want to add inside LightBox component inside my carousel's slots
这是我的父组件转盘

<template>
    <div class="carousel">
        {{ slides }}
        <slot></slot>
</div>

</template>
<script>
import { ref } from 'vue';
export default{
    data(){
        return{
            Currentslide: 0,
        }
    },
    setup(props, {slots}){
        const slides=ref(slots.default().map((slides) => slides.props.id))
        return{
            slides,
        }
    }
}

</script>

这是我的子组件幻灯片
x一个一个一个一个x一个一个二个x
使用世界上最低效的方法，我可以创建一个slots索引数组，但这是解决这个问题的最差方法，因此，我想探索另一种从Vue.js中的slots提取ID的方法

vue.js

来源：https://stackoverflow.com/questions/75525260/how-to-create-an-array-of-slots-indices-in-vue-js

1条答案

按热度按时间

63lcw9qa1#

你真的需要老虎机吗？我想可以简单得多。

看操场

const { createApp } = Vue;

const MyImg = {
  props: ['src'],
  template: '<img :src="src" class="image" />'
}

const MyGallery= {
  components: { MyImg },
  props: ['images'],
  data() {
    return {
        current: 0
        }
  },
  methods: {
    prev() {
      this.current--;
      if (this.current < 0) this.current = this.images.length - 1;
    },
    next() {
      this.current++;
      if (this.current > this.images.length -1) this.current = 0;
    }
  },
  template: '#my-gallery'
}

const App = { 
  components: { MyGallery },
  data() {
    return {
        images: [
        'https://images.unsplash.com/photo-1517423568366-8b83523034fd?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=300&q=80',
        'https://images.unsplash.com/photo-1609910063430-33fc20be9f88?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=300&q=80',
        'https://images.unsplash.com/photo-1576138089064-2ca7edab2f49?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=300&q=80',
        'https://images.unsplash.com/photo-1612637306950-fd33786d912e?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=300&q=80'        
        ]
    }
  }
}
const app = createApp(App)
app.mount('#app')

#app { line-height: 2; }
[v-cloak] { display: none; }
label { font-weight: bold; }
.container {
  min-height: 320px;
}
.image {
  max-width: 300px;
  max-height: 300px;
  position: absolute;  
}

.slide-left-enter-active,
.slide-left-leave-active {
  transition: all 0.3s ease-out;
}

.slide-left-enter-from {
  opacity: 0;
  transform: translateX(150px);
}

.slide-left-leave-to {
  opacity: 0;
  transform: translateX(-150px);
}

<div id="app">
<div class="container">
  <my-gallery :images="images">
  </my-gallery>
</div>
<p>Pictures &copy Unsplash</p>
</div>

<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
<script type="text/x-template" id="my-gallery">
<button @click="prev()">&lt;</button>&nbsp;Bild {{current + 1}}
  <button @click="next()">&gt;</button>
  <br />
  <transition-group name="slide-left">
    <my-img v-for="(img, index) in images" v-show="current == index" :key="index" :src="img">
    </my-img>
  </transition-group> 
</script>

赞(0）回复(0）举报 2023-03-03

我来回答

如何在Vue.js中创建插槽索引数组？

1条答案

看操场

相关问题

热门标签

最新问答