UniApp组件开发七日通-图标(icon)

我在书社写代码
6 阅读3分钟 
<text :class="iconClass" :style="iconStyle" @click="emit('click',$event)"></text>

首先看模板部分，使用了标签，绑定了iconClass和iconStyle，并处理了点击事件。脚本部分使用了Vue 3的组合式API，定义了props和emits，计算属性iconStyle和iconClass分别处理样式和类名。样式部分引入了vant.css，说明可能基于Vant的图标字体。

    // type
	type types = {
		name ?: string,
		size ?: string,
		color ?: string,
		prefix ?: string
	}
	// prop
	const prop = defineProps<types>()
	// emit
	const emit = defineEmits(['click'])

	const iconStyle = computed(() => {
		let obj = {}
		if (prop.size) {
			obj['font-size'] = `${prop.size}px`
		}
		if (prop.color) {
			obj['color'] = prop.color
		}
		return obj
	})
	const iconClass = computed(() => {
		let obj = []
		obj.push(prop.prefix || 'van-icon')
		obj.push((prop.prefix || 'van-icon') + '-' + prop.name)
		return obj
	})

接下来，我需要整理文档的结构。通常组件文档应包括组件描述、属性说明、事件说明、示例等部分。

组件描述部分需要说明h-icon是基于字体的图标组件，支持自定义大小、颜色和类名前缀。

属性部分需要列出name、size、color、prefix四个属性，每个属性的类型、默认值和说明。根据代码中的types定义，name是图标名称（字符串，可选），size是图标大小（字符串，可选，单位px），color是颜色（字符串，可选），prefix是类名前缀（字符串，可选，默认'van-icon'）。

事件部分，代码中定义了click事件，当图标被点击时触发，需要说明事件名称和参数。

示例部分可以提供基本使用和自定义样式的例子，比如设置name为"search"，size为"24"，color为"red"，prefix为"custom-icon"等情况。

需要注意代码中的默认前缀是'van-icon'，所以类名会是'van-icon'和'van-icon-'+name的组合。如果用户设置了prefix，则使用自定义前缀。

现在需要将这些信息整理成Markdown格式，确保清晰易懂，覆盖所有关键属性和用法。

h-icon 图标组件文档

组件概述

h-icon 是基于字体图标集实现的图标组件，支持自定义图标名称、大小、颜色及类名前缀，适用于uniapp等Vue技术栈开发环境。

组件属性

属性名类型默认值说明
namestring?-图标名称（对应字体图标集中的图标标识）
sizestring?-图标大小（单位为px，示例：24 表示24px）
colorstring?-图标颜色（支持CSS颜色值，示例：#ff0000 或 red）
prefixstring?van-icon类名前缀（最终生成的类名为 [prefix] 和 [prefix]-[name] 的组合）

组件事件

事件名说明参数
click图标被点击时触发原生事件对象 $event

实现原理

  • 类名生成：通过计算属性 iconClass 组合基础类名（prefix）和图标名称类名（prefix-name），默认使用 van-icon 前缀（适配Vant图标字体）。
  • 样式控制：通过计算属性 iconStyle 动态绑定 font-size（由 size 控制）和 color（由 color 控制）样式。
  • 事件传递：通过 emit 将点击事件传递给父组件。

使用示例

基础使用（默认前缀）

<h-icon name="search" size="24" color="#333" />

生成效果：

  • 类名：van-icon van-icon-search（依赖 vant.css 中的字体图标定义）
  • 样式：font-size: 24px; color: #333;

自定义前缀

<h-icon name="user" prefix="custom-icon" size="32" color="red" />

生成效果：

  • 类名：custom-icon custom-icon-user（需确保 custom-icon 前缀对应的字体图标样式已引入）
  • 样式：font-size: 32px; color: red;

注意事项

  • 需确保 vant.css（或自定义前缀对应的字体图标样式文件）已正确引入（当前组件通过 <style> 标签引入 ./vant.css）。

  • 若 name 未传值，生成的类名可能无法匹配有效图标，建议业务层做非空校验。

avatar
文章
阅读
粉丝