签名板 SignBoard ​

<template>
    <tm-app>
        <tm-sheet :width="662">
            <tm-text label="签名板全端兼容，用于签名使用。请在下方书写"></tm-text>
            <tm-divider></tm-divider>
			<tm-sign-board :line-color="colorNow" :line-width="lineWidth" ref="board" :width="638" :height="400"></tm-sign-board>
            <tm-divider></tm-divider>
            <view class="py-24">
                <tm-text label="选择书写颜色"></tm-text>
            </view>
            <tm-radio-group v-model="colorNow">
                <tm-radio :color="item" :value="item" :label="item" v-for="(item,index) in colors" key="index"></tm-radio>

            </tm-radio-group>
            <view class="py-24">
                <tm-text label="拖动改变粗细"></tm-text>
            </view>
            <tm-slider :max="20" v-model="lineWidth" :default-value="lineWidth"></tm-slider>
            <tm-divider></tm-divider>
            <view class="flex flex-row flex-center">
                <tm-button @click="proxy.$refs.board.clear()" label="清空"></tm-button>
                <tm-button color="green" :margin="[24,0]" @click="saveImg" label="保存签名"></tm-button>
            </view>
		</tm-sheet>
    </tm-app>
</template>
<script lang="ts" setup>
import { ref,getCurrentInstance,computed } from "vue"
import { onShow, onLoad } from "@dcloudio/uni-app";
import tmApp from "@/tmui/components/tm-app/tm-app.vue"
import tmSheet from "@/tmui/components/tm-sheet/tm-sheet.vue"
import tmText from "@/tmui/components/tm-text/tm-text.vue"
import tmButton from "@/tmui/components/tm-button/tm-button.vue"
import tmSignBoard from "@/tmui/components/tm-sign-board/tm-sign-board.vue"
import tmDivider from "@/tmui/components/tm-divider/tm-divider.vue"
import tmRadioGroup from "@/tmui/components/tm-radio-group/tm-radio-group.vue"
import tmRadio from "@/tmui/components/tm-radio/tm-radio.vue"
import tmSlider from "@/tmui/components/tm-slider/tm-slider.vue"
const {proxy} = getCurrentInstance()
const board = ref<InstanceType<typeof tmSignBoard> | null>(null)

const colors = ["red","blue","black","green"]
const colorNow = ref("red")
const lineWidth = ref(5)
const saveImg = async ()=>{
   let src = await board.value?.save();
   uni.showToast({title:"成功，请查看日志",icon:"none"})
   // #ifndef H5
   uni.previewImage({
   	current:src,
   	urls:[src]
   })
   // #endif
}

</script>