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

相关推荐
AI+程序员在路上33 分钟前
Qt6中模态与非模态对话框区别
开发语言·c++·qt
nbsaas-boot5 小时前
Java 正则表达式白皮书:语法详解、工程实践与常用表达式库
开发语言·python·mysql
chao_7895 小时前
二分查找篇——搜索旋转排序数组【LeetCode】两次二分查找
开发语言·数据结构·python·算法·leetcode
一斤代码6 小时前
vue3 下载图片(标签内容可转图)
前端·javascript·vue
风无雨6 小时前
GO 启动 简单服务
开发语言·后端·golang
斯普信专业组6 小时前
Go语言包管理完全指南:从基础到最佳实践
开发语言·后端·golang
3Katrina7 小时前
深入理解 useLayoutEffect:解决 UI "闪烁"问题的利器
前端·javascript·面试
coderlin_8 小时前
BI布局拖拽 (1) 深入react-gird-layout源码
android·javascript·react.js
我是苏苏8 小时前
C#基础:Winform桌面开发中窗体之间的数据传递
开发语言·c#
伍哥的传说8 小时前
React 实现五子棋人机对战小游戏
前端·javascript·react.js·前端框架·node.js·ecmascript·js