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

原创已于 2022-06-23 20:57:05 修改 · 487 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#vue.js #elementui #前端 #jsx

收录于

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

vue 同时被 2 个专栏收录

101 篇文章

订阅专栏

42 篇文章

订阅专栏

本文介绍了如何创建一个简单的logo，包含图片、标题和返回主页的功能，同时展示了相关代码片段。重点在于前端设计元素和基本交互的实现。

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

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

导入使用即可：