贼好用的Uniapp的UI组件库Thor UI

说明

官网地址

同时兼容(vue2和vue3)以及以下平台

  • 微信小程序
  • uni-app
  • h5
  • 支付宝小程序
  • 百度小程序
  • 头条小程序

使用方式

官方文档页面

uniapp插件市场

前往插件市场导入到Hbuilder里面

然后会在Hbuilder里面创建一个项目,点击创建即可

运行项目可以发现这个组件库所有的组件样式

将这个项目的components复制一份到我们的uniapp项目的根目录下

使用

任意找个.vue项目页面

vue2的.vue页面使用示例

需要导入-注册-使用

js 复制代码
<template>
	<div>
		<tui-button>页面主操作</tui-button>
		<tui-button type="warning">页面次要操作</tui-button>
		<tui-button type="danger">页面次要操作</tui-button>
		<tui-button type="gray-primary">页面次要操作</tui-button>
	</div>
</template>

<script>
	import tuiButton from "@/components/thorui/tui-button/tui-button.vue"
	export default {
		components:{
			tuiButton
		},
		data() {
			return {
			}
		},
		methods: {
		}
	}
</script>

<style scoped>

</style>

vue3的.vue页面使用示例

js 复制代码
<template>
	<div>
		vue3
		<tui-button>页面主操作</tui-button>
		<tui-button type="warning">页面次要操作</tui-button>
		<tui-button type="danger">页面次要操作</tui-button>
		<tui-button type="gray-primary">页面次要操作</tui-button>
	</div>
</template>

<script setup>
	import tuiButton from "@/components/thorui/tui-button/tui-button.vue"
</script>

<style>
</style>

这样页面就可以显示了

配置全局使用

大家可能会发现,不管是vue2还是vue3都是需要导入才能使用的,下面这个配置可以无需重复导入,直接就可以使用

pages.json里面新增

js 复制代码
{
	"pages": [ 
		// ...
	],
	"globalStyle": {
		// ...
	},
	// 新增easycom节点,做如下配置即可
	// 如果是npm安装的组件,官方也有配置说明,具体查看官方文档,我这里只演示这一种使用方式
	"easycom": {
		"autoscan": true,
		"custom": {
			"tui-(.*)": "@/components/thorui/tui-$1/tui-$1.vue"
		}
	},
	"uniIdRouter": {}
}
相关推荐
2501_916007474 小时前
iOS 26 软件性能测试 新版系统下评估全流程 + 多工具辅助方案
android·macos·ios·小程序·uni-app·cocoa·iphone
xiaohe06014 小时前
🎉 Uni ECharts 2.0 正式发布:原来在 uni-app 中使用 ECharts 可以如此简单!
uni-app·echarts
00后程序员张5 小时前
Swoole HTTPS 实战,在生产环境部署、性能权衡与排查流程
后端·ios·小程序·https·uni-app·iphone·swoole
Stringzhua7 小时前
ElementUi【饿了么ui】
前端·ui·elementui
啊森要自信7 小时前
【GUI自动化测试】Python 自动化测试框架 pytest 全面指南:基础语法、核心特性(参数化 / Fixture)及项目实操
开发语言·python·ui·单元测试·pytest
2501_915909068 小时前
iOS App 上架全流程详解:证书配置、打包上传、审核技巧与跨平台上架工具 开心上架 实践
android·ios·小程序·https·uni-app·iphone·webview
2501_915106328 小时前
iOS 26 系统流畅度测试实战分享,多工具组合辅助策略
android·macos·ios·小程序·uni-app·cocoa·iphone
2501_915918418 小时前
开发 iOS 应用全流程指南,环境搭建、证书配置与跨平台使用 开心上架 上架AppStore
android·ios·小程序·https·uni-app·iphone·webview
2501_9159214317 小时前
iOS 是开源的吗?苹果系统的封闭与开放边界全解析(含开发与开心上架(Appuploader)实战)
android·ios·小程序·uni-app·开源·iphone·webview
程序员正茂20 小时前
Unity3d中Tab控件的实现
ui·unity·tab·控件