在vue中使用elementUi的回到顶部backToTop组件 

 1 <template>
 2   <el-tooltip placement="top" content="回到顶部">
 3     <back-to-top :custom-style="myBackToTopStyle"
 4                  :visibility-height="300" :back-position="0" transition-name="fade"/>
 5   </el-tooltip>
 6 </template>
 7 <script>
 8   import  BackToTop from '../../../node_modules/element-ui/packages/backtop/index'
 9   export default {
10     name:"app",
11     components: { BackToTop},
12     data() {
13       return {
14         input: "",
15         myBackToTopStyle: {
16           right: '50px',
17           bottom: '50px',
18           width: '40px',
19           height: '40px',
20           borderRadius: '4px',
21           lineHeight: '45px', // 请保持与高度一致以垂直居中
22           background: '#e7eaf1'// 按钮的背景颜色
23         }
24       };
25     }
26   };
27 </script>

 

posted @ 2020-11-18 17:17  shine_lovely  阅读(1129)  评论(0)    收藏  举报