安阳网站优化公司推荐福建省人民政府门户网站

前言

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 H5uni.previewImage({current: src,urls: [src]})// #endif
}
</script>

注意事项

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

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

后言

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