uni-app图标按钮组件封装（4.2）这样我们可以将index.nuve改为
<template>
<view class="bg-light">
<!-- 状态栏 -->
<view :></view>
<!-- 导航 -->
<view class="w-100 flex align-center justify-between" >
<!-- 左边 -->
<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 = StatusbarHeight();
// #endif
},
methods: {
}
}
</script>
<style>
</style>
插件内容free-icon-button.vue⽂件
<template>
<view class="flex align-center justify-center"
hover-class="bg-hover-light"
@click="$emit('click')">  <slot><text class="iconfont font-md">{{icon}}</text></slot> </view>
</template>
<script>
export default {
icon图标库props: {
icon: {
type: String,
default: ''
},
},
}
</script>
<style>
</style>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。