mirror of
https://gitee.com/WeBank/fes.js.git
synced 2024-11-30 10:48:12 +08:00
feat: plugin-layout的菜单支持icon配置
This commit is contained in:
wanchun
parent
456d2c567c
commit
4d052bab19
@ -5,7 +5,7 @@
|
||||
</template>
|
||||
<script>
|
||||
import Spin from 'ant-design-vue/lib/spin';
|
||||
import 'ant-design-vue/lib/spin/style';
|
||||
import 'ant-design-vue/lib/spin/style/css';
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
|
||||
@ -13,9 +13,9 @@
|
||||
<script>
|
||||
import { useRouter } from '@@/core/coreExports';
|
||||
import Result from 'ant-design-vue/lib/result';
|
||||
import 'ant-design-vue/lib/result/style';
|
||||
import 'ant-design-vue/lib/result/style/css';
|
||||
import Button from 'ant-design-vue/lib/button';
|
||||
import 'ant-design-vue/lib/button/style';
|
||||
import 'ant-design-vue/lib/button/style/css';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
|
||||
@ -13,9 +13,9 @@
|
||||
<script>
|
||||
import { useRouter } from '@@/core/coreExports';
|
||||
import Result from 'ant-design-vue/lib/result';
|
||||
import 'ant-design-vue/lib/result/style';
|
||||
import 'ant-design-vue/lib/result/style/css';
|
||||
import Button from 'ant-design-vue/lib/button';
|
||||
import 'ant-design-vue/lib/button/style';
|
||||
import 'ant-design-vue/lib/button/style/css';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
|
||||
@ -71,7 +71,7 @@
|
||||
import { ref, computed } from 'vue';
|
||||
import { useRoute } from '@@/core/coreExports';
|
||||
import Layout from 'ant-design-vue/lib/layout';
|
||||
import 'ant-design-vue/lib/layout/style';
|
||||
import 'ant-design-vue/lib/layout/style/css';
|
||||
import Menu from './Menu';
|
||||
import MultiTabProvider from './MultiTabProvider';
|
||||
import defaultLogo from '../assets/logo.png';
|
||||
|
||||
@ -24,19 +24,20 @@
|
||||
<a-menu-item
|
||||
v-if="item2.access"
|
||||
:key="item2.path"
|
||||
:title="item2.title"
|
||||
>
|
||||
{{item2.title}}
|
||||
</a-menu-item>
|
||||
</template>
|
||||
</a-sub-menu>
|
||||
<a-menu-item v-else :key="item1.path">
|
||||
<a-menu-item v-else :key="item1.path" :title="item1.title">
|
||||
{{item1.title}}
|
||||
</a-menu-item>
|
||||
</template>
|
||||
</template>
|
||||
</a-sub-menu>
|
||||
<a-menu-item v-else :key="item.path">
|
||||
<UserOutlined />
|
||||
<a-menu-item v-else :key="item.path" :title="item.title">
|
||||
<MenuIcon v-if="item.icon" :icon="item.icon" />
|
||||
<span>{{item.title}}</span>
|
||||
</a-menu-item>
|
||||
</template>
|
||||
@ -48,10 +49,8 @@
|
||||
import { toRefs, computed } from 'vue';
|
||||
import { useRoute, useRouter } from '@@/core/coreExports';
|
||||
import Menu from 'ant-design-vue/lib/menu';
|
||||
import 'ant-design-vue/lib/menu/style';
|
||||
import {
|
||||
UserOutlined
|
||||
} from '@ant-design/icons-vue';
|
||||
import 'ant-design-vue/lib/menu/style/css';
|
||||
import MenuIcon from './MenuIcon'
|
||||
import { addAccessTag } from '../helpers/pluginAccess';
|
||||
|
||||
export default {
|
||||
@ -59,7 +58,7 @@ export default {
|
||||
[Menu.name]: Menu,
|
||||
[Menu.SubMenu.name]: Menu.SubMenu,
|
||||
[Menu.Item.name]: Menu.Item,
|
||||
UserOutlined
|
||||
MenuIcon
|
||||
},
|
||||
props: {
|
||||
menus: {
|
||||
|
||||
30
packages/fes-plugin-layout/src/runtime/views/MenuIcon.vue
Normal file
30
packages/fes-plugin-layout/src/runtime/views/MenuIcon.vue
Normal file
@ -0,0 +1,30 @@
|
||||
<script>
|
||||
// 使用 ant-design/icons-vue
|
||||
// 使用 本地 svg 图片
|
||||
// 使用 远程 svg 地址
|
||||
import { ref, onMounted } from 'vue';
|
||||
// import AntdIcon from '@ant-design/icons-vue/es/components/AntdIcon';
|
||||
export default {
|
||||
props: {
|
||||
icon: String
|
||||
},
|
||||
setup(props) {
|
||||
const AIcon = ref(null);
|
||||
onMounted(()=>{
|
||||
const iconName = props.icon.slice(0, 1).toUpperCase() + props.icon.slice(1) + 'Outlined';
|
||||
import(`@ant-design/icons-vue/es/icons/${iconName}`).then(res=>{
|
||||
AIcon.value = res.default;
|
||||
}).catch(e=>{
|
||||
console.warn(`[fes-layout] icon ${props.icon} 不存在！`)
|
||||
})
|
||||
})
|
||||
return ()=>{
|
||||
if(AIcon.value){
|
||||
return <AIcon.value />
|
||||
}
|
||||
return null
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -45,9 +45,9 @@ import { reactive, unref } from 'vue';
|
||||
import Tabs from 'ant-design-vue/lib/tabs';
|
||||
import Dropdown from 'ant-design-vue/lib/dropdown';
|
||||
import Menu from 'ant-design-vue/lib/menu';
|
||||
import 'ant-design-vue/lib/menu/style';
|
||||
import 'ant-design-vue/lib/dropdown/style';
|
||||
import 'ant-design-vue/lib/tabs/style';
|
||||
import 'ant-design-vue/lib/menu/style/css';
|
||||
import 'ant-design-vue/lib/dropdown/style/css';
|
||||
import 'ant-design-vue/lib/tabs/style/css';
|
||||
import { ReloadOutlined, MoreOutlined } from '@ant-design/icons-vue';
|
||||
import { useRouter, useRoute } from '@@/core/coreExports';
|
||||
|
||||
|
||||
@ -19,8 +19,8 @@
|
||||
<script>
|
||||
import Dropdown from 'ant-design-vue/lib/dropdown';
|
||||
import Menu from 'ant-design-vue/lib/menu';
|
||||
import 'ant-design-vue/lib/dropdown/style';
|
||||
import 'ant-design-vue/lib/menu/style';
|
||||
import 'ant-design-vue/lib/dropdown/style/css';
|
||||
import 'ant-design-vue/lib/menu/style/css';
|
||||
import { GlobalOutlined } from '@ant-design/icons-vue';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { computed } from 'vue';
|
||||
|
||||
@ -1 +1,2 @@
|
||||
FES_APP_PUBLISH_ERROR_PAGE=hello
|
||||
FES_APP_PUBLISH_ERROR_PAGE=hello
|
||||
ANALYZE=1
|
||||
|
||||
@ -24,7 +24,7 @@ export default {
|
||||
proxy: {
|
||||
'/v2': {
|
||||
'target': 'https://api.douban.com/',
|
||||
'changeOrigin': true,
|
||||
'changeOrigin': true,
|
||||
},
|
||||
},
|
||||
layout: {
|
||||
@ -34,8 +34,10 @@ export default {
|
||||
navigation: 'mixin',
|
||||
menus: [{
|
||||
name: 'index',
|
||||
icon: 'user'
|
||||
}, {
|
||||
name: 'onepiece',
|
||||
icon: 'user',
|
||||
path: 'https://www.baidu.com'
|
||||
}, {
|
||||
name: 'store'
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
</template>
|
||||
<script>
|
||||
import Spin from 'ant-design-vue/lib/spin';
|
||||
import 'ant-design-vue/lib/spin/style';
|
||||
import 'ant-design-vue/lib/spin/style/css';
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user