Vue+element UI實現“回到頂部”按鈕元件
阿新 • • 發佈:2018-12-19
介紹
這是一個可以快速回到頁面頂部的元件,當用戶瀏覽到頁面底部的時候,通過點選按鈕,可快速回到頁面頂部。
使用方法
由於該元件是基於element-UI
進行二次封裝的,所以在使用該元件時請務必安裝element-UI
(安裝方式猛戳這裡),安裝好element-UI
後,只需將該元件資料夾BackToTop
匯入到現有專案中即可使用。
使用示例
<template> <div id="app"> <!--可自定義按鈕的樣式、show/hide臨界點、返回的位置 --> <!--如需文字提示,可在外部新增element的<el-tooltip></el-tooltip>元素 --> <el-tooltip placement="top" content="回到頂部"> <back-to-top :custom-style="myBackToTopStyle" :visibility-height="300" :back-position="0" transition-name="fade"/> </el-tooltip> </div> </div> </template> <script> import BackToTop from './BackToTop' export default { name: 'app', components: { BackToTop}, data() { return { myBackToTopStyle: { right: '50px', bottom: '50px', width: '40px', height: '40px', borderRadius: '4px', lineHeight: '45px', // 請保持與高度一致以垂直居中 background: '#e7eaf1'// 按鈕的背景顏色 } } } } </script>
選項
屬性 | 描述 | 型別 | 是否必須 | 預設值 |
---|---|---|---|---|
visibilityHeight | 當頁面捲曲到多少高度時顯示按鈕 | Number | 否 | 400 |
backPosition | 點選按鈕後回到頁面頂部的高度 | Number | 否 | 0 |
customStyle | 自定義按鈕樣式 | Object | 否 | |
transitionName | 回到頂部時的動畫效果,具體參考elementUI的動畫效果 | String | 否 | fade |
效果圖
元件程式碼
完整程式碼請戳☞Vue-Components-Library/BackToTop
(完)