UniApp组件开发七日通-按钮组件

我在书社写代码
17 阅读1分钟 
<view class="btn" :style="btnStyle" 
:class="{'btn-disabled':prop.disabled}" 
@click="emit('click',$event)">
	<h-icon class="btn-icon" :name="prop.icon" v-if="prop.icon" style="margin-right:0.2em;"></h-icon>
	<slot></slot>
</view>

首先看模板部分，组件使用了一个view标签作为按钮的容器，绑定了btnStyle样式和btn-disabled类（当disabled属性为true时），点击事件触发click事件。内部包含一个h-icon组件（当icon属性存在时显示）和一个slot用于内容。

import { computed } from 'vue';
	// type
	type types = {
		type ?: 'default' | 'primary' | 'success' | 'danger' | 'warn',
		size ?: 'normal' | 'large' | 'small' | 'mini',
		block ?: boolean,
		plain ?: boolean,
		color ?: string,
		icon ?: string,
		disabled ?: boolean
	}
	// prop
	const prop = withDefaults(defineProps<types>(), {
		type: 'default',
		size: 'normal',
		block: false,
		plain: false,
		disabled: false,
	})
	// emit
	const emit = defineEmits(['click'])
	// computed
	const btnStyle = computed(() => {
		let obj : Record<string, any> = {}
		let color = {
			'primary': '#1989fa',
			'success': '#07c160',
			'danger': '#ee0a24',
			'warn': '#ff976a',
		}
		let size = {
			'large': {
				padding: '0 20px',
				fontSize: '16px',
				height: '50px'
			},
			'normal': {
				padding: '0 15px',
				fontSize: '14px',
				height: '40'
			},
			'small': {
				padding: '0 8px',
				fontSize: '12px',
				height: '32px'
			},
			'mini': {
				padding: '0 4px',
				fontSize: '10px',
				height: '24px'
			}
		}
		if (prop.plain) {
			if (prop.type !== 'default') {
				obj['border-color'] = color[prop.type]
				obj['color'] = color[prop.type]
			}
			if (prop.color) {
				obj['border-color'] = prop.color
				obj['color'] = prop.color
			}
		} else {
			if (prop.type !== 'default') {
				obj['border-color'] = color[prop.type]
				obj['background'] = color[prop.type]
				obj['color'] = '#fff'
			}
			if (prop.color) {
				obj['border-color'] = prop.color
				obj['background'] = prop.color
				obj['color'] = '#fff'
			}
		}
		if (prop.block) {
			obj['display'] = 'flex'
		}
		if (prop.size) {
			obj['padding'] = size[prop.size]['padding']
			obj['font-size'] = size[prop.size]['fontSize']
			obj['height'] = size[prop.size]['height']
		}
		return obj
	})

然后是脚本部分，使用了Vue 3的setup语法糖。定义了props的类型，包括type、size、block、plain、color、icon、disabled，其中type和size有默认值。计算属性btnStyle根据不同的属性动态生成样式，处理了颜色类型（type）、朴素按钮（plain）、块级元素（block）和尺寸（size）的逻辑。

.btn {
	font-size: 14px;
	display: inline-flex;
	flex-shrink: 0;
	background: #fff;
	border: solid 1px #dcdee0;
	border-radius: 5px;
	padding: 0px 15px;
	height: 40px;
	justify-content: center;
	align-items: center;
	box-sizing: border-box;
	cursor: pointer;
	position: relative;
	line-height: normal;

	&:not(.btn-disabled):active::after {
		content: " ";
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		background: transparent;
		background: rgb(0, 0, 0, 0.1);
	}

	&:disabled,
	&-disabled {
		cursor: not-allowed;
		opacity: 0.5;
	}

	&-icon {
		font-size: 0.9em;
	}
}

样式部分使用了scss，定义了按钮的基本样式，包括禁用状态、激活时的遮罩层，以及图标样式。

接下来需要将这些信息整理成Markdown文档，包括组件描述、属性说明、示例等。需要确保文档清晰，覆盖所有重要属性和功能。

首先，组件概述部分需要说明h-button的用途，比如用于触发操作，支持多种类型、尺寸、样式等。

然后是属性列表，需要列出每个属性的名称、类型、可选值、默认值和说明。例如type属性的类型是string，可选值为default|primary|success|warn|danger，默认值default，说明颜色类型。

计算属性部分可能不需要详细说明，但可以简要提及样式的动态生成逻辑。

样式部分可以说明默认样式、禁用状态、激活效果等。

需要注意使用用户友好的格式，比如表格展示属性，代码块展示示例，确保文档易读。

h-button 组件文档

1. 组件概述

h-button 是一个基于 Vue 3 的跨端按钮组件（适用于 uni-app 框架），主要用于触发用户操作。支持自定义颜色类型、尺寸、朴素/填充样式、块级布局、图标显示及禁用状态等功能。

2. 组件属性

属性名类型可选值默认值说明
typestringdefault|primary|success|warn|dangerdefault按钮颜色类型（对应预设色值）
sizestringnormal|large|small|mininormal按钮尺寸（控制 padding、font-size、height）
blockboolean-false是否为块级元素（占满父容器宽度）
plainboolean-false是否为朴素按钮（仅边框和文字颜色，无背景填充）
colorstring颜色值（如 #ff0000）-自定义按钮颜色（优先级高于 type）
iconstring--左侧图标名称（需配合 h-icon 组件使用）
disabledboolean-false是否禁用按钮（禁用时不可点击，样式变灰）

3. 组件事件

事件名说明参数
click按钮点击时触发原生事件对象 $event

4. 样式逻辑说明

4.1 颜色与背景

  • 填充模式（plain=false）：背景色和边框色由 type 或 color 决定，文字颜色为白色（#fff）。
  • 朴素模式（plain=true）：无边框背景，文字颜色和边框色由 type 或 color 决定。
  • 若同时设置 type 和 color，color 优先级更高。

4.2 尺寸控制

通过 size 属性控制按钮的 padding、font-size 和 height，具体值如下：

  • large：padding=0 20px，font-size=16px，height=50px
  • normal：padding=0 15px，font-size=14px，height=40px
  • small：padding=0 8px，font-size=12px，height=32px
  • mini：padding=0 4px，font-size=10px，height=24px

4.3 块级布局

block=true 时，按钮 display 为 flex，占满父容器宽度。

4.4 禁用状态

禁用时添加 btn-disabled 类，样式表现为透明度 0.5，光标变为 not-allowed。

4.5 激活反馈

非禁用状态下点击按钮时，会在按钮上层覆盖一层半透明遮罩（rgba(0,0,0,0.1)）。

5. 使用示例

基础用法

<!-- 普通主色按钮 -->
<h-button type="primary">提交</h-button>

<!-- 朴素小尺寸按钮 -->
<h-button type="success" size="small" plain>确认</h-button>

<!-- 带图标的块级按钮 -->
<h-button type="warn" icon="check" block>立即购买</h-button>

<!-- 禁用按钮 -->
<h-button disabled>不可点击</h-button>

自定义颜色

<!-- 自定义红色填充按钮 -->
<h-button color="#ff0000">删除</h-button>

<!-- 自定义绿色朴素按钮 -->
<h-button color="#00ff00" plain>保存</h-button>

6. 依赖说明

  • 需配合 h-icon 组件使用（用于显示 icon 属性对应的图标）。

  • 样式使用 SCSS 预处理器编写，需确保项目已配置 SCSS 编译环境。

avatar
文章
阅读
粉丝