Vue3 第十七篇：使用JSX轻松实现Logo组件

文子阳

已于 2022-06-23 20:57:05 修改

阅读量384

点赞数

分类专栏： vue Vue3 文章标签： vue.js elementui 前端 jsx

于 2022-06-22 10:27:05 首次发布

本文链接：https://blog.csdn.net/wenxingchen/article/details/125404537

版权

vue 同时被 2 个专栏收录

101 篇文章 24 订阅

订阅专栏

42 篇文章 13 订阅

订阅专栏

这个比较简单：一张图片，一个标题，一个回到主页的方法。

const Logo = () => {
    return (
        <>
            <div style={comLogoBox} title="标题">
                <img src="http://demo-jj.dev33.cn/spdj-admin/sa-frame/admin-logo.png" style={adminLogo} />
                <span style={adminTitle}>管理系统</span>
            </div>
        </>
    )
}

let comLogoBox = {
    cursor: "pointer"
}
let adminLogo = {
    width: "40px",
    height: "40px",
    borderRadius: "50%",
    verticalAlign: "middle",
    marginLeft: "22px"
}
let adminTitle = {
    paddingRight: "0.5em",
    marginLeft: "0.5em",
    fontSize: "0.5em",
}
export default Logo

导入使用即可：