组件 - 置顶按钮

1、组件

1.1、html 部分

<template>
	<div class="set_top_box">
		<p v-if="getText">{
    { getText }}p>
		<img :src="getImg" @click="setTop" />
	div>
template>

1.2、JavaScript 部分

export default {
     
	props: {
     
		getText: {
     
			type: String,
			default: () => {
     
				return '置顶';
			},
		},

		getImg: {
     
			type: String,
			default: () => {
     
				return '';
			},
		},
	},

	methods: {
     
		setTop() {
     
			// 这里是重点
			document.documentElement.scrollTop = 0;
		},
	},
};

1.3、Css 部分

.set_top_box {
     
  position: fixed;
  z-index: 999;
  right: 20px;
  bottom: 30px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.set_top_box > p {
     
  text-align: center;
  font-size: 13px;
  color: #999999;
}

.set_top_box > img {
     
  width: 36px;
  height: 36px;
  margin-top: 5px;
}

2、使用组件

2.1、html 部分

<-- 可以不传值  -->
<set-top :getText="'返回顶部'" :getImg="setTopImg">set-top>

2.2、JavaScript 部分

// 引入组件
import SetTop from '@/components/set-top/SetTop'

export default {
     
	components: {
     
		SetTop,
	},
	
	data() {
     
		return {
     
			// 不要使用绝对路径，
			// 否则会出问题
			setTopImg: require('@/img/***/setTop.png')
		}
	}
}