Tui-Plus3.0.0

Appearance

Icon (图标) ​

支持字体编辑工具添加删除定义自己喜欢的图标，

  • 支持图片；图片支持预览
  • 灵活扩展图标
  • Tui开发有字体编辑工具，可自行扩展图标。 扩展和修改我的图标
  • TuiPlus基础图标下载字体 TuiPlus组件用到的图标，不能移除只能修改和替换）
  • TuiPlus扩展图标下载 配置文件(示例项目使用到的图标，可移除)

如何扩展图标 ​

1.下载好字体图标放在项目static目录

2.配置字体 font.json

{
	"fontName": "UniImFont",
	"prefix": "im",
	"options": {
		"zuixing-81": "\ue63f", 
		...
	},
	"url": "/static/font.ttf" //网络地址，本地目录或base64都可以
}

3.app.uvue注册字体

html
<script lang="uts">
	import { TuiRegisterFontFamily } from '@/uni_modules/tui-plugins'
	import TuiFont from './config/font.json'
	import imFont from './config/uni-im-icons.json'
	let firstBackTime = 0
	export default {
		onLaunch: function () {
			TuiRegisterFontFamily(TuiFont) //注册TuiPlus扩展图标
			TuiRegisterFontFamily(imFont)  //注册uni-im图标
		}
	}
</script>

4.注册完后，t-icon 组件 name='字体名称'就可以使用了。

注意

多字体注册，如果名称一样则会则后来居上原则。后注册的字体覆盖前面注册的字体

支持平台 ​

安卓ios鸿蒙web微信小程序
√√√√√

示例代码 ​

html
<template>
	<t-page title='图标'>
		<t-card main-class="mltr-30" title='Icon 图标' sub-title="200余款内置图标，支持字体编辑工具添加删除定义自己喜欢的图标,支持图片-"></t-card>
		<introduction title="基础功能+主题展示">
			<t-row>
				<t-icon main-class="mr-30 s-50" name="setting" :disabled="true"></t-icon>
				<t-icon main-class="mr-30 s-50" :hover="true" :disabled="true" name="phone-fill"
					type="success"></t-icon>
				<t-icon main-class="mr-30 s-50" name="map-fill" type="error" :hover="true" @click="test"></t-icon>
				<t-icon main-class="mr-30 s-50" name="eye-fill" type="primary"></t-icon>
				<t-icon main-class="mr-30 s-50" name="photo-fill" type="warning"></t-icon>
				<t-icon main-class="mr-30 s-50" name="cube" type="primary"></t-icon>
			</t-row>
		</introduction>
		<introduction title="主题尺寸">
			<t-row>
				<t-row main-class="mr-30 faic">
					<t-text type="primary" main-class="mr-5" size="large">大</t-text>
					<t-icon size="large" type="primary" name="mic"></t-icon>
				</t-row>
				<t-row main-class="mr-30 faic">
					<t-text type="success" main-class="mr-5" size="large">中</t-text>
					<t-icon main-class="mr-15" size="medium" :disabled="true" name="mic" type="success"></t-icon>
				</t-row>
				<t-row main-class="mr-30 faic">
					<t-text type="error" main-class="mr-5" size="large">小</t-text>
					<t-icon main-class="mr-15" size="small" name="mic" type="error"></t-icon>
				</t-row>
				<t-row main-class="mr-30 faic">
					<t-text type="primary" main-class="mr-5" size="large">迷你</t-text>
					<t-icon main-class="mr-15" size="mini" name="mic" type="primary"></t-icon>
				</t-row>
			</t-row>
		</introduction>
		<introduction title="样式设置">
			<t-icon name="volume-fill" main-class="bg-#f56c6c r-200 twh-80 c-#fff s-50 sta slh-80" @click="test"
				type="primary"></t-icon>
		</introduction>
		<introduction title="使用图片">
			<t-icon :hover="true" size="large" type="primary" name="/pagesA/static/image/logo.png" @click="test"></t-icon>
		</introduction>
		<introduction title="使用图片">
			<t-icon size="mini" type="primary" name="/pagesA/static/image/logo.png"></t-icon>
		</introduction>
		<introduction title="自定义尺寸">
			<t-icon size="mini" main-class="s-250" type="primary" name="/pagesA/static/image/logo.png"></t-icon>
		</introduction>
	</t-page>
</template>
<script setup>
	function test() {
		console.log(123)
	}
</script>

属性 ​

名称类型默认值说明可选值
sizeStringmini组件尺寸large(大尺寸), medium(中尺寸), small(小尺寸), mini(迷你)
typeString""组件类型info(信息), primary(正常), error(错误), warning(警告), success(成功)
disabledBooleanfalse组件是否禁用false, true
stopBooleanfalse是否阻止事件冒泡（Tui统一写法处理事件冒泡）false, true
hoverBooleantrue是否有点击效果false, true
pathString""点击组件后跳转的页面路径，如果为空则响应点击事件，如果不为空则跳转页面不会响应单击事件。-
mainClassString""组件根节点的样式-
nativeClassString""组件根节点原生样式-
effectString"normal"组件显示主题normal(正常), dark(深色), light(浅色), plain(镂空)
nameString``图标的名称

事件 ​

名称返回参数说明
click(e : UniPointerEvent)-