uni-app 图标按钮组件封装(4.2)

Posted 2019ab

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了uni-app 图标按钮组件封装(4.2)相关的知识,希望对你有一定的参考价值。

这样我们可以将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>

以上是关于uni-app 图标按钮组件封装(4.2)的主要内容,如果未能解决你的问题,请参考以下文章

uni-app 4.10封装聊天列表组件

uni-app:封装组件

uni-app:封装组件

uni-app为组件uni-icons增加自定义图标(超简单)

uni-app封装input组件用于登录

uni-app 4.7封装头像组件