在components文件夹下创建 ClientHeight.vue 和 index.js 文件
< template>
< div class = "th-back-top" v- show= "flag" @click= "clickHidden" >
< span class = "bg-back2top2" > < / span>
< / div>
< / template>
< script>
export default {
name: "BackTop" ,
data ( ) {
return {
flag: false
}
} ,
mounted ( ) {
window. addEventListener ( "scroll" , ( ) => {
let scrollTop = document. documentElement. scrollTop;
if ( scrollTop > 100 ) {
this . flag = true ;
} else {
this . flag = false ;
}
} )
} ,
methods: {
clickHidden ( ) {
document. documentElement. scrollTop = 0 ;
}
}
}
< / script>
< style scoped>
. th- back- top{
position: fixed;
right: 15 px;
bottom: 104 px;
height: 39 px;
width: 80 px;
z- index: 9 ;
opacity: 0.8 ;
text- align: right;
}
. bg- back2top2 {
display: inline- block;
background: url (
no- repeat 0 0 ;
- webkit- background- size: 39 px 39 px;
background- size: 39 px 39 px;
width: 39 px;
height: 39 px;
}
< / style>
同级 index.js 导出
import ClientHeight from './AA/ClientHeight'
export default ( Vue) => {
Vue. component ( ClientHeight. name, ClientHeight) ;
}
main.js 文件引入
import ClientHeight from './components/ClientHeight/index'
Vue. use ( ClientHeight) ;
App 中使用 :<ClientHeight/>