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

本文主要是介绍svg图标封装--基于vue2适配uniapp全端，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

第一步：新建svg目录

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

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

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

 

代码实现：

<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文件下

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

第四步：页面使用

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

<svg-icon :src="'xin'" ></svg-icon>

这篇关于svg图标封装--基于vue2适配uniapp全端的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---