怎么在百度做原创视频网站,台山网站设计,外链相册,企业展厅设计图片文章目录 前言官网地址如何使用#xff1f;注意事项后言 前言 hello world欢迎来到前端的新世界 #x1f61c;当前文章系列专栏#xff1a;前端系列文章 #x1f431;#x1f453;博主在前端领域还有很多知识和技术需要掌握#xff0c;正在不断努力填补技术短板。(如果… 文章目录 前言官网地址如何使用注意事项后言 前言 hello world欢迎来到前端的新世界 当前文章系列专栏前端系列文章 博主在前端领域还有很多知识和技术需要掌握正在不断努力填补技术短板。(如果出现错误感谢大家指出) 感谢大家支持您的观看就是作者创作的动力 官网地址 地址 TMUI3.0 如何使用
下载 下载地址 实现签名板
templatetm-apptm-sheet :width662tm-text label签名板全端兼容用于签名使用。请在下方书写/tm-texttm-divider/tm-dividertm-sign-board :line-colorcolorNow :line-widthlineWidth refboard :width638 :height400/tm-sign-boardtm-divider/tm-dividerview classpy-24tm-text label选择书写颜色/tm-text/viewtm-radio-group v-modelcolorNowtm-radio :coloritem :valueitem :labelitem v-for(item, index) in colors keyindex/tm-radio/tm-radio-groupview classpy-24tm-text label拖动改变粗细/tm-text/viewtm-slider :max20 v-modellineWidth :default-valuelineWidth/tm-slidertm-divider/tm-dividerview classflex flex-row flex-centertm-button clickproxy.$refs.board.clear() label清空/tm-buttontm-button colorgreen :margin[24, 0] clicksaveImg label保存签名/tm-button/view/tm-sheet/tm-app
/template
script langts 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 refInstanceTypetypeof 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写也可以不会报错。 后言 创作不易要是本文章对广大读者有那么一点点帮助 不妨三连支持一下您的鼓励就是博主创作的动力
