gs-svg-icon v0.1.1

gs-svg-icon

Project setup

npm install gs-svg-icon

说明

图形编辑器使用说明

一.图形编辑器画图

http://law-k8s.internal.gridsumdissector.com:42577/#/home/editor

一.导入元件

在元件管理页面导入你画图所需要的元件,建议分组,方便管理

二.画图

1.拖拽元件至画布根据所需进行图形编辑(功能比较多,使用比较简单,不赘述,只介绍重要步骤)

2.根据所需,若改元件需要动态数据绑定或者事件绑定,则需要给元件设置id,选中元件即可进行编辑

3.画图编辑好,若需要保存则可以点击新建保存到库中,下次可以重复使用,也可以进行编辑

4.点击导出svg可以生成svg文件,此文件会应用到业务系统中

二.业务系统应用画图

一.下载gs-svg-icon依赖

npm install @ld/gs-svg-icon 此依赖使用图形编辑器导出的svg文件

二.使用gs-svg-icon

1.html编写

 <div class="container-right">
    <gs-svg-icon :svg="url" :configs="configs" :showId="true" v-model="vue"></gs-svg-icon>
 </div>

gs-svg-icon组件的宽高依赖于外部div的宽高

2.js编写

<script>
import svg from './assets/test12.svg'
import air0 from './assets/pic/AirCooled_0_0.png'
import air1 from './assets/pic/AirCooled_0_1.png'
import air2 from './assets/pic/AirCooled_0_2.png'
import pump1 from './assets/pic/Pump2_4_001.png'
export default {
  components: {},
  data () {
    return {
      url: svg,
      vue: this,
      configs: [
        {
          key: 'test1',
          text: '测试一下',
          href: pump1,
          events: {
            click: function (target) {
              console.log(target)
              console.log('鼠标点击事件')
            },
            mouseover: function (target) {
              // console.log(target)
              // console.log('鼠标移入事件')
            },
            mouseout: function (target) {
              // console.log(target)
              // console.log('鼠标移出事件')
            },
            load: function (target) {
              this.getGif(target)
            }
          }
        }
      ],
      // configs: [],
      timer: null
    }
  },
  mounted () {

  },
  beforeDestroy () {
    clearInterval(this.timer)
  },
  methods: {
    getGif (target) {
      let image = target.querySelector('image')
      let count = 0
      function changePic () {
        if (count === 0) {
          count++
          image.setAttribute('xlink:href', air0)
        } else if (count === 1) {
          count++
          image.setAttribute('xlink:href', air1)
        } else if (count >= 2) {
          count = 0
          image.setAttribute('xlink:href', air2)
        }
      }
      this.timer = setInterval(changePic, 10)
    }
  }
}
</script>

三.参数说明

configs: [
         {
          key: 'test1', // 元件的id值
          text: '测试一下', // 元件绑定的文本,为空则为默认svg的文本
          href: pump1, // 元件图片的链接,为空则为默认svg的元件的图片
          events: {
            click: function (target) {
              console.log(target)
              console.log('鼠标点击事件')
            },
            mouseover: function (target) {
              // console.log(target)
              // console.log('鼠标移入事件')
            },
            mouseout: function (target) {
              // console.log(target)
              // console.log('鼠标移出事件')
            },
            load: function (target) {
              this.getGif(target)
            }
          }
        }
      ]
svg: svg, // svg文件的路径
showId: true // 为true时显示元件id,为false则不显示,开发时方便建议开启为true,部署改成false
v-model: vue // 绑定当前vue实例,用于回调方法使得this指向vue实例