vue自定义组件定义事件(基于Vue实现自定义组件的方式引入图标)
类别:编程学习 浏览量:2298
时间:2021-10-10 00:53:53 vue自定义组件定义事件
基于Vue实现自定义组件的方式引入图标前言在项目开发中,使用图标的方式有很多种,可以在iconfont上面找到合适的图标,通过http或者直接下载使用,这里我分享一种通过实现自定义组件的方式引入图标。
搭建环境这里通过@vue/cli 4.5.13新建项目,并且需要安装依赖svg-sprite-loader,用来处理对应的svg图标,方便我们使用。
安装: npm install --save-dev svg-sprite-loader
配置vue.config.js
在安装svg-sprite-loader后,新建vue.config.js来配置依赖:
// vue.config.js const { resolve } = require('path') module.exports = { chainWebpack(config) { config .module .rule('svg') .exclude .add(resolve('src/icons')) .end() config .module .rule('icons') .test(/\.svg$/) .include .add(resolve('src/icons')) .end() .use('svg-sprite-loader') .loader('svg-sprite-loader') .options({ symbolId: 'icon-[name]' }) } }
这里通过chainWebpack来做了两项配置:
- 第一个是让原来的其他处理svg的依赖不处理src/icons下我们的自定义图标文件
- 通过svg-sprite-loader来处理自定义的图标文件,options里面的设置表示,生成的svg的symbolId为icon和文件名的拼接。
在components目录下新建一个SvgIcon.vue文件:
<template> <i class="icon"> <!-- aria-hidden, 帮助残障人士阅读(设备读取内容时会跳过这个标签以免混淆) --> <svg aria-hidden="true" :width="size" :height="size" :fill="fillColor"> <use :xlink:href="iconName" rel="external nofollow" ></use> </svg> </i> </template> <script lang="ts"> import { PropType, toRefs } from 'vue' export default { props: { size: { type: Number as PropType<number>, default: 14 }, fillColor: { type: String as PropType<string>, default: '#000' }, iconName: { type: String as PropType<string>, required: true } }, setup(props: any) { const { size, fillColor, iconName: _iconName } = toRefs(props) const iconName = `#${_iconName.value}` return { size, fillColor, iconName } } } </script>
然后,新建一个icons目录,并且新建一个index文件,用来挂在组件和引入svg图标:
// index.ts import SvgIcon from '@/components/SvgIcon.vue' import { App } from 'vue' export default (app: App) => { app.component('svg-icon', SvgIcon) } const ctx = require.context('./svg', false, /\.svg$/) const requestAll = (ctx: __WebpackModuleApi.RequireContext) => ctx.keys().forEach(ctx) requestAll(ctx)
// main.ts import { createApp } from 'vue' import App from './App.vue' import installSvgIcon from '@/icons/index' const app = createApp(App) installSvgIcon(app) app.mount('#app')
这个文件做了两件事:
- 通过导出一个方法来挂载全局组件svg-icon;
- 通过require.context来实现自动化引入svg目录下的图标文件。
首先,我们要在icons/svg目录下存放svg图标文件(在iconfont上找自己需要的);
然后,就可以在其他地方使用啦:
<template> <img alt="Vue logo" src="./assets/logo.png"> <svg-icon icon-name="icon-dashboard"></svg-icon> <HelloWorld msg="Welcome to Your Vue.js + TypeScript App"/> </template>
直接通过组件svg-icon的方式引入,然后传入icon-name即可,icon-name的值由icon拼接svg文件名组成。
总结这种自定义方式引入svg图标的方式,还是挺方便的,想要加上一个图标的时候,几步即可:
- 直接下载好svg文件放入对应目录中;
- 接着通过svg-icon组件来引入。
但是,修改样式时不能通过css来修改,这点就不太方便了。
到此这篇基于Vue实现自定义组件的方式引入图标的文章就介绍到这了,更多相关Vue自定义的图标组件内容请搜索开心学习网以前的文章或继续浏览下面的相关文章希望大家以后多多支持开心学习网!
您可能感兴趣
- vue的弹框怎么用(vue自定义弹框效果确认框、提示框)
- vue走马灯特效(Javascript结合Vue实现对任意迷宫图片的自动寻路)
- vue中怎么触发复选框的点击事件(vue点击弹窗自动触发点击事件的解决办法模拟场景)
- 小白vue教学(尤大大新活petite-vue的实现)
- vue十大基础知识(vue实战中的一些实用小魔法汇总)
- vue router用法(如何在Vue 3中扩展Vue Router链接详解)
- vue如何在tab标签页循环加定时器(vue实现tab标签标签超出自动滚动)
- vue如何导入excel(Vue实现导入Excel功能步骤详解)
- vuex中action的值怎么接(vuex中Getter的用法详解)
- vue实现双向绑定原理(vue实现双向数据绑定)
- vue验证码(vue_drf实现短信验证码)
- vueelementui组件生成页面(Vue Element前端应用开发之树列表组件)
- vue请求token无效(关于Vue 消除Token过期时刷新页面的重复提示问题)
- vue双向数据绑定js如何实现(纯JS如何实现vue.js下的双向绑定功能)
- vue项目步骤(Vue项目中常用的实用技巧汇总)
- vue 计算一段时间的月份和天数(vue实现指定日期之间的倒计时)
- 自制橡皮泥(自制橡皮泥)
- 还在卖 禁药西布曲明网上论斤卖(还在卖禁药西布曲明网上论斤卖)
- 微商在朋友圈热卖的 DL减肥咖啡 含违禁药物,你还敢买吗(微商在朋友圈热卖的)
- 八一节,说说中国女兵(八一节说说中国女兵)
- 王治郅菜鸟赛季已让八一带入正轨,大郅七大经典语录或是成功秘诀(王治郅菜鸟赛季已让八一带入正轨)
- 庆八一,重读经典红色语录,感悟互联网发展硬道理(重读经典红色语录)
热门推荐
- dedecms手册教程(dedecms标签大全非常经典)
- Response.Expires的用法
- vue图片怎么上传服务器(vue-cropper组件实现图片切割上传)
- 详解Python locals()的陷阱(详解Python locals的陷阱)
- dedecms系统参数设置(DedeCMS 5 .7 自定义表单制作和调用办法[图文])
- mysql存储过程声明(MySQL存储过程的深入讲解in、out、inout)
- dedecms导入doc插件(DEDECMS教程之静态模板类类文件)
- sql server中dense_rank和row_number的区别
- C#正则表达式验证是否日期
- vue3 props用法(vue3组合API中setup、 ref、reactive的使用大全)
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9