ruoyi-nbcio-plus的Vue3前端一些插件使用介绍（二）-阿里云开发者社区

ruoyi-nbcio-plus的Vue3前端一些插件使用介绍（二）

2024-05-11 43

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： ruoyi-nbcio-plus的Vue3前端一些插件使用介绍（二）

更多ruoyi-nbcio功能请看演示系统

gitee源代码地址

前后端代码： https://gitee.com/nbacheng/ruoyi-nbcio

演示地址： http://218.75.87.38:9666

更多nbcio-boot功能请看演示系统

gitee源代码地址

后端代码： https://gitee.com/nbacheng/nbcio-boot

前端代码：https://gitee.com/nbacheng/nbcio-vue.git

在线演示（包括H5）： http://218.75.87.38:9888

接上一节

6、Element Plus 组件

Element Plus 是一套为构建基于 Vue 3 的组件库而设计的 UI 组件库（UI Kit）。它为开发者提供了一套丰富的 UI 组件和扩展功能，帮助开发者快速构建高质量的 Web 应用。

主要在main.ts里引入及初始化

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';

初始化

// svg图标
import 'virtual:svg-icons-register';
import ElementIcons from '@/plugins/svgicon';
const app = createApp(App);
app.use(ElementIcons);

其中/plugins/svgicon如下：

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所以不需要主动引入，如下：

<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>