推荐一个非常好用的uniapp的组件库【TMUI3.0】
文章目录
- 前言
- 官网地址
- 如何使用?
- 注意事项
- 后言
前言
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写也可以,不会报错。)
后言
创作不易,要是本文章对广大读者有那么一点点帮助 不妨三连支持一下,您的鼓励就是博主创作的动力
相关文章:
推荐一个非常好用的uniapp的组件库【TMUI3.0】
文章目录 前言官网地址如何使用?注意事项后言 前言 hello world欢迎来到前端的新世界 😜当前文章系列专栏:前端系列文章 🐱👓博主在前端领域还有很多知识和技术需要掌握,正在不断努力填补技术短板。(如果…...
LeetCode(19)最后一个单词的长度【数组/字符串】【简单】
目录 1.题目2.答案3.提交结果截图 链接: 58. 最后一个单词的长度 1.题目 给你一个字符串 s,由若干单词组成,单词前后用一些空格字符隔开。返回字符串中 最后一个 单词的长度。 单词 是指仅由字母组成、不包含任何空格字符的最大子字符串。 …...
使用Docker本地安装部署Drawio绘图工具并实现公网访问
目录 前言 1. 使用Docker本地部署Drawio 2. 安装cpolar内网穿透工具 3. 配置Draw.io公网访问地址 4. 公网远程访问Draw.io 前言 提到流程图,大家第一时间可能会想到Visio,不可否认,VIsio确实是功能强大,但是软件为收费&…...
IDEA导入jar包
通过maven导入本地包 mvn install:install-file -DfileD:\WebProject\ERP\zhixing-heyue-erp-server\zxhy-service-api\src\main\java\com\zxhy\service\api\invoice\baiwang\lib\com_baiwang_bop_sdk_outer_3_4_393.jar -DgroupIdcom.baiwang -DartifactIdbaiwang.open -Dver…...
使用flutter的Scaffold脚手架开发一个最简单的带tabbar的app模板
flutter自带的scaffold脚手架可以说还是挺好用的,集成了appBar,还有左侧抽屉,还有底部tabbar,可以说拿来就可以用了啊,所以我今天也体验了一下,做了一个最简单的demo,就当是学习记录了。 效果展…...
aws服务器配置密码登陆
在 AWS 上,EC2 实例默认使用密钥对进行身份验证,而不是密码登录。不过,你可以通过以下步骤在 EC2 实例上启用密码登录: 登录 AWS 管理控制台并导航到 EC2 服务。 选择要配置密码登录的目标 EC2 实例。 在底部的 “描述” 标签页…...
【命令行魔法:掌握Linux基础工具开发的独门技艺】
本节目标 1.Linux 软件包管理器 2.Linux开发工具 3.Linux编译器-gcc/g使用 4.Linux项目自动化构建工具-make/Makefile 5.Linux第一个小程序-进度条 1.Linux 软件包管理器 yum 什么是软件包 在Linux下安装软件, 一个通常的办法是下载到程序的源代码, 并进行编译…...
虚拟DOM的原理和理解
Virtual DOM前言 在传统的Web开发中,直接操作真实的DOM通常是一个昂贵且低效的操作。为了解决这个问题,Virtual DOM(虚拟DOM)被引入为一个中间层,允许开发者在内存中进行操作,从而避免频繁且不必要的真实DO…...
C# WPF Threads 和 Dispatchers 有什么区别
在C# WPF(Windows Presentation Foundation)中,Threads(线程)和Dispatchers(调度器)之间的关系非常重要,因为WPF是一个基于STA(单线程单元)的UI框架。 Threa…...
【文末送书——数学经典著作】工科必备的数学思维培养
欢迎关注博主 Mindtechnist 或加入【智能科技社区】一起学习和分享Linux、C、C、Python、Matlab,机器人运动控制、多机器人协作,智能优化算法,滤波估计、多传感器信息融合,机器学习,人工智能等相关领域的知识和技术。关…...
【云备份项目两万字总结】服务端篇 -----附源码
项目总结 整体回顾逐步实现utill.hppconfig.hppdata.hpphot.hppservice.hpp 代码 整体回顾 服务端的目标是: 对客户端的请求进行处理管理客户端上传的文件 于客户端进行数据交换,我们需要引入网络,所以我们引入第三方库----httplib.h库&am…...
蓝眼开源云盘部署全过程(手动安装)
环境概述: 系统-Centos7.4 数据库-MySQL8 云盘系统-Tank4.0.1 前提:操作系统已完成安装,有外部网络。 一.安装数据库 cd到合适的目录进行下载安装操作,期间不要切换出去。 wget https://dev.mysql.com/get/mysql80-community-r…...
aliyun Rest ful api V3版本身份验证构造
aliyun Rest ful api V3版本身份验证构造 参考官网:https://help.aliyun.com/zh/sdk/product-overview/v3-request-structure-and-signature?spma2c4g.11186623.0.0.787951e7lHcjZb 构造代码 :使用GET请求进行构造,算法使用sha256 使用postm…...
windows10上使用Visual Studio对树莓派进行交叉编译示例
本文主要介绍通过Visual Studio对树莓派进行交叉编译的方法。 1 环境 宿主机: 系统:Windows10 开发平台:Visual Studio 2022 (我用的是社区版) VisualGDB: VisualGDB - Download (我下的试用版本) GNU工具链: Prebuilt GNU toolchain f…...
flutter开发web应用支持浏览器跨域设置
开发web应用难免会遇到跨域问题,所以flutter设置允许web跨域的设置是要在你的flutter安装路径下面 flutter\bin\cache 找到flutter_tools.stamp文件,然后删除掉:这个文件是临时缓存文件 然后找到 flutter\packages\flutter_tools\lib\src\web…...
C#调用C++动态库接口函数和回调函数方法
这篇文章主要介绍了C#调用C动态库接口函数和回调函数方法,通过C端编写接口展开内容,文章介绍详细具有一定的参考价值,需要的小伙伴可以参考一下 需求: 当前C已经写好了一个动态库,完成了产品开发需求,C#需要调用C编写…...
3D造型渲染软件DAZ Studio mac中文版介绍
DAZ Studio mac是一款3D造型和渲染软件,由 Daz 3D 公司开发。它允许用户创建、编辑、动画化并渲染精美的数字图像与动画。DAZ Studio 还提供了一个虚拟的3D艺术家工作室环境,让用户可以轻松地设置场景、布置角色和应用材质。 用户可以通过 DAZ Studio 中…...
破解tomcat密码并上传webshell
tomcat基础认证爆破 暴力破解 进入vulnhub的tomcat8目录,启动环境 由于tomcat密码默认最大尝试错误次数为5次,需要修改server.xml,修改下面字段 failureCount"10000000000" lockOutTime"0"tomcat默认界面,…...
Java 8 Stream 的使用场景
Java 8 Stream 的使用场景 只符合所筛选条件至多一条 CommonArea l common.stream().filter(item ->item.getName().equals("aa")).findAny().orElse(null);返回多条记录 List<Object> list common.stream().filter(item -> item.getName().equals(&…...
图片转换到PDF
把一系列图片整合到PDF格式 Python代码 import os from io import BytesIO from PIL import Imageos.environ[NLS_LANG] SIMPLIFIED CHINESE_CHINA.UTF8 SUPPORT_SUFFIX ["jpg", "jpeg", "png"]def pic_to_pdf(image_bytes: bytes) -> byt…...
League-Toolkit:重新定义英雄联盟游戏体验的智能助手
League-Toolkit:重新定义英雄联盟游戏体验的智能助手 【免费下载链接】League-Toolkit 兴趣使然的、简单易用的英雄联盟工具集。支持战绩查询、自动秒选等功能。基于 LCU API。 项目地址: https://gitcode.com/gh_mirrors/le/League-Toolkit League-Toolkit …...
3分钟掌握的网盘密码解析黑科技:让提取码自动获取效率提升10倍
3分钟掌握的网盘密码解析黑科技:让提取码自动获取效率提升10倍 【免费下载链接】baidupankey 项目地址: https://gitcode.com/gh_mirrors/ba/baidupankey 你是否曾经因为寻找百度网盘分享链接的提取码而浪费大量时间?传统方式下,用户…...
YOLO12入门必看:从上传图片到JSON结果输出完整操作流程
YOLO12入门必看:从上传图片到JSON结果输出完整操作流程 1. 引言:为什么你需要了解YOLO12? 如果你正在寻找一个既快又准的目标检测工具,那么YOLO12的出现,可能就是你一直在等的那个答案。 想象一下这样的场景&#x…...
别再死记硬背GAT公式了!用Python+PyTorch手把手图解注意力机制(附代码)
图解GAT:用PythonPyTorch拆解图注意力机制的实现奥秘 当你第一次听说图注意力网络(GAT)时,是否被那些复杂的数学公式和抽象概念吓退?本文将以全新的可视化方式,带你从零实现一个完整的GAT层,用代…...
Bootstrap4 导航栏详解
Bootstrap4 导航栏详解 引言 Bootstrap 是一个流行的前端框架,它为开发者提供了丰富的组件和工具,以快速构建响应式、移动优先的网站和应用程序。导航栏是网站的重要组成部分,它能够帮助用户轻松地在网站的不同页面之间导航。Bootstrap4 提供…...
基于SpringBoot+Vue的月度员工绩效考核管理系统管理系统设计与实现【Java+MySQL+MyBatis完整源码】
摘要 现代企业管理中,绩效考核是提升员工工作效率、优化人力资源配置的重要手段。传统的绩效考核多依赖纸质记录或简单的电子表格,存在数据易丢失、统计效率低、反馈周期长等问题。随着信息化技术的发展,企业亟需一套高效、精准的绩效考核管理…...
告别布局跳动!Android Dialog+EditText+软键盘的终极适配指南(含Kotlin代码)
Android Dialog软键盘适配全攻略:从布局跳动到完美交互 在Android开发中,Dialog与软键盘的交互一直是让开发者头疼的问题。当EditText获得焦点时,弹出的软键盘经常会遮挡输入框或导致布局跳动,严重影响用户体验。本文将深入探讨Di…...
Pixel Epic效果展示:支持Markdown+LaTeX混合输出的学术论文初稿生成案例
Pixel Epic效果展示:支持MarkdownLaTeX混合输出的学术论文初稿生成案例 1. 像素史诗:科研写作的新范式 在传统学术写作工具普遍沉闷单调的背景下,Pixel Epic带来了一场视觉与功能双重革新的科研体验。这款基于AgentCPM-Report大模型的智能终…...
深入解析GNSS信号跟踪环路:从PLL/DLL原理到Python仿真实践
1. GNSS信号跟踪环路基础概念 当你用手机导航时,背后其实藏着一套精密的信号追踪系统。想象一下,头顶的GPS卫星就像演唱会上的歌手,而你的手机接收机则是要听清歌词的观众。但现实中存在两个主要干扰:一是你和歌手都在移动&#x…...
保姆级教程:从GEO下载Hi-C数据到HiC-Pro完整分析(避坑指南+实战脚本)
从零开始掌握Hi-C数据分析:HiC-Pro全流程实战与避坑指南 Hi-C技术已经成为三维基因组研究的重要工具,但对于刚接触生物信息学的研究人员来说,从原始数据到最终分析结果的过程往往充满挑战。本文将带你完整走通Hi-C数据分析全流程,…...
