<script setup>
import {ref} from 'vue'
import {DearySign} from 'deary-sign'

const dearySignRef = ref(null)
const isCrop = false
const lineWidth = 6
const lineColor = '#000000'
const bgColor = ''
const handleReset = () => {
  dearySignRef.value.reset()
}
const handleGenerate = () => {
  dearySignRef.value.generate().then(res => {
    console.log('res', res)
  }).catch(err => {
    console.log('err', err)
  })
}
const handleGenerateFile = () => {
  dearySignRef.value.generateFile().then(res => {
    console.log('res', res)
  }).catch(err => {
    console.log('err', err)
  })
}
</script>

<template>
<div style="border: 1px solid black;margin-bottom: 20px">
  <DearySign
    ref="dearySignRef"
    :width="800"
    :height="300"
    :isCrop="isCrop"
    :lineWidth="lineWidth"
    :lineColor="lineColor"
    v-model:bgColor="bgColor"
  />
</div>
<div>
  <button class="mr10" @click="handleReset">清空画板</button>
  <button class="mr10" @click="handleGenerate">生成图片</button>
  <button @click="handleGenerateFile">生成文件</button>
</div>

</template>

<style scoped>
.mr10 {
  margin-right: 10px;
}
</style>