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

相关推荐
zzzyyy5382 小时前
STL简介
开发语言·c++
艾莉丝努力练剑2 小时前
【C++:继承】C++面向对象继承全面解析:派生类构造、多继承、菱形虚拟继承与设计模式实践
linux·开发语言·c++·人工智能·stl·1024程序员节
m0_748233642 小时前
C++开发中的常用设计模式:深入解析与应用场景
javascript·c++·设计模式
fruge2 小时前
TypeScript 基础类型与接口详解
javascript·ubuntu·typescript
报错小能手2 小时前
项目——基于C/S架构的预约系统平台(3)
linux·开发语言·笔记·学习·架构·1024程序员节
lsx2024062 小时前
jQuery Mobile 实例
开发语言
AI量化投资实验室3 小时前
年化591%,回撤仅7%的策略,支持订阅信号|基于AgentScope开发金融多智能体,附python代码
开发语言·python·金融
兮兮能吃能睡3 小时前
R语言众数函数分析
开发语言·r语言
AAA阿giao3 小时前
JavaScript 中的变量声明:var、let 与 const 深度解析
javascript·笔记
Wind哥3 小时前
设计模式23种-C++实现
开发语言·c++·windows·设计模式