vue-element 页脚组件引用

在src/components目录下新建
footer/footer.vue

<template>
  <div class='footer'>
      <span class="scroll"></span>
      <el-divider></el-divider>
      <span>法律声明</span>
      <el-divider direction="vertical"></el-divider>
      <span>友情链接</span>
      <el-divider direction="vertical"></el-divider>
      <span @click="drawer = true">联系我</span>
      <br/>
      <br/>
      <span class="copyright">版权所有 JEmbrace</span>
      <el-drawer
        title="联系我"
        :visible.sync="drawer"
        :direction="direction"
        :before-close="handleClose">
        <p class='info'>
          <i class="el-icon-phone"></i>电话：18822299999<br/>
          <i class="el-icon-message"></i>邮箱：18822299999@163.com<br/>
        </p>
      </el-drawer>
  </div>
</template>
<style>
  .el-divider{
    background-color: rgb(84, 92, 100);
  }
</style>
<style scoped>
    .footer{
        height: 250px;
        text-align: center;
        font-size: 16px;
        padding: 0px 100px;
        position: relative;
    }
    .footer{
      cursor: pointer;
    }
    .copyright{
      font-size: 12px;
    }
    .info{
      font-size: 14px;
      color: #72767b;
      line-height: 25px;
    }
    .footer .scroll{
      display: inline-block;
      width: 20px;
      height: 20px;
      border-radius: 5px;
      border:1px solid #448aff;
      background-color: rgba(68,138,255,0.2);
      position: absolute;
      left: 5%;
      top: -25px;
      z-index: 10;
      animation: scrollA infinite 20s linear alternate;
    }
    @keyframes scrollA {
      0% {left: 5%;transform: rotate(180deg);};
      10% {left: 5%;transform: rotate(270deg);}
      20% {left: 5%;transform: rotate(450deg);}
      25% {left: 10%;transform: rotate(540deg);}
      30% {left: 20%;transform: rotate(720deg);}
      35% {left: 30%;transform: rotate(900deg);}
      40% {left: 40%;transform: rotate(1080deg);}
      45% {left: 50%;transform: rotate(1260deg);}
      50% {left: 60%;transform: rotate(1440deg);}
      55% {left: 70%;transform: rotate(1620deg);}
      60% {left: 80%;transform: rotate(1800deg);}
      80% {left: 90%;transform: rotate(2610deg);}
      90% {left: 90%;transform: rotate(2340deg);}
      100% {left: 90%;transform: rotate(2520deg);}
    }
</style>
<script>
export default {
  name: 'Footer',
  data () {
    return {
      drawer: false,
      direction: 'btt'
    }
  },
  methods: {
    handleClose (done) {
      done()
    }
  }
}
</script>

使用：
第一种方式：直接修改APP.vue
但这种办法不是很友好，需要兼容各个vue页面的大小，如果页面展示太长，则显示在中间。对于前端小白来说，去实现这个功能花很多时间也没必要。所以采用了第二种方式

<template>
  <div id="app">
    <router-view />
    <app-footer></app-footer>
  </div>
</template>

<script>
import Footer from './components/footer/footer.vue'

export default {
  name: 'App',
  components: {
    'app-footer': Footer,
  },
}
</script>

第二种方式：直接在vue组件里调用改footer组件
比如我在某个组件vue页面下的分页组件下面插入：

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="listQuery.page"
      :limit.sync="listQuery.limit"
      @pagination="getList"
    />
    <Footer></Footer>  //页脚

script下需要改动如下两行。

<script>
import Footer from '@/components/footer/footer'  // 导入页脚
export default {
  `components: { Pagination, Footer },

这样生成的效果始终在页面的底部，
参考文档：
https://www.cnblogs.com/HouJiao/p/12111366.html