c5_labsci/fapp/ciyon_ap/components/ciy-svgimg/ciy-svgimg.vue

88 lines
1.7 KiB
Vue

<template>
<template v-if="!src"></template>
<image v-else-if="type == 'img'" class="_wh100" :src="srcdata" :mode="mode" :style="cstyle" />
<view v-else-if="type == 'svg'" class="_wh100" :style="cstyle"></view>
</template>
<style scoped>
._wh100 {
width: 100%;
height: 100%;
}
</style>
<script>
export default {
options: {
virtualHost: false
},
props: {
src: {
type: String,
default: ''
},
mode: {
type: String,
default: 'widthFix'
},
ciystyle: {
type: [String, Object]
}
},
data() {
return {
type: '',
srcdata: '',
};
},
watch: {
src: {
handler(newD, oldD) {
if (typeof(newD) != 'string')
return;
if (newD.substring(0, 5).toLowerCase() == '<svg ') {
this.type = 'svg';
this.srcdata = this.svg2bg(newD);
return;
}
var ext = this.file_ext(newD);
if (ext == 'SVG') {
uni.request({
url: this.file_stor(newD),
dataType: 'text',
method: 'GET',
fail: res => {
res._url = url;
this.uperr("h5.loadsvg.fail", res);
return reject({
errmsg: res.errMsg
});
},
success: res => {
this.type = 'svg';
this.srcdata = this.svg2bg(res.data);
}
});
} else {
this.type = 'img';
this.srcdata = this.file_stor(newD);
}
},
immediate: true
},
},
computed: {
cstyle() {
var csty = this.style2obj(this.ciystyle);
if (this.type == 'svg' && this.srcdata) {
if (!csty['display'])
csty['display'] = 'inline-block';
csty['backgroundImage'] = this.srcdata;
}
return csty;
}
},
mounted() {},
methods: {}
}
</script>