Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
3.7k views
in Technique[技术] by (71.8m points)

关于swiper中使用elementUI中el-tooltip失效的问题?

 <div v-swiper:mySwiper="swiperOption">
    <div class="swiper-wrapper">
        <div class="swiper-slide" :key="banner" v-for="banner in banners">
            <el-tooltip effect="dark" content="Top Left 提示文字" placement="top-start">Slide 1</el-tooltip>
        </div>
    </div>
    <div class="swiper-pagination"></div>
</div>

轮播图的每一项都加了个el-tooltip组价,但是渲染失败,最终解析后的dom,为一个空的注释。
image.png

这是什么原因导致的?

相关js配置

data() {
    return {
        banners: [ '/1.jpg', '/2.jpg', '/3.jpg' ],
        swiperOption: {
            pagination: {
                el: '.swiper-pagination'
            },
        // Some Swiper option/callback...
        }
    }
},
mounted() {
    this.mySwiper.slideTo(0, 1000, false)
}

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

这种非常规用法出问题很正常.

建议把tooltip放到swipe平级的位置,通过定位移动到swipe上边,然后通过监听swipe切换事件来切换内容.


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...