Maison >interface Web >js tutoriel >Utilisez c+v pour laisser vue revenir au composant supérieur
Cet article présente principalement comment utiliser c+v pour renvoyer vue au composant supérieur. Il a une certaine valeur de référence. Maintenant, je le partage avec vous. Les amis dans le besoin peuvent s'y référer
<template> <transition :name="transitionName"> <p class="back-to-ceiling" @click="backToTop" v-show="visible" :style="customStyle"> <svg width="16" height="16" viewBox="0 0 17 17" xmlns="http://www.w3.org/2000/svg" class="Icon Icon--backToTopArrow" aria-hidden="true" style="height: 16px; width: 16px;"> <title>回到顶部</title> <g> <path d="M12.036 15.59c0 .55-.453.995-.997.995H5.032c-.55 0-.997-.445-.997-.996V8.584H1.03c-1.1 0-1.36-.633-.578-1.416L7.33.29c.39-.39 1.026-.385 1.412 0l6.878 6.88c.782.78.523 1.415-.58 1.415h-3.004v7.004z" fill-rule="evenodd"></path> </g> </svg> </p> </transition> </template> <script> export default { name: 'BackToTop', props: { // 指定达到多少距离显示返回顶部按钮 visibilityHeight: { type: Number, default: 400 }, // 距离顶部的距离 backPosition: { type: Number, default: 0 }, customStyle: { type: Object, default: function() { return { right: '50px', bottom: '50px', width: '40px', height: '40px', 'border-radius': '4px', 'line-height': '45px', background: '#e7eaf1' } } }, // 过渡动画名称 transitionName: { type: String, default: 'fade' } }, data() { return { visible: false, interval: null } }, mounted() { window.addEventListener('scroll', this.handleScroll) }, beforeDestroy() { window.removeEventListener('scroll', this.handleScroll) if (this.interval) { clearInterval(this.interval) } }, methods: { handleScroll() { this.visible = window.pageYOffset > this.visibilityHeight }, backToTop() { const start = window.pageYOffset let i = 0 this.interval = setInterval(() => { const next = Math.floor(this.easeInOutQuad(10 * i, start, -start, 500)) if (next <= this.backPosition) { window.scrollTo(0, this.backPosition) clearInterval(this.interval) } else { window.scrollTo(0, next) } i++ }, 16.7) }, easeInOutQuad(t, b, c, d) { if ((t /= d / 2) < 1) return c / 2 * t * t + b return -c / 2 * (--t * (t - 2) - 1) + b } } } </script> <style scoped> .back-to-ceiling { position: fixed; display: inline-block; text-align: center; cursor: pointer; } .back-to-ceiling:hover { background: #d5dbe7; } .fade-enter-active, .fade-leave-active { transition: opacity .5s; } .fade-enter, .fade-leave-to { opacity: 0 } .back-to-ceiling .Icon { fill: #9aaabf; background: none; } </style>
<back-to-top transitionName="fade" :customStyle="myBackToTopStyle" :visibilityHeight="300" :backPosition="50"></back-to-top>
Puissiez-vous devenir un apprenant tout au long de la vie
Ce qui précède est l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'apprentissage de chacun. Pour plus de contenu connexe, s'il vous plaît. faites attention au site Web PHP chinois !
Recommandations associées :
À propos des opérations d'extension, de mixins, d'extensions, de composants, installer dans vue
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!