ReactHooks——ant.design

最新推荐文章于 2024-06-01 20:33:36 发布

HarryHY

最新推荐文章于 2024-06-01 20:33:36 发布

阅读量217

点赞数

分类专栏： # React 文章标签： react.js javascript 前端

本文链接：https://blog.csdn.net/harryhy/article/details/123435435

版权

React 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

安装

npm install antd --save

引入

import { Affix, Button } from 'antd';

使用

        <Affix   style={{ position: 'fixed', bottom: 100, right: 25 }}>
          <div className="backtop" onClick={()=>goBackTop()}>
           
          </div>
        </Affix>

全部代码

import React,{useState} from "react";
import copy from "copy-to-clipboard";
import { Affix, Button } from 'antd';
const Footer = () => {
  const linkloca = "https://blog.csdn.net/HarryHY";
  const copyfn = (linkloca: string) => {
    copy(linkloca, { debug: true, message: "Press #{key} to copy" });
  };
  const goBackTop=()=>{
    document.body.scrollTop = document.documentElement.scrollTop = 0;
  }
  return (
    <>
      <div className="footerdiv animate__animated animate__bounceInLeft">
        <span>Blog:</span>
        <a href={linkloca} target="_blank">
          {linkloca}
        </a>
        <span
          className="copyspan"
          onClick={() => {
            copyfn(linkloca);
          }}
        >
          复制
        </span>
        <Affix   style={{ position: 'fixed', bottom: 100, right: 25 }}>
          <div className="backtop" onClick={()=>goBackTop()}>
           
          </div>
        </Affix>
      </div>
    </>
  );
};
export default Footer;