uni-app 图标按钮组件封装(4.2)_uniapp button icon-CSDN博客

本文链接：https://blog.csdn.net/ab15176142633/article/details/119384309

这篇博客展示了如何在Vue应用中使用自定义的Free-icon-button组件来构建一个包含状态栏和导航功能的界面。代码示例详细解释了组件的结构和交互，包括在App-Plus-NVUE平台下获取状态栏高度的方法。此外，还介绍了组件的点击事件处理和图标显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这样我们可以将index.nuve改为

<template>
	<view class="bg-light">
		<!-- 状态栏 -->
		<view :style="'height:'+statusBarHeight+'px'"></view>
		<!-- 导航 -->
		<view class="w-100 flex align-center justify-between" style="height: 90rpx;">
			<!-- 左边 -->
			<view class="flex align-center">
				<!-- 标题 -->
				<text class="font-md ml-3">微信(100)</text>
			</view>
			<!-- 右边 -->
			<view class="flex align-center">
			    <!-- 引入文件 -->
				<free-icon-button @click="btn1"><text class="iconfont font-md">&#xe6e3;</text></free-icon-button>
				<free-icon-button @click="btn2"><text class="iconfont font-md">&#xe682;</text></free-icon-button>
			</view>
		</view>
	</view>
</template>

<script>
    // 引入文件
	import freeIconButton from '@/components/free-ui/free-icon-button.vue';
	export default {
		components: {
			freeIconButton  // 注册插件
		},
		data() {
			return {
				statusBarHeight: 0,
			}
		},
		onLoad() {
			// 获取任务栏高度
			// #ifdef APP-PLUS-NVUE
			this.statusBarHeight = plus.navigator.getStatusbarHeight();
			// #endif
		},
		methods: {

		}
	}
</script>

<style>

</style>

插件内容free-icon-button.vue文件

<template>
	<view class="flex align-center justify-center"
	hover-class="bg-hover-light"
	style="height: 90rpx;width: 90rpx;" @click="$emit('click')">
		<slot><text class="iconfont font-md">{{icon}}</text></slot>
	</view>
</template>

<script>
	export default { 
		props: {
			icon: {
				type: String,
				default: ''
			},
		},
	}
</script>

<style> 
</style>