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

更多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目录里

相关推荐
别拿曾经看以后~7 分钟前
【el-form】记一例好用的el-input输入框回车调接口和el-button按钮防重点击
javascript·vue.js·elementui
我要洋人死10 分钟前
导航栏及下拉菜单的实现
前端·css·css3
科技探秘人21 分钟前
Chrome与火狐哪个浏览器的隐私追踪功能更好
前端·chrome
科技探秘人22 分钟前
Chrome与傲游浏览器性能与功能的深度对比
前端·chrome
JerryXZR27 分钟前
前端开发中ES6的技术细节二
前端·javascript·es6
七星静香29 分钟前
laravel chunkById 分块查询 使用时的问题
java·前端·laravel
q24985969332 分钟前
前端预览word、excel、ppt
前端·word·excel
小华同学ai37 分钟前
wflow-web:开源啦 ,高仿钉钉、飞书、企业微信的审批流程设计器,轻松打造属于你的工作流设计器
前端·钉钉·飞书
Gavin_9151 小时前
【JavaScript】模块化开发
前端·javascript·vue.js
懒大王爱吃狼2 小时前
Python教程:python枚举类定义和使用
开发语言·前端·javascript·python·python基础·python编程·python书籍