说明

• uView UI，是uni-app生态优秀的UI框架，全面的组件和便捷的工具会让您信手拈来，如鱼得水.

特性

• 兼容安卓，iOS，微信小程序，H5，QQ小程序，百度小程序，支付宝小程序，头条小程序
• 60+精选组件，功能丰富，多端兼容，让您快速集成，开箱即用
• 众多贴心的JS利器，让您飞镖在手，召之即来，百步穿杨
• 众多的常用页面和布局，让您专注逻辑，事半功倍
• 详尽的文档支持，现代化的演示效果
• 按需引入，精简打包体积

升级说明

• 该UI库改造自 [email protected] 版本，全面支持vue3。
• vue3版本,从 uview-ui 更名为: uview-ui-next。

组件更新说明

• u-upload上传组件新增“fileSizeExceededTip”提示语属性;
• u-sticky 吸顶 offsetTop 默认单位是rpx, 新增属于“isUnitPx”boolean类型，true表示单位是px，否则为rpx;
• u-circle-progress 圆形进度条新增css作为进度条（当u-circle-progress组件 is-css为false时，采用canvas, 否则使用css样式作为进度条），以解决canvas在原生小程序中层级过高无法覆盖的问题;
• u-line-progress 组件，新增“text-padding(值为number)”和“text-align（值有'left' | 'center' | 'right' | null）”,不写“text-align”保持原有样式，“text-align”属性针对进度条的文字显示位置进行优化;
• u-avatar-cropper 组件更新,头像裁剪;
• 废除 u-parse组件，并不再支持vue3版本 , 请改用v-html;

安装

1、安装 uview-ui-next 库

# yarn 方式安装
yarn add uview-ui-next

2、安装 mitt 依赖

# yarn 方式安装
yarn add mitt

快速上手

1. main.ts引入uView库

// main.ts
import uView from 'uview-ui-next';
app.use(uView);

2. App.vue引入基础样式(注意style标签需声明scss属性支持)

/* App.vue */
<style lang="scss">
    @import "uview-ui-next/index.scss";
</style>

3. uni.scss引入全局scss变量文件

/* uni.scss */
@import "uview-ui-next/theme.scss";

4. pages.json配置easycom规则(按需引入)

// pages.json
{
	"easycom": {
        "autoscan": true,
        "custom": {
            // npm安装的方式不需要前面的"@/"，下载安装的方式需要"@/"
            // npm安装方式
            "^u-(.*)": "uview-ui-next/components/u-$1/u-$1.vue"
            // 下载安装方式
            // "^u-(.*)": "uview-ui-next/components/u-$1/u-$1.vue"
        }     
    },
	// 此为本身已有的内容
	"pages": [
		// ......
	]
}

easycom 规则引入 特殊说明:
  - u-form 需要单独引入才生效;
  - u-waterfall 需要单独引入才能生效;
  - 其它如果通过 easycom 规则引入如未生效，需要单独引入，可能原因是由于被uni-app官方占用。

<template>
   <UForm :model="state.form" :ref="(el) => uForm = el">
       <u-form-item label="姓名" prop="name">
         <u-input v-model="state.form.name" />
       </u-form-item>
   </UForm>
   <u-button @click="submit">提交</u-button>
<template/>

<script setup lang="ts">
  import { ref, reactive } from "vue";
  import UForm from "uview-ui-next/components/u-form/u-form.vue";
  const uForm = ref(null);
  const state = reactive({
    form: {
      name: '',
      intro: '',
    },
    rules: {
      name: [
        {
          required: true,
          message: '请输入姓名',
          // 可以单个或者同时写两个触发验证方式
          trigger: ['change', 'blur'],
        }
      ],
    }
  });
  const submit = () => {
    uForm.value?.validate((valid: boolean) => {
      if (valid) {
        console.log('验证通过');
      } else {
        console.log('验证失败');
      }
    });
  }
</script>

5. main.ts配置全局分享

// main.ts
app.config.globalProperties.openShare = true;

<!-- 个性化配置分享 -->
<!-- my.vue-->
<script setup lang="ts">
import { ComponentInternalInstance, getCurrentInstance } from 'vue';
import { onLoad } from "@dcloudio/uni-app";
const instance: ComponentInternalInstance | null = getCurrentInstance();
const $u = instance?.appContext.config.globalProperties.$u;
onLoad(() => {
  $u.mpShare.title = "多平台快速开发的UI框架！"
  $u.mpShare.path = "/pages/home/index"
  $u.mpShare.imageUrl = "https://uviewui.com/common/logo.png"
});
</script>

请通过快速上手了解更详细的内容

使用方法

配置easycom规则后，自动按需引入，无需import组件，直接引用即可。

<template>
	<u-button>按钮</u-button>
</template>

请通过快速上手了解更详细的内容

链接

• 官方文档
• 更新日志
• 升级指南
• 关于我们

预览

您可以通过微信扫码，查看最佳的演示效果。

版权信息

uView遵循MIT开源协议，意味着您无需支付任何费用，也无需授权，即可将uView应用到您的产品中。