介绍

uni-ui-plus 是对@dcloudio/uni-ui的二次封装，提供了更好的使用体验和更多的功能。

快速上手

NPM方式

安装

pnpm add uni-ui-plus

yarn add uni-ui-plus

npm install uni-ui-plus

配置

组件导入

::: warning 注意 自动按需导入组件有 unplugin 和 easycom 两种方式，请勿混用~ :::

推荐 unplugin方式

• 安装插件

  @uni-helper/vite-plugin-uni-components

  ::: code-group

  pnpm add -D @uni-helper/vite-plugin-uni-components

  yarn add --dev @uni-helper/vite-plugin-uni-components

  npm install -D @uni-helper/vite-plugin-uni-components

  :::

• 配置插件

  vite.config.ts

  import { defineConfig } from "vite";
  import UniApp from "@dcloudio/vite-plugin-uni";
  import UniComponents from "@uni-helper/vite-plugin-uni-components";
  import { UpResolver } from "uni-ui-plus";
  
  export default defineConfig({
    // ...
    plugins: [
      // ...
      // 确保放在 `UniApp()` 之前
      UniComponents({
        resolvers: [UpResolver()],
      }),
      UniApp(),
    ],
  });

  如果使用 pnpm 管理依赖，请在项目根目录下的 .npmrc 文件中添加如下内容

  shamefully-hoist=true # or public-hoist-pattern[]=@vue*

• 类型提示

  tsconfig.json（需要IDE 支持）

  {
    compilerOptions: {
      // ...
      types: ["uni-ui-plus/global.d.ts"],
    },
  }

easycom方式

• 配置easycom

  pages.json（若原本已存在easycom字段，则添加easycom.custom字段中的内容）

  {
    easycom: {
      autoscan: true,
      custom: {
        "^up-(.*)?-(.*)": "uni-ui-plus/components/$1$2/$1$2.vue",
        "^up-(.*)": "uni-ui-plus/components/$1/$1.vue",
      },
    },
    // ...
  }

完成

配置完成，现在所有的组件都可以直接使用，它将自动完成按需导入

<template>
  <up-button type="primary">主要按钮</up-button>

  <!-- 或者（仅限unplugin方式） -->
  <UpButton type="primary">主要按钮</UpButton>
</template>

组件列表

Image

<template>
  <up-image
    src="http://nest-js.oss-accelerate.aliyuncs.com/nestTest/1/1746282136181.JPG"
    placeholder-src="http://nest-js.oss-accelerate.aliyuncs.com/nestTest/1/1746282136181.JPG?x-oss-process=image/resize,l_100"
    width="120"
    height="120"
    radius="8"
    :lazy-load="true"
  />
</template>

Skeleton

<template>
  <up-skeleton :loading="true" type="title" />
  <up-skeleton :loading="true" type="avatar" avatar-shape="circle" />
</template>

List

<script setup>
  import { getObjVal, list, sleep } from "@iceywu/utils";
  import { useRequest } from "vue-hooks-pure";

  const scrollListRef = ref();
  // 模拟api
  async function getTestApi(params) {
    await sleep(500);
    const { page = 0, size = 10, maxPage = 3 } = params;
    const baseSize = page * size;
    const data = list(0, size - 1, (index) => {
      const element = baseSize + index;
      return {
        id: element,
        cover: `https://picsum.photos/id/${element}/200/300`,
        title: `title ${element}`,
        desc: `desc ${element}`,
      };
    });
    return {
      code: 200,
      msg: "查询成功",
      result: {
        content: data,
        last: page + 1 === maxPage,
        total: 100,
      },
    };
  }

  const {
    onRefresh,
    onLoad: onLoadMore,
    result,
  } = useRequest(getTestApi, {
    target: "list",
    loadingDelay: 300,
    getVal: (res) => {
      const list = getObjVal(res, "result.content", []);
      return list;
    },
    listOptions: {
      defaultPageKey: "page",
      defaultSizeKey: "size",
      defaultDataKey: "list",
      defaultPage: -1,
      getTotal: (data) => {
        const total = getObjVal(data, "result.total", 0);
        return total;
      },
    },
    onRequestEnd: (res) => {
      if (scrollListRef.value) {
        scrollListRef.value.stopRefresh();
      }
    },
  });
  onMounted(() => {
    onRefresh();
  });
</script>

<template>
  <view class="h-50vh">
    <up-list
      ref="scrollListRef"
      v-model:list-obj="result"
      style="height: 100%;"
      :is-need-h-full="true"
      :scroll-y="true"
      @on-load="onLoadMore"
      @on-refresh="onRefresh"
    >
      <template #default="{ data: { list } }">
        <view v-for="(item, index) in list" :key="index" class="mb-4 flex">
          <image :src="item.cover" class="h-20 w-20" mode="widthFix" />
          <view>{{ item.title }}</view>
        </view>
      </template>
    </up-list>
  </view>
</template>