前言

hello world欢迎来到前端的新世界

---

😜当前文章系列专栏：前端系列文章
🐱‍👓博主在前端领域还有很多知识和技术需要掌握，正在不断努力填补技术短板。(如果出现错误，感谢大家指出)🌹
💖感谢大家支持！您的观看就是作者创作的动力

官网地址

地址

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>

注意事项

tmui采用全局TypeScript。因此任何vue页面，都将只能使用ts模式编写页面。默认采用CLI安装方式。

如果没打算好采用TypeScript编写页面，请谨慎使用本ui框架。（如果不懂ts。就当把js改成ts后缀，当js写也可以，不会报错。）

后言

创作不易，要是本文章对广大读者有那么一点点帮助 不妨三连支持一下，您的鼓励就是博主创作的动力