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

最新推荐文章于 2024-05-21 18:43:24 发布

chengqiuming

最新推荐文章于 2024-05-21 18:43:24 发布

阅读量1.9k

点赞数

分类专栏： Vue 文章标签： vue.js

本文链接：https://blog.csdn.net/chengqiuming/article/details/108154922

版权

Vue 专栏收录该内容

161 篇文章 16 订阅

订阅专栏

一项目创建步骤

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删除后的样子

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
  }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

2 Home.vue删除后的样子

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

3 APP.vue删除后的样子

<template>
  <div>
    <router-view/>
  </div>
</template>

<style lang="scss">
</style>

四安装 element-ui

cnpm i -S element-ui

五启动项目

npm run serve

六测试

1 浏览器输入 http://localhost:8080/

2 界面呈现如下

七正式编写的代码

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)

八测试效果

九源码地址

https://gitee.com/cakin24/ele-components

chengqiuming

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
Element-UI组件实现全局回到顶部功能

目录一项目创建步骤二删除不必要的文件三删除不必要的代码四安装element-ui五启动项目六测试七正式编写的代码八测试效果九源码地址一项目创建步骤1创建项目vue create ele-components2选择必要组件? Check the features needed for your project:(*) Babel( ) TypeScript( ) Progressive Web App (PWA) Su...
复制链接

扫一扫