首先說加載後端svg圖片到vue項目中的方式:
- 通過v-html 綁定的方式,需要請求得到svg的xml結構的代碼
<div class="svg-view" ref="svg-view" v-html="svgXml" :style="svgStyle"></div>
- 也可以直接通過後端url地址加載svg
主要有兩種方法:embed 和 object
<vue-loading :spinning="loader">
<embed
ref="svg-embed"
:src="'api/vfs/resource/' + svgId + '?' + token"
:width="width"
:height="height"
type="image/svg+xml"
/>
</vue-loading>
<object
type="image/svg+xml"
:data="'api/vfs/resource/' + svgId + '?' + token"
class="example"
:width="width"
:height="height"
>
</object>
說明: 其中vue-loading 是加載中的一個組件
如果你想要改變svg的顏色,一定要等svg加載完成,才能通過以下方式獲取到svg,並且修改svg的顏色
var svgDom = this.$refs["svg-embed"];
let svgDoc = svgDom.getSVGDocument();
this.svgDom = svgDoc.getElementsByTagName("svg")[0];
this.svgDom.style.fill = this.color;
this.svgDom.style.backgroundColor = this.backgroundColor;
this.loader = false;
附加: ant-design-vue 自定義loading組件
<template>
<div :class="{ 'spin-nested-loading': hasContent }">
<div :class="{ hide: !spinning }">
<a-icon class="loading-icon" type="loading" />
</div>
<div :class="contentClasses" v-if="hasContent">
<slot></slot>
</div>
</div>
</template>
<script>
import Vue from "vue";
import { Icon } from "ant-design-vue";
import "ant-design-vue/lib/icon/style/css";
Vue.use(Icon);
export default {
name: "VueLoading",
props: {
size: {
type: String,
default: ""
},
tip: {
type: String
},
spinning: {
type: Boolean,
default: true
},
noDot: {
type: Boolean,
default: false
}
},
data() {
return {
hasContent: false
};
},
computed: {
contentClasses() {
return ["spin-container"];
}
},
mounted() {
this.hasContent = this.$slots.default !== undefined;
}
};
</script>
<style lang="scss" scoped>
.hide {
display: none;
}
.spin-spinning {
opacity: 0.5;
position: static;
display: inline-block;
}
.spin-nested-loading {
position: relative;
width: 100%;
height: 100%;
div {
height: 100%;
.loading-icon {
position: absolute;
top: calc(50% - 8px);
left: calc(50% - 8px);
width: 16px;
}
}
}
</style>