uniapp封装常用组件

通过uni-app的easycom，可以将组件引入精简为一步。只要组件安装在项目的components目录下，并符合components/组件名称/组件名称.vue目录结构，就可以直接在页面中使用，无需引用和注册。

在封装组件时，需要注意props可以是数组或对象，用于接收来自父组件的数据。在HTML中，属性名称是大小写不敏感的，所以浏览器会将所有大写字符解释为小写字符。因此，在封装组件时属性名为contentText，在传值时应为content-text。

以下是一些常用的uniapp封装组件的示例代码:

1. 空数据占位图组件：

  <template>
    <view class="fq-empty">
      <image src="/static/image/empty-view.png"></image>
      <text class="">{{emptyText}}</text>
    </view>
  </template>
  
  <script>
  export default {
    props: {
      emptyText: {
        type: String,
        default: '什么都没有',
      }
    },
  }
  </script>
  
  <style>
  .fq-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 16px;
  }
  
  .fq-empty image {
    width: 300rpx;
    height: 300rpx;
    margin: 30rpx;
  }
  </style>

2. 分页组件：

  <template>
    <view>
      <!-- 分页内容 -->
    </view>
  </template>
  
  <script>
  export default {
    props: {
      total: {
        type: Number,
        default: 0,
      },
      pageSize: {
        type: Number,
        default: 10,
      },
      currentPage: {
        type: Number,
        default: 1,
      }
    },
    methods: {
      // 分页操作的方法
    }
  }
  </script>
  
  <style>
  /* 样式 */
  </style>

3. 导航栏组件：

  <template>
    <view>
      <!-- 导航栏内容 -->
    </view>
  </template>
  
  <script>
  export default {
    props: {
      title: {
        type: String,
        default: '',
      },
      showBack: {
        type: Boolean,
        default: false,
      }
    },
    methods: {
      // 导航栏相关操作的方法
    }
  }
  </script>
  
  <style>
  /* 样式 */
  </style>