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

<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>

<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>