svg-icon.vue 1.3 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273
  1. <template>
  2. <view :id="id" :name="name" :change:name="svg.nameChange" :width="width" :height="height"
  3. :change:width="svg.widthChange" :change:height="svg.heightChange" :style="{width:boxWidth,height:boxHight}"></view>
  4. </template>
  5. <script>
  6. export default {
  7. props: {
  8. id: {
  9. type: String,
  10. default: ''
  11. },
  12. name: {
  13. type: String,
  14. default: ''
  15. },
  16. width: {
  17. type: Number,
  18. default: 0
  19. },
  20. height: {
  21. type: Number,
  22. default: 0
  23. },
  24. },
  25. data() {
  26. return {
  27. boxWidth: '',
  28. boxHight: ''
  29. }
  30. },
  31. methods: {
  32. onMessage({
  33. width,
  34. height
  35. }) {
  36. this.boxWidth = width + 'px';
  37. this.boxHight = height + 'px';
  38. }
  39. }
  40. }
  41. </script>
  42. <script module="svg" lang="renderjs">
  43. import {
  44. SVG
  45. } from '../../svg.js';
  46. export default {
  47. mounted() {
  48. this.init()
  49. },
  50. methods: {
  51. init() {
  52. const icon = require(`@/static/svg/${this.name}.svg`)
  53. const img = new Image();
  54. img.src = icon;
  55. img.onload = () => {
  56. const width = this.width ? this.width : img.width;
  57. const height = this.height ? this.height : img.height;
  58. this.$ownerInstance.callMethod('onMessage', {
  59. width,
  60. height
  61. })
  62. let draw = SVG().addTo(`#${this.id}`).size(width, height)
  63. draw.image(icon).size(width, height)
  64. }
  65. }
  66. }
  67. }
  68. </script>
  69. <style scoped>
  70. </style>