郑州网站建设氵汉狮网络,如何快速创建一个网站,江苏住房和城乡建设厅网站首页,wordpress移动uniapp中由于不支持svg--》base64#xff0c;同时无法使用h5中atob#xff0c;这里我们采用js-base64插件实现这样一个组件#xff0c;只要传人svg的代码即可在uniapp中转为base64#xff0c;同时支持自定义参数#xff0c;比如宽度#xff0c;高度,等
1 安装
npm inst…uniapp中由于不支持svg--》base64同时无法使用h5中atob这里我们采用js-base64插件实现这样一个组件只要传人svg的代码即可在uniapp中转为base64同时支持自定义参数比如宽度高度,等
1 安装
npm install --save js-base642 组件
template!-- image classimg:style[{width:transformPxToVw(width) vw,height:transformPxToVw(height) vw,transform:rotate( lastDeg deg)}] :srcbase64String/image --/template
scriptimport { 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/svgxml;base64, Base64.encode(svgTxt);},transformPxToVw(num,designWidth375){let vwVal(100/designWidth)*num;return vwVal.toFixed(3)},handler(){this.toggle!this.togglethis.lastDegthis.toggle?this.deg:0console.log(this.lastDeg,this.lastDeg)},}}
/scriptstyle
.img{display: inline-block;
}/style3 引入组件
Arrow2 :svgTxtsvgTxt :width20 :height20 :deg90/Arrow2data() {return {base64String:,svgTxt:svg width20 height20 viewBox0 0 20 20 fillnone xmlnshttp://www.w3.org/2000/svgpath dM15.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
