svg-draw.vue 1.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960
  1. <template>
  2. <div class="svg-draw"></div>
  3. </template>
  4. <script>
  5. import Vivus from 'vivus';
  6. export default {
  7. // 名称
  8. name: "SvgDraw",
  9. // 使用组件
  10. components: {},
  11. // 传入参数
  12. props: {
  13. file: {
  14. type: String,
  15. required: true
  16. }
  17. },
  18. // 自定义事件
  19. emits: {},
  20. // 数据
  21. data() {
  22. return {}
  23. },
  24. // 函数
  25. methods: {
  26. play: function (speed, fun) {
  27. this.svg.play(speed, fun);
  28. }
  29. },
  30. // 生命周期钩子
  31. beforeCreate() {
  32. // 创建前
  33. },
  34. created() {
  35. // 创建后
  36. },
  37. beforeMount() {
  38. // 渲染前
  39. },
  40. mounted() {
  41. // 渲染后
  42. this.svg = new Vivus(this.$el, {
  43. file: this.file
  44. })
  45. },
  46. beforeUpdate() {
  47. // 数据更新前
  48. },
  49. updated() {
  50. // 数据更新后
  51. },
  52. }
  53. </script>
  54. <style lang="less">
  55. .svg-draw {
  56. }
  57. </style>