| 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273 |
- <template>
- <view :id="id" :name="name" :change:name="svg.nameChange" :width="width" :height="height"
- :change:width="svg.widthChange" :change:height="svg.heightChange" :style="{width:boxWidth,height:boxHight}"></view>
- </template>
- <script>
- export default {
- props: {
- id: {
- type: String,
- default: ''
- },
- name: {
- type: String,
- default: ''
- },
- width: {
- type: Number,
- default: 0
- },
- height: {
- type: Number,
- default: 0
- },
- },
- data() {
- return {
- boxWidth: '',
- boxHight: ''
- }
- },
- methods: {
- onMessage({
- width,
- height
- }) {
- this.boxWidth = width + 'px';
- this.boxHight = height + 'px';
- }
- }
- }
- </script>
- <script module="svg" lang="renderjs">
- import {
- SVG
- } from '../../svg.js';
- export default {
- mounted() {
- this.init()
- },
- methods: {
- init() {
- const icon = require(`@/static/svg/${this.name}.svg`)
- const img = new Image();
- img.src = icon;
- img.onload = () => {
- const width = this.width ? this.width : img.width;
- const height = this.height ? this.height : img.height;
- this.$ownerInstance.callMethod('onMessage', {
- width,
- height
- })
- let draw = SVG().addTo(`#${this.id}`).size(width, height)
- draw.image(icon).size(width, height)
- }
- }
- }
- }
- </script>
- <style scoped>
- </style>
|