字体图标

icon:常用字体图标,支持基本样式设置,支持nvue(使用组件库thorui-nvue文件夹下组件)。

组件结构

<template>
	<text class="tui-icon-class tui-icon" :class="'tui-icon-' + name" :style="{ color: color, fontSize: size + unit, fontWeight: bold ? 'bold' : 'normal',margin:margin }"
	 @tap="handleClick"></text>

</template>

组件脚本

<script>
	export default {
		name: 'tuiIcon',
		props: {
			name: {
				type: String,
				default: ''
			},
			size: {
				type: Number,
				default: 32
			},
			//px或者rpx
			unit:{
				type: String,
				default: 'px'
			},
			color: {
				type: String,
				default: '#999'
			},
			bold: {
				type: Boolean,
				default: false
			},
			margin: {
				type: String,
				default: "0"
			},
			index: {
				type: Number,
				default: 0
			}
		},
		methods: {
			handleClick() {
				this.$emit('click', {
					index: this.index
				});
			}
		}
	};
</script>

组件样式

... 此处省略n行

脚本说明

props

参数 类型 描述 默认值
name String 图标名称 ""
size Number 图标大小 32
unit String 大小单位 px
color String 图标颜色 ""
bold Boolean 是否加粗 false
margin String margin值设置,调整间距 0
index Number 索引 0

methods

名称 描述
@click 点击事件

示例

H5预览地址

https://www.thorui.cn/h5/#/pages/extend/icon/icon

H5二维码

小程序二维码