Element-UI组件实现全局回到顶部功能

古城微笑少年丶 2021-07-24 17:09 615阅读 0赞

**目录**

一 项目创建步骤

二 删除不必要的文件

三 删除不必要的代码

四 安装 element-ui

五 启动项目

六 测试

七 正式编写的代码

八 测试效果

九 源码地址

--------------------

# 一 项目创建步骤 #

1 创建项目

vue create ele-components

2 选择必要组件

? Check the features needed for your project:
    (*) Babel
    ( ) TypeScript
    ( ) Progressive Web App (PWA) Support
    (*) Router
    ( ) Vuex
    (*) CSS Pre-processors
    >( ) Linter / Formatter
    ( ) Unit Testing
    ( ) E2E Testing

3 路由模式选择history模式

? Please pick a preset: Manually select features
    ? Check the features needed for your project: Babel, Router, CSS Pre-processors
    ? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n) y

4 预处理器选择 node-sass

? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default):
      Sass/SCSS (with dart-sass)
    > Sass/SCSS (with node-sass)
      Less
      Stylus

5 选择默认配置文件

> In dedicated config files
      In package.json

6 不保存为预制项目

? Save this as a preset for future projects? (y/N) n

7 使用npm安装依赖

? Pick the package manager to use when installing dependencies:
      Use Yarn
    > Use NPM

8 安装过程

Vue CLI v4.3.1
    ✨  Creating project in F:\vue\ele-components\ele-components.
    ⚙️  Installing CLI plugins. This might take a while...

# 二 删除不必要的文件 #

About.vue

HelloWord.vue

# 三 删除不必要的代码 #

1 index.js删除后的样子

2 Home.vue删除后的样子

<template>
      <div>
        home
      </div>
    </template>
    <script>
      
    export default {
      name: 'Home',
      components: {
      }
    }
    </script>

3 APP.vue删除后的样子

# 四 安装 element-ui #

cnpm i -S element-ui

# 五 启动项目 #

npm run serve

# 六 测试 #

1 浏览器输入  [http://localhost:8080/][http_localhost_8080]

2 界面呈现如下

![20200821194404796.png][]

# 七 正式编写的代码 #

1 main.js

import Vue from 'vue'
    import App from './App.vue'
    import router from './router'
    // 导入ElementUI
    import ElementUI from 'element-ui'
    // 导入ElementUI的样式
    import 'element-ui/lib/theme-chalk/index.css'
    // 导入全局组件
    import './globalComponents'
    // 使用导入ElementUI
    Vue.use(ElementUI)
    Vue.config.productionTip = false
    
    
    new Vue({
      router,
      render: h => h(App)
    }).$mount('#app')

2 Home.vue

<template>
        <div>
            <el-button type="primary" @click="goTo('/backTopOne')">去往页面1</el-button>
            <el-button type="primary" @click="goTo('/backTopTwo')">去往页面2</el-button>
        </div>
    </template>
    <script>
        export default {
            name: 'Home',
            components: {},
            methods: {
                /*页面跳转*/
                goTo(path) {
                    this.$router.push(path)
                }
            }
        }
    </script>

3 BackTopOne.vue

<template>
        <div>
            <div>这是回到顶部页面1</div>
            <div>这是回到顶部页面1</div>
            <div>这是回到顶部页面1</div>
            <div>这是回到顶部页面1</div>
            <div>这是回到顶部页面1</div>
            <div>这是回到顶部页面1</div>
            <div>这是回到顶部页面1</div>
            <div>这是回到顶部页面1</div>
            <div>这是回到顶部页面1</div>
            <div>这是回到顶部页面1</div>
            <div>这是回到顶部页面1</div>
            <div>这是回到顶部页面1</div>
            <div>这是回到顶部页面1</div>
            <div>这是回到顶部页面1</div>
            <div>这是回到顶部页面1</div>
            <div>这是回到顶部页面1</div>
            <div>这是回到顶部页面1</div>
            <div>这是回到顶部页面1</div>
            <div>这是回到顶部页面1</div>
            <div>这是回到顶部页面1</div>
            <div>这是回到顶部页面1</div>
            <div>这是回到顶部页面1</div>
            <div>这是回到顶部页面1</div>
            <div>这是回到顶部页面1</div>
            <div>这是回到顶部页面1</div>
            <div>这是回到顶部页面1</div>
            <div>这是回到顶部页面1</div>
            <div>这是回到顶部页面1</div>
            <div>这是回到顶部页面1</div>
            <div>这是回到顶部页面1</div>
            <div>这是回到顶部页面1</div>
            <div>这是回到顶部页面1</div>
            <div>这是回到顶部页面1</div>
            <div>这是回到顶部页面1</div>
            <div>这是回到顶部页面1</div>
            <div>这是回到顶部页面1</div>
            <div>这是回到顶部页面1</div>
            <div>这是回到顶部页面1</div>
            <div>这是回到顶部页面1</div>
            <div>这是回到顶部页面1</div>
            <div>这是回到顶部页面1</div>
            <div>这是回到顶部页面1</div>
            <div>这是回到顶部页面1</div>
            <div>这是回到顶部页面1</div>
            <div>这是回到顶部页面1</div>
            <div>这是回到顶部页面1</div>
            <div>这是回到顶部页面1</div>
            <div>这是回到顶部页面1</div>
            <div>这是回到顶部页面1</div>
            <div>这是回到顶部页面1</div>
            <div>这是回到顶部页面1</div>
            <div>这是回到顶部页面1</div>
            <div>这是回到顶部页面1</div>
            <div>这是回到顶部页面1</div>
            <div>这是回到顶部页面1</div>
            <div>这是回到顶部页面1</div>
            <div>这是回到顶部页面1</div>
            <div>这是回到顶部页面1</div>
            <div>这是回到顶部页面1</div>
            <div>这是回到顶部页面1</div>
            <div>这是回到顶部页面1</div>
            <div>这是回到顶部页面1</div>
            <div>这是回到顶部页面1</div>
            <div>这是回到顶部页面1</div>
            <div>这是回到顶部页面1</div>
            <div>这是回到顶部页面1</div>
            <div>这是回到顶部页面1</div>
            <div>这是回到顶部页面1</div>
            <div>这是回到顶部页面1</div>
            <div>这是回到顶部页面1</div>
            <div>这是回到顶部页面1</div>
            <div>这是回到顶部页面1</div>
            <div>这是回到顶部页面1</div>
            <div>这是回到顶部页面1</div>
            <div>这是回到顶部页面1</div>
            <div>这是回到顶部页面1</div>
            <div>这是回到顶部页面1</div>
            <div>这是回到顶部页面1</div>
            <div>这是回到顶部页面1</div>
            <div>这是回到顶部页面1</div>
            <div>这是回到顶部页面1</div>
            <div>这是回到顶部页面1</div>
            <div>这是回到顶部页面1</div>
            <div>这是回到顶部页面1</div>
            <div>这是回到顶部页面1</div>
            <div>这是回到顶部页面1</div>
            <div>这是回到顶部页面1</div>
            <div>这是回到顶部页面1</div>
            <div>这是回到顶部页面1</div>
            <div>这是回到顶部页面1</div>
            <div>这是回到顶部页面1</div>
            <div>这是回到顶部页面1</div>
            <div>这是回到顶部页面1</div>
            <div>这是回到顶部页面1</div>
            <div>这是回到顶部页面1</div>
            <div>这是回到顶部页面1</div>
            <div>这是回到顶部页面1</div>
            <div>这是回到顶部页面1</div>
            <div>这是回到顶部页面1</div>
            <div>这是回到顶部页面1</div>
            <div>这是回到顶部页面1</div>
            <div>这是回到顶部页面1</div>
            <div>这是回到顶部页面1</div>
            <div>这是回到顶部页面1</div>
            <div>这是回到顶部页面1</div>
            <div>这是回到顶部页面1</div>
            <div>这是回到顶部页面1</div>
            <div>这是回到顶部页面1</div>
            <div>这是回到顶部页面1</div>
            <div>这是回到顶部页面1</div>
            <div>这是回到顶部页面1</div>
            <div>这是回到顶部页面1</div>
            <div>这是回到顶部页面1</div>
            <div>这是回到顶部页面1</div>
            <div>这是回到顶部页面1</div>
            <div>这是回到顶部页面1</div>
            <div>这是回到顶部页面1</div>
            <div>这是回到顶部页面1</div>
            <div>这是回到顶部页面1</div>
            <div>这是回到顶部页面1</div>
            <div>这是回到顶部页面1</div>
            <div>这是回到顶部页面1</div>
            <div>这是回到顶部页面1</div>
            <div>这是回到顶部页面1</div>
            <div>这是回到顶部页面1</div>
            <div>这是回到顶部页面1</div>
            <div>这是回到顶部页面1</div>
            <div>这是回到顶部页面1</div>
            <div>这是回到顶部页面1</div>
            <div>这是回到顶部页面1</div>
            <div>这是回到顶部页面1</div>
            <div>这是回到顶部页面1</div>
            <div>这是回到顶部页面1</div>
            <div>这是回到顶部页面1</div>
            <div>这是回到顶部页面1</div>
            <div>这是回到顶部页面1</div>
            <div>这是回到顶部页面1</div>
            <div>这是回到顶部页面1</div>
            <div>这是回到顶部页面1</div>
            <div>这是回到顶部页面1</div>
            <div>这是回到顶部页面1</div>
            <div>这是回到顶部页面1</div>
            <div>这是回到顶部页面1</div>
            <div>这是回到顶部页面1</div>
            <div>这是回到顶部页面1</div>
            <div>这是回到顶部页面1</div>
            <div>这是回到顶部页面1</div>
            <div>这是回到顶部页面1</div>
            <div>这是回到顶部页面1</div>
            <div>这是回到顶部页面1</div>
            <div>这是回到顶部页面1</div>
            <div>这是回到顶部页面1</div>
            <div>这是回到顶部页面1</div>
            <div>这是回到顶部页面1</div>
            <div>这是回到顶部页面1</div>
            <div>这是回到顶部页面1</div>
            <div>这是回到顶部页面1</div>
        </div>
    </template>
    
    <script>
        export default {
            name: "BackTopOne"
        }
    </script>
    
    <style scoped>
    </style>

4 BackTopTwo.vue

<template>
        <div>
            <div>这是回到顶部页面2</div>
            <div>这是回到顶部页面2</div>
            <div>这是回到顶部页面2</div>
            <div>这是回到顶部页面2</div>
            <div>这是回到顶部页面2</div>
            <div>这是回到顶部页面2</div>
            <div>这是回到顶部页面2</div>
            <div>这是回到顶部页面2</div>
            <div>这是回到顶部页面2</div>
            <div>这是回到顶部页面2</div>
            <div>这是回到顶部页面2</div>
            <div>这是回到顶部页面2</div>
            <div>这是回到顶部页面2</div>
            <div>这是回到顶部页面2</div>
            <div>这是回到顶部页面2</div>
            <div>这是回到顶部页面2</div>
            <div>这是回到顶部页面2</div>
            <div>这是回到顶部页面2</div>
            <div>这是回到顶部页面2</div>
            <div>这是回到顶部页面2</div>
            <div>这是回到顶部页面2</div>
            <div>这是回到顶部页面2</div>
            <div>这是回到顶部页面2</div>
            <div>这是回到顶部页面2</div>
            <div>这是回到顶部页面2</div>
            <div>这是回到顶部页面2</div>
            <div>这是回到顶部页面2</div>
            <div>这是回到顶部页面2</div>
            <div>这是回到顶部页面2</div>
            <div>这是回到顶部页面2</div>
            <div>这是回到顶部页面2</div>
            <div>这是回到顶部页面2</div>
            <div>这是回到顶部页面2</div>
            <div>这是回到顶部页面2</div>
            <div>这是回到顶部页面2</div>
            <div>这是回到顶部页面2</div>
            <div>这是回到顶部页面2</div>
            <div>这是回到顶部页面2</div>
            <div>这是回到顶部页面2</div>
            <div>这是回到顶部页面2</div>
            <div>这是回到顶部页面2</div>
            <div>这是回到顶部页面2</div>
            <div>这是回到顶部页面2</div>
            <div>这是回到顶部页面2</div>
            <div>这是回到顶部页面2</div>
            <div>这是回到顶部页面2</div>
            <div>这是回到顶部页面2</div>
            <div>这是回到顶部页面2</div>
            <div>这是回到顶部页面2</div>
            <div>这是回到顶部页面2</div>
            <div>这是回到顶部页面2</div>
            <div>这是回到顶部页面2</div>
            <div>这是回到顶部页面2</div>
            <div>这是回到顶部页面2</div>
            <div>这是回到顶部页面2</div>
            <div>这是回到顶部页面2</div>
            <div>这是回到顶部页面2</div>
            <div>这是回到顶部页面2</div>
            <div>这是回到顶部页面2</div>
            <div>这是回到顶部页面2</div>
            <div>这是回到顶部页面2</div>
            <div>这是回到顶部页面2</div>
            <div>这是回到顶部页面2</div>
            <div>这是回到顶部页面2</div>
            <div>这是回到顶部页面2</div>
            <div>这是回到顶部页面2</div>
            <div>这是回到顶部页面2</div>
            <div>这是回到顶部页面2</div>
            <div>这是回到顶部页面2</div>
            <div>这是回到顶部页面2</div>
            <div>这是回到顶部页面2</div>
            <div>这是回到顶部页面2</div>
            <div>这是回到顶部页面2</div>
            <div>这是回到顶部页面2</div>
            <div>这是回到顶部页面2</div>
            <div>这是回到顶部页面2</div>
            <div>这是回到顶部页面2</div>
            <div>这是回到顶部页面2</div>
            <div>这是回到顶部页面2</div>
            <div>这是回到顶部页面2</div>
            <div>这是回到顶部页面2</div>
            <div>这是回到顶部页面2</div>
            <div>这是回到顶部页面2</div>
            <div>这是回到顶部页面2</div>
            <div>这是回到顶部页面2</div>
            <div>这是回到顶部页面2</div>
            <div>这是回到顶部页面2</div>
            <div>这是回到顶部页面2</div>
            <div>这是回到顶部页面2</div>
            <div>这是回到顶部页面2</div>
            <div>这是回到顶部页面2</div>
            <div>这是回到顶部页面2</div>
            <div>这是回到顶部页面2</div>
            <div>这是回到顶部页面2</div>
            <div>这是回到顶部页面2</div>
            <div>这是回到顶部页面2</div>
            <div>这是回到顶部页面2</div>
            <div>这是回到顶部页面2</div>
            <div>这是回到顶部页面2</div>
            <div>这是回到顶部页面2</div>
            <div>这是回到顶部页面2</div>
            <div>这是回到顶部页面2</div>
            <div>这是回到顶部页面2</div>
            <div>这是回到顶部页面2</div>
            <div>这是回到顶部页面2</div>
            <div>这是回到顶部页面2</div>
            <div>这是回到顶部页面2</div>
            <div>这是回到顶部页面2</div>
            <div>这是回到顶部页面2</div>
            <div>这是回到顶部页面2</div>
            <div>这是回到顶部页面2</div>
            <div>这是回到顶部页面2</div>
            <div>这是回到顶部页面2</div>
            <div>这是回到顶部页面2</div>
            <div>这是回到顶部页面2</div>
            <div>这是回到顶部页面2</div>
            <div>这是回到顶部页面2</div>
            <div>这是回到顶部页面2</div>
            <div>这是回到顶部页面2</div>
            <div>这是回到顶部页面2</div>
            <div>这是回到顶部页面2</div>
            <div>这是回到顶部页面2</div>
            <div>这是回到顶部页面2</div>
            <div>这是回到顶部页面2</div>
            <div>这是回到顶部页面2</div>
            <div>这是回到顶部页面2</div>
            <div>这是回到顶部页面2</div>
            <div>这是回到顶部页面2</div>
            <div>这是回到顶部页面2</div>
            <div>这是回到顶部页面2</div>
            <div>这是回到顶部页面2</div>
            <div>这是回到顶部页面2</div>
            <div>这是回到顶部页面2</div>
            <div>这是回到顶部页面2</div>
            <div>这是回到顶部页面2</div>
            <div>这是回到顶部页面2</div>
            <div>这是回到顶部页面2</div>
            <div>这是回到顶部页面2</div>
            <div>这是回到顶部页面2</div>
            <div>这是回到顶部页面2</div>
            <div>这是回到顶部页面2</div>
            <div>这是回到顶部页面2</div>
            <div>这是回到顶部页面2</div>
            <div>这是回到顶部页面2</div>
            <div>这是回到顶部页面2</div>
            <div>这是回到顶部页面2</div>
            <div>这是回到顶部页面2</div>
            <div>这是回到顶部页面2</div>
            <div>这是回到顶部页面2</div>
            <div>这是回到顶部页面2</div>
            <div>这是回到顶部页面2</div>
            <div>这是回到顶部页面2</div>
            <div>这是回到顶部页面2</div>
            <div>这是回到顶部页面2</div>
            <div>这是回到顶部页面2</div>
            <div>这是回到顶部页面2</div>
            <div>这是回到顶部页面2</div>
        </div>
    </template>
    
    <script>
        export default {
            name: "BackTopTwo"
        }
    </script>
    
    <style scoped>
    </style>

5 index.js

import Vue from 'vue'
    import VueRouter from 'vue-router'
    import Home from '../views/Home.vue'
    
    Vue.use(VueRouter)
    
    const routes = [
        {
            path: '/',
            name: 'Home',
            component: Home
        },
        {
            path: '/backTopOne',
            name: 'backTopOne',
            component: () => import('../views/BackTopOne')
        },
        {
            path: '/backTopTwo',
            name: 'backTopTwo',
            component: () => import('../views/BackTopTwo')
        }
    ]
    
    const router = new VueRouter({
        mode: 'history',
        base: process.env.BASE_URL,
        routes
    })
    
    export default router

6 ele-components\\src\\globalComponents\\index.js

/*注册全局组件*/
    import Vue from "vue"
    import BackTop from "../components/backTop/BackTop"
    
    Vue.component('backTop',BackTop)

# 八 测试效果 #

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70][]

# 九 源码地址 #

[https://gitee.com/cakin24/ele-components][https_gitee.com_cakin24_ele-components]

[http_localhost_8080]: http://localhost:8080/
[20200821194404796.png]: /images/20210724/d1198b84d2244768a2781e8143c6d24e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70]: /images/20210724/fe6418eb1aea45208cb22988e2b4560f.png
[https_gitee.com_cakin24_ele-components]: https://gitee.com/cakin24/ele-components