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

相关推荐
mCell3 小时前
GSAP ScrollTrigger 详解
前端·javascript·动效
gnip3 小时前
Node.js 子进程:child_process
前端·javascript
codingandsleeping8 小时前
使用orval自动拉取swagger文档并生成ts接口
前端·javascript
白水清风9 小时前
微前端学习记录(qiankun、wujie、micro-app)
前端·javascript·前端工程化
用户221520442780010 小时前
new、原型和原型链浅析
前端·javascript
阿星做前端10 小时前
coze源码解读: space develop 页面
前端·javascript
叫我小窝吧10 小时前
Promise 的使用
前端·javascript
前端康师傅11 小时前
JavaScript 作用域
前端·javascript
云枫晖11 小时前
JS核心知识-事件循环
前端·javascript
eason_fan12 小时前
Git 大小写敏感性问题:一次组件重命名引发的CI构建失败
前端·javascript