vue返回顶部组件---自定义效果

乾卦三爻

已于 2022-06-23 14:11:25 修改

阅读量362

点赞数

分类专栏： vue 生命周期钩子函数文章标签： vue.js javascript 前端

于 2022-06-23 10:37:25 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_46325225/article/details/125422569

版权

本文介绍了如何在Vue.js项目中创建一个具有自定义效果的返回顶部组件，允许父组件通过slot来定义按钮的样式，增强灵活性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

为了使用更加灵活，中间的img可以替换成slot，由父组件来定义按钮的样式

<template>
    <div class="backtopBox" :style="{width:width,display:display,width:width+'px',height:height+'px',bottom:bottom+'px',right:right+'px',color:color}"  @click="toTop()">
        <img style="width: 100%;" src="./icon/toTop.png" alt="返回顶部">
    </div>
</template>
<script>
    export default {
   
	data () {
   
		return {
   
            display:'none',
            scrollTop:0
		}
	}