T-UVUE-UI1.0.0

Appearance

Icon 图标 ​

基于字体的图标集，包含了大多数常见场景的图标。

支持平台 ​

安卓iosweb微信小程序支付宝小程序QQ小程序
√√√xxx

自定义图标扩展 ​

  1. 将字体文件和配置文件复制到项目如图目录中：
js
// font.json 配置
{
	"fontName": "CustomFont", //字体名字 
	"prefix": "tui", //字体前缀
	"options": { //字体码表
		"star-fill": "\ue879",
		"star-half-fill": "\ue87a",
		"star-line": "\ue87b"
	},
	"url": "/static/icon-star.ttf" //字体存放路径（建议放在项目static）
}
  1. 在项目app.vue中注册(TuiRegisterFontFamily)自定义字体
vue
<script lang="uts">
	import { TuiRegisterFontFamily } from '@/uni_modules/tui-plus'
	import fontconfig from './config/font.json'
	let firstBackTime = 0
	export default {
		onLaunch: function () {
			TuiRegisterFontFamily(fontconfig)
		},
		onShow: function () {
			console.log('App Show')
		},
		onHide: function () {
			console.log('App Hide')
		},
		// #ifdef APP-ANDROID
		onLastPageBackPress: function () {
			console.log('App LastPageBackPress')
			if (firstBackTime == 0) {
				uni.showToast({
					title: '再按一次退出应用',
					position: 'bottom',
				})
				firstBackTime = Date.now()
				setTimeout(() => {
					firstBackTime = 0
				}, 2000)
			} else if (Date.now() - firstBackTime < 2000) {
				firstBackTime = Date.now()
				uni.exit()
			}
		},
		// #endif
		onExit: function () {
			console.log('App Exit')
		},
	}
</script>

<style>
	/*每个页面公共css */
	.uni-row {
		flex-direction: row;
	}

	.uni-column {
		flex-direction: column;
	}
</style>
  1. 完成字体注册后，可使用t-icon组件name属性显示字体图标了
vue
<t-icon name="star-half-fill"></t-icon>
<t-icon name="star-fill"></t-icon>
<t-icon name="star-line"></t-icon>

示例 ​

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

Props ​

名称描述类型默认值可选值
name图标名称String'photo'-
size按钮尺寸String'medium''large', 'medium', 'small', 'mini'
type组件场景String'''info', 'primary', 'error', 'warning', 'success'
disabled是否禁用Booleanfalsetrue, false
stop是否阻止事件冒泡Booleanfalsetrue, false
hover是否有鼠标悬停效果Booleanfalsetrue, false
effect主题效果String'''normal', 'dark', 'light', 'plain'

Events ​

事件名描述回调参数
click图标被点击时触发MouseEvent

Methods ​

方法名说明参数
setValue设置图标值-

Slots ​

名称描述
defaultTIcon 组件提供了一个默认插槽，用于放置自定义内容。