element的BackTop(回到顶部)组件的使用。
封装Backtop在components下的新建BackToTop 文件夹,在文件夹下新建backToTop.vuebackToTop.vue<template><div class="backto-top-bg"><el-backtop:target="eleSelector":visibility-height="30...
·
封装Backtop
在components下的新建BackToTop 文件夹,在文件夹下新建backToTop.vue
- backToTop.vue
<template>
<div>
<el-backtop
:target="eleSelector"
:bottom="50"
:visibility-height="30"
@click="backTop"
:right="50"
>
<el-tooltip
class="item"
effect="dark"
content="回到顶部"
placement="left-start"
>
<div class="backto-top-icon-box">
<el-button>
<span class=" el-icon-arrow-up backto-top-icon"></span>
</el-button>
</div>
</el-tooltip>
</el-backtop>
</div>
</template>
<script>
export default {
props: ['eleSelector'],
methods: {
backTop () {
this.$emit('backTop')
}
}
}
</script>
<style lang="scss">
.backto-top-icon-box {
text-align: center;
color: #fff;
.el-button {
background: #fff;
color: #005d42;
padding: 3px 8px 8px 8px;
&:hover {
background: #199965;
border: none;
}
&:hover .backto-top-icon {
color: #ececec;
}
}
.backto-top-icon {
font-size: 30px;
color: gray;
}
}
</style>
使用
- test.vue
<template>
<div style="height:100vh;">
<ul class="content-overflow-scroll">
<li v-for="item in 50" :key="item">item</li>
</ul>
<back-to-top @backTop="backTop" :eleSelector="eleSelector"> </back-to-top>
</div>
</template>
<script>
import BackToTop from '@/components/BackToTop/backToTop.vue'
export default {
components: {
BackToTop
},
data () {
return {
eleSelector: '.content-overflow-scroll'
}
},
methods: {
backTop () {
console.log('这里执行的是,点击了回到顶部的时候,需要进行的操作。')
}
}
}
</script>
<style lang="scss">
.content-overflow-scroll {
height:600px;
overflow: auto;
li {
height: 50px;
line-height: 50px;
margin-bottom: 10px;
border: 1px solid #ececec;
text-align: center;
}
}
</style>
备注:项目中装了sass和element。
更多推荐
已为社区贡献27条内容
所有评论(0)