uni-ui的二次封装

Uni-ui是uni-app官方推出的一款UI框架，它提供了丰富的组件和样式，能够快速方便地构建uni-app应用程序的UI界面。

在二次封装uni-ui时，可以根据自己的实际需求对组件进行定制化，以便更好地适应项目的需求。具体步骤如下：

1. 引入uni-ui组件库和样式库

在pages.json中添加uni-ui的组件库和样式库：

{
  "pages": [
    {
      "path": "pages/index/index",
      "style": {
        "app-plus": {
          "navigationBarBackgroundColor": "#FFFFFF",
          "navigationBarTitleText": "uni-app",
          "navigationBarTextStyle": "black"
        }
      }
    }
  ],
  "globalStyle": {
    "app-plus": {
      "@import": [
        "@/uni-ui/theme/base.css",
        "@/uni-ui/theme/uni.css"
      ]
    }
  },
  "usingComponents": {}
}

2. 创建自定义组件

在components文件夹下创建自定义组件，在组件内引入uni-ui的组件，根据需要进行组合和封装，最终输出自定义组件。

<template>
  <view>
    <uni-list>
      <uni-list-item v-for="(item, index) in list" :key="index">
        <uni-icon size="22" type="ios-close"></uni-icon>
        <text>{{item}}</text>
      </uni-list-item>
    </uni-list>
  </view>
</template>

<script>
  import uniList from '@/uni-ui/components/uni-list/uni-list.vue'
  import uniListItem from '@/uni-ui/components/uni-list-item/uni-list-item.vue'
  import uniIcon from '@/uni-ui/components/uni-icon/uni-icon.vue'

  export default {
    components: {
      uniList,
      uniListItem,
      uniIcon
    },
    props: {
      list: {
        type: Array,
        default: []
      }
    }
  }
</script>

<style lang="scss" scoped>
  @import "@/uni-ui/theme/uni.css";
</style>

3. 在页面中使用自定义组件

在页面中引入自定义组件，并传递数据。

<template>
  <view>
    <my-list :list="list"></my-list>
  </view>
</template>

<script>
  import myList from '@/components/my-list.vue'

  export default {
    components: {
      myList
    },
    data() {
      return {
        list: ['item1', 'item2', 'item3']
      }
    }
  }
</script>

通过以上步骤，就可以实现对uni-ui组件的二次封装，以便更好地适应项目的需求。