在使用ant desgin的a-back-top遇到的问题

Question

在用ant desgin vue 中 使用这个a-back-top的时候 报错了 然后也不生效不知道为什么 希望帮忙看看

报错信息 :

Vue warn]: Unknown custom element: <a-back-top> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

found in

代码:

<template>

  <div class="table-details-page">

    <div class="headerClass">
      <div class="headerBox">
        <a-breadcrumb>
          <a-breadcrumb-item><a href="/home">首页</a></a-breadcrumb-item>
          <a-breadcrumb-item><a href="/data-catlog">数据</a></a-breadcrumb-item>
          <a-breadcrumb-item>详情</a-breadcrumb-item>
        </a-breadcrumb>
      </div>
    </div>
    <headerDetails></headerDetails>
    <contentTitle id="demo1"></contentTitle>
    <contentDetails id="demo2"></contentDetails>

// 这里就是想用a-back-top 这个组件

    <div id="components-back-top-demo-custom">
      <a-back-top :target="targetFn">
        <div class="ant-back-top-inner">UP</div>
      </a-back-top>
    </div>
  </div>
</template>

<script>
import headerDetails from '@/views/table-details/components/headerDetails.vue'
import contentTitle from '@/views/table-details/components/contentTitle.vue'

import contentDetails from '@/views/table-details/components/contentDetails.vue'

export default {
  components: {
    headerDetails,
    contentDetails,
    contentTitle,
  },
  //   mounted() {
  //     window.addEventListener('scroll', this.handleScroll)
  //   },
  //   destroyed() {
  //     window.removeEventListener('scroll', this.handleScroll)
  //   },
  watch: {},
  methods: {
    targetFn() {
      return document.getElementById('app')
    },
    fn() {
      return document.getElementById('box')
    },
  },
}
</script>

<style lang="less" scoped>
.box {
  height: 1600px;
}

.smallBox {
  border: 2px solid black;
  height: 1500px;
  width: 200px;
  margin: 100px;
  overflow-y: auto;
}
#components-back-top-demo-custom {
  cursor: pointer;

  z-index: 100;
}
#components-back-top-demo-custom .ant-back-top {
  bottom: 100px;
}
#components-back-top-demo-custom .ant-back-top-inner {
  height: 40px;
  width: 40px;
  line-height: 40px;
  border-radius: 4px;
  background-color: #1088e9;
  color: #fff;
  text-align: center;
  font-size: 20px;
}
.table-details-page {
  height: 100%;
  overflow: auto;
  //   width: 100%;
  //   display: flex;
  //   justify-content: center;
  //   align-content: center;
  .headerClass {
    width: 100%;
    // height: 50px;
    // background-color: #2b85e4;
    .headerBox {
      padding: 10px 20px;
      width: 98%;
    }
  }
}
</style>

Answer 1

https://blog.csdn.net/weixin_43975684/article/details/122200514

组件注册了吗