df-front-end-tool

使用指南

说明

一个前端工具集，包含图片标注、canvas画板等。 文档说明

1. 安装

yarn add df-front-end-tool -S
 
// or
 
npm install df-front-end-tool -S

2. main.ts

import DfFrontEndTool from 'df-front-end-tool'
import 'df-front-end-tool/lib/style/dftool.css'
 
Vue.use(DfFrontEndTool)

3. component

<template>
<div class="view-image-edit-home">
  <df-image-edit
    ref="dfImageEditUI"
    :src="imagePath"
    :title="title"
    :toolbar="toolbar"
    :saveBtnText="saveBtnText"
    :carousel="carousel"
    :preview="preview"
    @save="handleSaveImage"
  />
</div>
</template>

<script lang="ts">
import { Component, Vue, Ref, Watch } from 'vue-property-decorator'
@Component({
  name: 'ImageEditHome'
})
export default class ImageEditHome extends Vue {
  @Ref('dfImageEditUI') dfImageEditUI: any
 
  private images = [
    {
      id: 1,
      url: 'http://t8.baidu.com/it/u=1484500186,1503043093&fm=79&app=86&f=JPEG?w=1280&h=853',
      title: '🦁家族'
    },
    {
      id: 2,
      url: 'http://t9.baidu.com/it/u=1307125826,3433407105&fm=79&app=86&f=JPEG?w=5760&h=3240',
      title: '小姑凉'
    },
    {
      id: 3,
      url: 'http://t9.baidu.com/it/u=4169540006,4220376401&fm=79&app=86&f=JPEG?w=1000&h=1500',
      title: '笔筒楼'
    },
    {
      id: 4,
      url: 'http://t9.baidu.com/it/u=3363001160,1163944807&fm=79&app=86&f=JPEG?w=1280&h=830',
      title: ''
    }
  ]
 
  private saveBtnText = '保存批改'
  private toolbar = ['shapes', 'arrow', 'brush', 'text', 'choose', 'move', 'spin', 'enlarge', 'narrow', 'clear', 'restoration']
  private local = true
  private replace = false
 
  private handleSaveImage (res: { [key: string]: string }) {
    this.replace = false
    const { newImage, id } = res
    setTimeout(() => {
      // 对批注后的图片做存储或者上传操作等
      console.log(id, newImage)
      this.replace = true
    }, 2000)
  }
}
</script>