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

<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>