svg图标封装--基于vue2适配uniapp全端

第一步:新建svg目录

在static目录下新建svg目录,后将所有svg图标都放到此文件夹

第二步:封装注册全局组件

(注意:在根目录下新建components文件夹)

代码实现:

html 复制代码
<template>
	<!-- svg图标 -->
	<image :style="{ height: hCom, width: wCom }" :src="svgCom" />
</template>

<script>
	export default {
		name: 'SvgIcon',
		// 接收参数
		props: {
			// svg图标地址
			src: {
				default: ''
			},
			// 宽
			w: {
				default: '24'
			},
			// 高
			h: {
				default: '24'
			}
		},
		// 计算属性拼接
		computed: {
			svgCom() {
				return `/static/svg/${this.src}.svg`;
			},
			wCom() {
				return `${this.w}px`;
			},
			hCom() {
				return `${this.h}px`;
			}
		},
		data() {
			return {};
		},
		onLoad() {},
		onShow() {},
		methods: {}
	};
</script>

<style lang="scss" scoped></style>

第三步:注册全局文件

在main.js文件下

javascript 复制代码
// svg全局组件
import SvgIcon from "@/components/SvgIcon"
Vue.component('svg-icon', SvgIcon)

第四步:页面使用

注意:已注册为全局组件,可直接在页面中引用(注意,宽高有默认值可以不传参数,xin是文件名)

html 复制代码
<svg-icon :src="'xin'" ></svg-icon>
相关推荐
自出洞来无敌手(曾令瑶)2 分钟前
浏览器 实时监听音量 实时语音识别 vue js
前端·javascript·vue.js·语音识别
在钱塘江19 分钟前
《你不知道的JavaScript-上卷》-笔记-5-作用域闭包
前端
搬砖码20 分钟前
Vue病历写回功能:实现多输入框内容插入与焦点管理🚀
前端
不简说24 分钟前
史诗级更新!sv-print虽然不是很强,但却是很能打的设计器组件
前端·产品
用户952511514015525 分钟前
最常用的JS加解密场景MD5
前端
Hilaku26 分钟前
“虚拟DOM”到底是什么?我们用300行代码来实现一个
前端·javascript·vue.js
打好高远球32 分钟前
mo契官网建设与SEO实践
前端
神仙别闹37 分钟前
基于Java+MySQL实现(Web)可扩展的程序在线评测系统
java·前端·mysql
心.c1 小时前
react当中的this指向
前端·javascript·react.js
Java水解1 小时前
Web API基础
前端