图标时字符,图片时二进制流。即图片加载会比图标慢,且加载图标最好不要用img标签,我们可以把图标当成组件用import的方法引入进来,然后当成标签引入。
1.使用管理员身份运行cmd窗口,切换到项目目录下执行。
npm add svg
1.阿里图标库
https://www.iconfont.cn/
2.下载svg
3.在compone目录下建立一个icons,在icons下建立一个svg目录,专门用来放图标。
1 定义动态组件MyIcon.vue
1.其中myicon是从父组件传过来的属性
2.computed是用来根据myicon.name(图标的名字)来动态生成图标地址的。原因是在export default{}外引入组件时,我们接收到的props属性是传递不到export default{}外面的,所以采用computed来协助生成icon组件。
3.:style是动态绑定样式,此处绑定了宽,高。并在props中设置了默认值,如果父组件不传递宽高信息的话,就是使用默认值。
4.:fill是绑定填充属性样式的,也在props中设置了默认值。
<template> <div> <component :is="icon" :style="{width : myicon.width , hight : myicon.hight}" :fill="myicon.fill" ></component> </div> </template> <script> export default{ props:{ myicon:{ name:{ type:String }, width:{ type:String, default:'40px' }, hight:{ type:String, default:'40px' }, fill:{ type:String, default:'#000000' } } }, computed:{ icon(){ return () => import('@/components/icons/svg/'+ this.myicon.name +'.svg?inline') } } } </script> <style> </style>
2 在main,js中全局引入并定义组件MyIcon.vue
import mysvg from '@/components/MyIcon.vue' Vue.component('my-icon',mysvg)
3 调用my-icon作为父组件
1.把要传递的属性定义在myicon:{}中,其中name是必填项,它是图标的名字,不带后缀。
<template> <my-icon :name = "scope.row.icon" :width = "50px" :hight = "50px" :fill = "#ff00ff"> </my-icon> </template> <script> export default { data() { return { myicon:{ name: "position", width: "60px", hight: "60px", fill : "#ff00ff" }, } }, } </script> <style scoped lang="less"> </style>