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')
}
}
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/281316.html
標籤：其他