uniapp中封装一个svg转base64的组件

uniapp中由于不支持svg--》base64,同时无法使用h5中atob,这里我们采用js-base64插件实现这样一个组件,只要传人svg的代码即可在uniapp中转为base64,同时支持自定义参数,比如宽度,高度,等

1 安装

复制代码
npm install --save js-base64

2 组件

复制代码
<template>
	<!-- <image 
	class="img"
	 
	 :style="[{
				width:transformPxToVw(width) + 'vw',
				height:transformPxToVw(height) + 'vw',
                transform:'rotate(' + lastDeg + 'deg)'
				
			}]" 
	:src="base64String"></image> -->
	
	
</template>
<script>
	import { Base64 } from 'js-base64';

	export default {
		props:{
			svgTxt:{
				type:String,
				default:""
			},
			width:{
				type:Number,
				default:20
			},
			height:{
				type:Number,
				default:20
			},
			deg:{
				type:Number,
				default:0
			}
		},
		mounted(){
			this.transformSvgToBase64(this.svgTxt)
		},
		
		data() {
			return {
				
				base64String:"",
				toggle:false,
				lastDeg:0
				
			}
		},
		methods: {
			transformSvgToBase64(svgTxt){
				this.base64String = 'data:image/svg+xml;base64,' + Base64.encode(svgTxt);
			},
			transformPxToVw(num,designWidth=375){
				let vwVal=(100/designWidth)*num;
				return vwVal.toFixed(3)
			},
            handler(){
				this.toggle=!this.toggle
				this.lastDeg=this.toggle?this.deg:0
				console.log("this.lastDeg",this.lastDeg)
				
			},
			
		}
	}
</script>

<style>
.img{
	display: inline-block;
}

</style>

3 引入组件

复制代码
<Arrow2 :svgTxt="svgTxt" :width="20" :height="20" :deg="90"></Arrow2>

data() {
			return {
				base64String:"",
				
				svgTxt:`<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
				<path d="M15.5705 8.26572C15.9061 7.95074 15.9227 7.42336 15.6078 7.0878C15.317 6.77805 14.8453 6.74 14.5105 6.98372L14.4298 7.05053L10.0061 11.204L5.5678 7.04969C5.25762 6.75939 4.78442 6.75194 4.4661 7.0168L4.38993 7.08869C4.09964 7.39887 4.09218 7.87207 4.35705 8.19039L4.42893 8.26655L9.43717 12.9538C9.73119 13.229 10.1747 13.2516 10.4933 13.0219L10.5769 12.953L15.5705 8.26572Z" fill="#A4A5B3"/>
			</svg>`,
				
			}
		},

4 添加动画

本demo通过一个箭头的svg来做例子。该组件中通过点击箭头实现旋转动画。可以自己传参数来定义箭头的旋转方向本例是通过点击选择90度

我们在组件内部定义了一个函数用于处理px单位的转化,因为style的设置无法实现px自动转为vw

相关推荐
Jedi Hongbin18 小时前
Three.js shader内置矩阵注入
前端·javascript·three.js
RickyWasYoung18 小时前
【代码】matlab-遗传算法工具箱
开发语言·matlab
掘金安东尼19 小时前
Node.js 如何在 2025 年挤压 I/O 性能
前端·javascript·github
得物技术19 小时前
前端日志回捞系统的性能优化实践|得物技术
前端·javascript·性能优化
ZKshun19 小时前
[ 前端JavaScript的事件流机制 ] - 事件捕获、冒泡及委托原理
javascript
薛定谔的算法19 小时前
JavaScript栈的实现与应用:从基础到实战
前端·javascript·算法
土了个豆子的19 小时前
03.缓存池
开发语言·前端·缓存·visualstudio·c#
_extraordinary_20 小时前
Java 多线程(一)
java·开发语言
魔云连洲20 小时前
React中的合成事件
前端·javascript·react.js
爱喝水的鱼丶20 小时前
SAP-ABAP: ABAP ASSIGN COMPONENT 语句详解:动态字段符号的利器作用用法示例详解
运维·开发语言·sap·abap·开发经验·动态字段符号