先看效果
好,来直接说操作方法
本博文参考文献如下
1、naiveUI table 自定义单元格 iconfont 图标_小肉包de的博客-CSDN博客
2、vue3 + naive组件UI 运用h()函数和封装的svg组件动态创建svg图片_stargazer1201的博客-CSDN博客
4、Naive UI
正文
1、复制阿里icon的链接
2、 放index.html里
3、我先贴个整体的代码,你们看的懂就不用往下看
<template>
<n-layout has-sider style="height:100vh">
<n-layout-sider
bordered
collapse-mode="width"
:collapsed-width="64"
:width="240"
:collapsed="collapsed"
show-trigger
@collapse="collapsed = true"
@expand="collapsed = false"
>
<n-menu
v-model:value="activeKey"
:collapsed="collapsed"
:collapsed-width="64"
:collapsed-icon-size="22"
:options="menuOptions"
/>
</n-layout-sider>
<n-layout>
<!-- <img style="height: 200px;" src="/img/1.jpg"/>
<img style="height: 200px;" src="/img/2.jpg"/>
<img style="height: 200px;" src="/img/3.jpg"/><br/>
<img style="width: 400px;" src="/img/4.png"/>
<img style="width: 400px;" src="/img/5.png"/>
<img style="width: 400px;" src="/img/6.png"/><br/> -->
</n-layout>
</n-layout>
</template>
<script setup lang="ts">
import {ref,h} from "vue"
import { NIcon } from 'naive-ui'
import type { MenuOption } from 'naive-ui'
const collapsed=ref<boolean>(true);
const activeKey=ref<string | null>(null)
function renderIcon (icon: string) {
// return () => h(NIcon, null, { default: () => h(icon) })
return () => h(NIcon, {
class: 'iconfont '+icon,
// onClick: () => showMap(row)
})
}
//博主的公众号:程序员野区
//博主的小程序:程序员实用资源
//博主的视频号:程序员整活日常
const menuOptions: MenuOption[] = [
{
label: '左侧图标用的阿里iocn',
key: 'hear-the-wind-sing',
icon: renderIcon("icon-home")
},
{
label: '也就是用的iconfont',
key: 'pinball-1973',
icon: renderIcon("icon-shuba"),
children: [
{
label: '右侧是博主创业项目',
key: 'rat'
}
]
},
]
</script>
<style></style>
4、看不懂的来
这个是左侧组件
<n-menu
v-model:value="activeKey"
:collapsed="collapsed"
:collapsed-width="64"
:collapsed-icon-size="22"
:options="menuOptions"
/>
看明白了吗,重点在 h(NIcon, {