uView

多平台快速开发的UI框架

说明

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

特性

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

升级说明

- 该UI库改造自 uview-ui@1.8.4 版本，全面支持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 库
``bash

yarn 方式安装

yarn add uview-ui-next
`
2、安装 mitt 依赖
`bash

yarn 方式安装

yarn add mitt
`

快速上手

1. main.ts引入uView库
`js
// main.ts
import uView from 'uview-ui-next';
app.use(uView);
`

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

`

3. uni.scss引入全局scss变量文件
`css
/ uni.scss /
@import "uview-ui-next/theme.scss";
`

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

`js
// 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": [
// ......
]
}
`
`text
easycom 规则引入 特殊说明:
- u-form 需要单独引入才生效;
- u-waterfall 需要单独引入才能生效;
- 其它如果通过 easycom 规则引入如未生效，需要单独引入，可能原因是由于被uni-app官方占用。
`
`vue