推荐一个非常好用的uniapp的组件库【TMUI3.0】

<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 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()?.proxy ?? null
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' })
  console.log(src)
  if (!src) return
  // #ifndef H5
  uni.previewImage({
    current: src,
    urls: [src]
  })
  // #endif
}
</script>