更多ruoyi-nbcio功能请看演示系统
gitee源代码地址
前后端代码: https://gitee.com/nbacheng/ruoyi-nbcio
演示地址: http://122.227.135.243:9666
更多nbcio-boot功能请看演示系统
gitee源代码地址
后端代码: https://gitee.com/nbacheng/nbcio-boot
前端代码:https://gitee.com/nbacheng/nbcio-vue.git
在线演示(包括H5) : http://122.227.135.243:9888
接上一节
6、Element Plus 组件
Element Plus 是一套为构建基于 Vue 3 的组件库而设计的 UI 组件库(UI Kit)。它为开发者提供了一套丰富的 UI 组件和扩展功能,帮助开发者快速构建高质量的 Web 应用。
主要在main.ts里引入及初始化
javascript
import { createApp } from 'vue';
import ElementPlus from 'element-plus';
import locale from 'element-plus/es/locale/lang/zh-cn'; // 中文语言
// global css
import 'uno.css';
import '@/assets/styles/index.scss';
import 'element-plus/theme-chalk/dark/css-vars.css';
初始化
javascript
// svg图标
import 'virtual:svg-icons-register';
import ElementIcons from '@/plugins/svgicon';
const app = createApp(App);
app.use(ElementIcons);
其中/plugins/svgicon如下:
javascript
import * as ElementPlusIconsVue from '@element-plus/icons-vue';
import { App } from 'vue';
export default {
install: (app: App) => {
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
app.component(key, component);
}
}
};
7、使用svg
先封装svgIcon组件,因为vue3的架构基本是集成了AutoImport和Components所以不需要主动引入,如下:
javascript
<template>
<svg
aria-hidden="true"
class="svg-icon"
:style="'width:' + size + ';height:' + size"
>
<use :xlink:href="symbolId" :fill="color" />
</svg>
</template>
<script setup lang="ts">
const props = defineProps({
prefix: {
type: String,
default: "icon",
},
iconClass: {
type: String,
required: false,
default: "",
},
color: {
type: String,
default: "",
},
size: {
type: String,
default: "1em",
},
});
const symbolId = computed(() => `#${props.prefix}-${props.iconClass}`);
</script>
<style scoped lang="scss">
.svg-icon {
display: inline-block;
width: 1em;
height: 1em;
overflow: hidden;
vertical-align: -0.15em; /* 因icon大小被设置为和字体大小一致,而span等标签的下边缘会和字体的基线对齐,故需设置一个往下的偏移比例,来纠正视觉上的未对齐效果 */
outline: none;
fill: currentcolor; /* 定义元素的颜色,currentColor是一个变量,这个变量的值就表示当前元素的color值,如果当前元素未设置color值,则从父元素继承 */
}
</style>
8、图表地址与下载
Element Plus - 293 open source icons - Iconify
上面可以下载需要的svg图标,放到本项目里的assets/icons/svg目录里