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"></text></free-icon-button>
<free-icon-button @click="btn2"><text class="iconfont font-md"></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)的主要内容,如果未能解决你的问题,请参考以下文章