贼好用的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": {}
}
相关推荐
天涯倦客的美丽人生1 小时前
2024年11月最新版Adobe PhotoShop(26.0)中文版下载
ui·adobe·photoshop
上优5 小时前
uniapp 选择 省市区 省市 以及 回显
大数据·elasticsearch·uni-app
初九之潜龙勿用12 小时前
C#校验画布签名图片是否为空白
开发语言·ui·c#·.net
MediaTea13 小时前
七次课掌握 Photoshop:绘画与修饰
ui·photoshop
耶啵奶膘16 小时前
uniapp+vue2全局监听退出小程序清除缓存
小程序·uni-app
syj_11118 小时前
初识ArkUI
ui·arkts·arkui
我开心就好o1 天前
uniapp点左上角返回键, 重复来回跳转的问题 解决方案
前端·javascript·uni-app
Random_index1 天前
#Uniapp篇:支持纯血鸿蒙&发布&适配&UIUI
uni-app·harmonyos
芋芋qwq1 天前
Unity UI射线检测 道具拖拽
ui·unity·游戏引擎
鸿蒙自习室1 天前
鸿蒙多线程开发——线程间数据通信对象02
ui·harmonyos·鸿蒙