本文介绍: uniapp中由于不支持svg–》base64，同时无法使用h5中atob，这里我们采用js-base64插件实现这样一个组件，只要传人svg的代码即可在uniapp中转为base64，同时支持自定义参数，比如宽度，高度等。我们在组件内部定义了一个函数用于处理px单位的转化，因为style的设置无法实现px自动转为vw。
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
原文地址:https://blog.csdn.net/baidu_41601048/article/details/135998285
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若转载，请注明出处：http://www.7code.cn/show_65213.html
如若内容造成侵权/违法违规/事实不符，请联系代码007邮箱：suwngjj01@126.com进行投诉反馈，一经查实，立即删除！
声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。
