1.1.11 • Published 4 years ago
df-front-end-tool v1.1.11
使用指南
说明
一个前端工具集,包含图片标注、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>