@gmcb/uv-ui 0.2.26 → 0.3.0

package/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.2.27](http://10.10.10.16/caoben/front-end/compare/@gmcb/uv-ui@0.2.26...@gmcb/uv-ui@0.2.27) (2026-01-03)
+
+**Note:** Version bump only for package @gmcb/uv-ui
+
+
+
+
+
 ## [0.2.26](https://git.keeprisk.cn/gmcb/front-end/compare/@gmcb/uv-ui@0.2.25...@gmcb/uv-ui@0.2.26) (2025-07-25)
 
 **Note:** Version bump only for package @gmcb/uv-ui

package/LICENSE

@@ -1,21 +1,21 @@
-MIT License
-
-Copyright (c) 2024 aniu
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
+MIT License
+
+Copyright (c) 2024 aniu
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,164 +1,118 @@
-<p align="center">
-    <span>&nbsp;&nbsp;&nbsp;</span><img alt="logo" src="https://www.uvui.cn/common/logo.png" width="120" height="120">
-</p>
-<h3 align="center">uv-ui</h3>
-<h3 align="center">兼容vue3+2多平台快速开发的UI框架</h3>
+# @gmcb/uv-ui
 
-[![star](https://gitee.com/climblee/uv-ui/badge/star.svg?theme=gvp)](https://gitee.com/climblee/uv-ui)
-[![star](https://gitee.com/climblee/uv-ui/badge/fork.svg?theme=gvp)](https://gitee.com/climblee/uv-ui)
-[![star](https://img.shields.io/github/stars/climblee/uv-ui?style=flat-square&logo=GitHub)](https://github.com/climblee/uv-ui)
-[![issues](https://img.shields.io/github/issues/climblee/uv-ui?style=flat-square&logo=GitHub)](https://github.com/climblee/uv-ui/issues)
-[![Website](https://img.shields.io/badge/uvui-up-blue?style=flat-square)](https://www.uvui.cn)
-[![version](https://img.shields.io/badge/version-1.1.16-brightgreen.svg)](https://www.uvui.cn/components/changelog.html)
-[![license](https://img.shields.io/github/license/climblee/uv-ui?style=flat-square)](https://en.wikipedia.org/wiki/MIT_License)
+基于 uv-ui 的 uni-app 多端 UI 组件包，包含组件、主题样式、工具函数和 `$uv` 全局能力。
 
-## 温馨提示：如需下载uv-ui示例项目，请不要使用【下载插件ZIP】按钮。
+## 安装
 
-### uvui官方群1：<a href="http://qm.qq.com/cgi-bin/qm/qr?_wv=1027&k=aaoyDvfV7nSee9vzWfzyZM1vKlu3xrNZ&authKey=pdU6HDpyzGUoc1QvQvCmzCbwzsoHgBbToF%2F0ChP4lNjPIPgWHGRE4I99XYGiTcNI&noverify=0&group_code=549833913" target="_blank">549833913</a>
-### uvui官方群2：<a href="http://qm.qq.com/cgi-bin/qm/qr?_wv=1027&k=2QbEeKBn6ysCyQ09V4mgst1W8onxFybQ&authKey=aMTGL5zCYwsinG%2FeH0qMlAqXAdyKr5AjXVf2oMnsmj7NCg%2F2HraMU%2FNFxELLIPvp&noverify=0&group_code=206060892" target="_blank">206060892</a>
-
-## uvui特点
-
-1. **uv-ui的前世今生**，`uv-ui` 是基于 `uview2.x` 版本改造而来。重命名也是为了避开发布冲突和很多组件 `u-`在  `nvue` 中不能使用的情况，所以这才诞生了`uv-ui`。感谢 `uview-ui` 作者的开源奉献，再次为开源点赞。 同时 `uv-ui` 也是无条件开源。
-
-2. **全端兼容**，`uv-ui`支持vue3、vue2、app-vue、app-nvue、h5、小程序等。`uv-ui`的组件都是多端自适应的，底层会抹平很多小程序平台的差异或bug。
-
-3. **扩展配置**，`uv-ui`内置的方法默认不再挂载到`uni`对象之上，也就意味着默认情况下不能在项目中直接使用`uni.$uv.xxx`使用内置方法。但是可以通过扩展可以解决，通过如下方式进行配置即可，使用方式请参考[扩展配置](https://www.uvui.cn/components/setting.html)。其中包括[ JS工具库](https://www.uvui.cn/components/setting.html#%E6%89%A9%E5%B1%95%E9%85%8D%E7%BD%AE-js%E5%B7%A5%E5%85%B7%E5%BA%93)、[ 自定义主题](https://www.uvui.cn/components/setting.html#%E6%89%A9%E5%B1%95%E9%85%8D%E7%BD%AE-%E8%87%AA%E5%AE%9A%E4%B9%89%E4%B8%BB%E9%A2%98)、[ 基础样式](https://www.uvui.cn/components/setting.html#%E6%89%A9%E5%B1%95%E9%85%8D%E7%BD%AE-%E5%9F%BA%E7%A1%80%E6%A0%B7%E5%BC%8F)、[ setconfig](https://www.uvui.cn/components/setting.html#%E6%89%A9%E5%B1%95%E9%85%8D%E7%BD%AE-setconfig)等。
-
-## 预览
-
-通过微信（APP下载不支持微信扫码）或浏览器扫码查看演示效果。
-
-<img src="https://mp-31ed6237-7b7b-4597-8448-a53d6d6031cf.cdn.bspapp.com/uvui/download-wx.png" width="200" />&nbsp;&nbsp;&nbsp;&nbsp;<img src="https://mp-31ed6237-7b7b-4597-8448-a53d6d6031cf.cdn.bspapp.com/uvui/download-app.png" width="200" />&nbsp;&nbsp;&nbsp;&nbsp;<img src="https://mp-31ed6237-7b7b-4597-8448-a53d6d6031cf.cdn.bspapp.com/uvui/download-h5.png" width="200" />
-
-## 链接
-
-- [官方文档](https://www.uvui.cn)
-- [演示地址](https://h5.uvui.cn)
-- [更新日志](https://www.uvui.cn/components/changelog.html)
-- [关于我们](https://www.uvui.cn/cooperation/about.html)
-- <a href="#list">组件列表</a>
+```bash
+npm i @gmcb/uv-ui
+```
 
-## 交流反馈
+## 引入
 
-欢迎加入我们的QQ群交流反馈：[点此跳转](https://www.uvui.cn/components/addQQGroup.html)
+在 uni-app 项目入口中注册：
 
-## 快速开始
+```ts
+import { createSSRApp } from 'vue';
+import uvUI from '@gmcb/uv-ui';
+import App from './App.vue';
 
-方式一：`uv-ui` 强烈建议通过 `下载插件并导入HbuilderX` 导入组件。
+export function createApp() {
+  const app = createSSRApp(App);
+  app.use(uvUI);
+  return {
+    app,
+  };
+}
+```
 
-方式二：下载完整 [uv-ui项目](https://ext.dcloud.net.cn/plugin?id=12287) 将 `uni_modules` 复制到自己的项目。
+引入基础样式：
 
-方式三：通过 `npm i @gmcb/uv-ui` 下载，此方法需要配置 easycom，配置详情可查看[安装](https://www.uvui.cn/components/install.html)。
+```scss
+@import '@gmcb/uv-ui/index.scss';
+@import '@gmcb/uv-ui/theme.scss';
+```
 
-请通过[快速上手](https://www.uvui.cn/components/quickstart.html)了解更详细的内容。
+## easycom 配置
 
-**注意：导入插件后，建议`HBuilderX`重新运行项目，可能新导入的插件不能实时更新而导致不能运行。**
+建议在 `pages.json` 中配置 easycom，组件即可在页面中直接使用：
 
-## 使用方法
+```json
+{
+  "easycom": {
+    "autoscan": true,
+    "custom": {
+      "^uv-(.*)": "@gmcb/uv-ui/components/uv-$1/uv-$1.vue"
+    }
+  }
+}
+```
 
-组件导入 `uni_modules` 后，直接在项目中使用，无需通过import引入组件。
+使用示例：
 
 ```html
 <template>
-    <uv-icon name="baidu" size="30" color="#909399"></uv-icon>
+  <uv-button type="primary">提交</uv-button>
+  <uv-icon name="search" size="24"></uv-icon>
 </template>
 ```
 
-## 扩展功能
-
-`uv-ui` 内置了强大的工具函数、请求封装等，可以根据自身需求进行扩展配置，详情请查看[扩展配置](https://www.uvui.cn/components/setting.html)。
+## 全局能力
 
-**注意：只有[扩展配置](https://www.uvui.cn/components/setting.html)后才能在自己的项目页面中使用组件库内置方法和变量等**。
+注册后会向 `uni.$uv` 注入常用工具：
 
-<div id="list"></div>
-
-## 组件列表
+| 能力 | 说明 |
+| --- | --- |
+| `uni.$uv.http` | 基于 `luch-request` 的请求实例。 |
+| `uni.$uv.route` | 路由跳转封装。 |
+| `uni.$uv.config` | uv-ui 配置。 |
+| `uni.$uv.debounce` / `uni.$uv.throttle` | 防抖与节流。 |
+| `uni.$uv.test` | 常用校验方法。 |
+| `uni.$uv.colorGradient`、`hexToRgb`、`rgbToHex` | 颜色工具。 |
+| `uni.$uv.platform` | 平台判断工具。 |
+| `uni.$uv.compress` | 压缩工具。 |
+
+Vue 3 项目中也可通过组件实例访问 `$uv`。
+
+## 组件目录
+
+组件位于 `components/uv-*`，常用组件包括：
+
+- `uv-button`
+- `uv-icon`
+- `uv-form`
+- `uv-input`
+- `uv-popup`
+- `uv-modal`
+- `uv-tabs`
+- `uv-navbar`
+- `uv-upload`
+- `uv-calendar`
+- `uv-datetime-picker`
+- `uv-swiper`
+- `uv-list`
+- `uv-cell`
+- `uv-toast`
+
+更多组件可查看 `components` 目录或 uv-ui 官方文档。
+
+## 参考链接
+
+- [本包文档入口](./docs/index.md)
+- [uv-ui 官方文档](https://www.uvui.cn)
+- [uv-ui 演示地址](https://h5.uvui.cn)
+- [uv-ui 更新日志](https://www.uvui.cn/components/changelog.html)
+
+## 本地文档
+
+```bash
+pnpm -C packages/uv-ui run docs:dev
+pnpm -C packages/uv-ui run docs:build
+pnpm -C packages/uv-ui run docs:preview
+```
 
-下表为 `uv-ui` 的扩展组件清单，点击每个组件**点击下载&安装**即可在详情页面导入组件到项目下，导入后建议重新运行即可直接使用，组件无需import和注册。
+## 注意事项
 
-| 组件名 | 组件说明 |
-| --- | --- |
-| uv-skeletons | [新版骨架屏（推荐）](https://www.uvui.cn/components/skeletons.html) |
-| uv-calendars | [新版日历（推荐）](https://www.uvui.cn/components/calendars.html) |
-| uv-drop-down | [下拉筛选](https://www.uvui.cn/components/dropDown.html) |
-| uv-scroll-list | [横向滚动列表](https://www.uvui.cn/components/scrollList.html) |
-| uv-vtabs | [垂直选项卡](https://www.uvui.cn/components/vtabs.html) |
-| uv-pick-color | [颜色选择器](https://www.uvui.cn/components/pickColor.html) |
-| uv-qrcode | [二维码](https://www.uvui.cn/components/qrcode.html) |
-| uv-waterfall | [瀑布流](https://www.uvui.cn/components/waterfall.html) |
-| uv-row | [Layout 布局](https://www.uvui.cn/components/layout.html) |
-| uv-icon | [图标](https://www.uvui.cn/components/icon.html) |
-| uv-button | [按钮](https://www.uvui.cn/components/button.html) |
-| uv-text | [文本](https://www.uvui.cn/components/text.html) |
-| uv-link | [超链接](https://www.uvui.cn/components/link.html) |
-| uv-image | [图片](https://www.uvui.cn/components/image.html) |
-| uv-transition | [动画](https://www.uvui.cn/components/transition.html) |
-| uv-form | [表单](https://www.uvui.cn/components/form.html) |
-| uv-input | [增强输入框](https://www.uvui.cn/components/input.html) |
-| uv-textarea | [增强文本域](https://www.uvui.cn/components/textarea.html) |
-| uv-checkbox | [复选框](https://www.uvui.cn/components/checkbox.html) |
-| uv-radio | [单选框](https://www.uvui.cn/components/radio.html) |
-| uv-switch | [开关选择器](https://www.uvui.cn/components/switch.html) |
-| uv-calendar | [日历](https://www.uvui.cn/components/calendar.html) |
-| uv-picker | [选择器](https://www.uvui.cn/components/picker.html) |
-| uv-datetime-picker | [时间选择器](https://www.uvui.cn/components/datetimePicker.html) |
-| uv-code | [验证码倒计时](https://www.uvui.cn/components/code.html) |
-| uv-keyboard | [键盘](https://www.uvui.cn/components/keyboard.html) |
-| uv-rate | [评分](https://www.uvui.cn/components/rate.html) |
-| uv-search | [多功能搜索框](https://www.uvui.cn/components/search.html) |
-| uv-number-box | [步进器](https://www.uvui.cn/components/numberBox.html) |
-| uv-upload | [上传](https://www.uvui.cn/components/upload.html) |
-| uv-slider | [滑动选择器](https://www.uvui.cn/components/slider.html) |
-| uv-list | [列表](https://www.uvui.cn/components/list.html) |
-| uv-index-list | [索引列表](https://www.uvui.cn/components/indexList.html) |
-| uv-tags | [标签](https://www.uvui.cn/components/tag.html) |
-| uv-line-progress | [线形进度条](https://www.uvui.cn/components/lineProgress.html) |
-| uv-badge | [徽标数](https://www.uvui.cn/components/badge.html) |
-| uv-count-down | [倒计时](https://www.uvui.cn/components/countDown.html) |
-| uv-count-to | [数字滚动](https://www.uvui.cn/components/countTo.html) |
-| uv-avatar | [头像](https://www.uvui.cn/components/avatar.html) |
-| uv-skeleton | [骨架屏](https://www.uvui.cn/components/skeleton.html) |
-| uv-loading-icon | [加载动画](https://www.uvui.cn/components/loadingIcon.html) |
-| uv-loading-page | [加载页](https://www.uvui.cn/components/loadingPage.html) |
-| uv-load-more | [加载更多](https://www.uvui.cn/components/loadMore.html) |
-| uv-empty | [内容为空](https://www.uvui.cn/components/empty.html) |
-| uv-tooltip | [长按提示](https://www.uvui.cn/components/tooltip.html) |
-| uv-alert | [警告提示](https://www.uvui.cn/components/alert.html) |
-| uv-toast | [消息提示](https://www.uvui.cn/components/toast.html) |
-| uv-notice-bar | [滚动通知](https://www.uvui.cn/components/noticeBar.html) |
-| uv-notify | [消息提示](https://www.uvui.cn/components/notify.html) |
-| uv-no-network | [无网络提示](https://www.uvui.cn/components/noNetwork.html) |
-| uv-popup | [弹出层](https://www.uvui.cn/components/popup.html) |
-| uv-modal | [模态框](https://www.uvui.cn/components/modal.html) |
-| uv-cell | [单元格](https://www.uvui.cn/components/cell.html) |
-| uv-swipe-action | [滑动单元格](https://www.uvui.cn/components/swipeAction.html) |
-| uv-swiper | [轮播图](https://www.uvui.cn/components/swiper.html) |
-| uv-collapse | [折叠面板](https://www.uvui.cn/components/collapse.html) |
-| uv-grid | [宫格布局](https://www.uvui.cn/components/grid.html) |
-| uv-album | [相册](https://www.uvui.cn/components/album.html) |
-| uv-tabbar | [底部导航栏](https://www.uvui.cn/components/tabbar.html) |
-| uv-back-top | [返回顶部](https://www.uvui.cn/components/backTop.html) |
-| uv-navbar | [自定义导航栏](https://www.uvui.cn/components/navbar.html) |
-| uv-action-sheet | [底部操作菜单](https://www.uvui.cn/components/actionSheet.html) |
-| uv-tabs | [标签选项卡](https://www.uvui.cn/components/tabs.html) |
-| uv-steps | [步骤条](https://www.uvui.cn/components/steps.html) |
-| uv-subsection | [分段器](https://www.uvui.cn/components/subsection.html) |
-| uv-sticky | [吸顶](https://www.uvui.cn/components/sticky.html) |
-| uv-parse | [富文本解析器](https://www.uvui.cn/components/parse.html) |
-| uv-overlay | [遮罩层](https://www.uvui.cn/components/overlay.html) |
-| uv-code-input | [验证码输入](https://www.uvui.cn/components/codeInput.html) |
-| uv-read-more | [展开阅读更多](https://www.uvui.cn/components/readMore.html) |
-| uv-line | [线条](https://www.uvui.cn/components/line.html) |
-| uv-gap | [间隔槽](https://www.uvui.cn/components/gap.html) |
-| uv-divider | [分割线](https://www.uvui.cn/components/divider.html) |
-
-## 版权信息
-uv-ui遵循[MIT](https://en.wikipedia.org/wiki/MIT_License)开源协议，意味着您无需支付任何费用，也无需授权，即可将uv-ui应用到您的产品中。
-
-## 作者想说
-- 开源真的不易，不图大家的钱财，所以希望大家多多鼓励支持，希望不要恶意评论，有问题加群快速解决。
-- 遇到BUG，是一件很正常的事情，是程序肯定就有BUG，所以希望大家能以理解的心态去提出BUG，然后作者才有动力去努力修复。
-- 最后觉得好用的小伙伴，不要吝啬你的双手，给个好评就是给我们最大的鼓励。
-
-# 恶评者手下留情，有事加QQ群解决：549833913
+- 本包面向 uni-app 多端项目，组件依赖 uni-app 运行环境。
+- 小程序端如需分享 mixin，可在注册时传入对应选项，具体行为以 `index.js` 为准。
+- 修改组件或主题后，请在示例项目中至少验证 H5 和目标小程序/App 平台。

package/components/uv-overlay/props.js

@@ -1,25 +1,30 @@
-export default {
-	props: {
-		// 是否显示遮罩
-		show: {
-			type: Boolean,
-			default: false
-		},
-		// 层级z-index
-		zIndex: {
-			type: [String, Number],
-			default: 10070
-		},
-		// 遮罩的过渡时间，单位为ms
-		duration: {
-			type: [String, Number],
-			default: 300
-		},
-		// 不透明度值，当做rgba的第四个参数
-		opacity: {
-			type: [String, Number],
-			default: 0.5
-		},
-		...uni.$uv?.props?.overlay
-	}
+export default {
+	props: {
+		// 是否显示遮罩
+		show: {
+			type: Boolean,
+			default: false
+		},
+		// 层级z-index
+		zIndex: {
+			type: [String, Number],
+			default: 10070
+		},
+		// 遮罩的过渡时间，单位为ms
+		duration: {
+			type: [String, Number],
+			default: 300
+		},
+		// 不透明度值，当做rgba的第四个参数
+		opacity: {
+			type: [String, Number],
+			default: 0.5
+		},
+    // 显示时body是否添加overflow: hidden
+    hidden: {
+      type: Boolean,
+			default: true
+    },
+		...uni.$uv?.props?.overlay
+	}
 }

package/components/uv-overlay/uv-overlay.vue

@@ -1,85 +1,87 @@
-<template>
-	<uv-transition
-	  :show="show"
-		mode="fade"
-	  custom-class="uv-overlay"
-	  :duration="duration"
-	  :custom-style="overlayStyle"
-	  @click="clickHandler"
-		@touchmove.stop.prevent="clear"
-	>
-		<slot />
-	</uv-transition>
-</template>
-
-<script>
-	import mpMixin from '../../libs/mixin/mpMixin.js'
-	import mixin from '../../libs/mixin/mixin.js'
-	import props from './props.js';
-
-	/**
-	 * overlay 遮罩
-	 * @description 创建一个遮罩层，用于强调特定的页面元素，并阻止用户对遮罩下层的内容进行操作，一般用于弹窗场景
-	 * @tutorial https://www.uvui.cn/components/overlay.html
-	 * @property {Boolean}			show		是否显示遮罩（默认 false ）
-	 * @property {String | Number}	zIndex		zIndex 层级（默认 10070 ）
-	 * @property {String | Number}	duration	动画时长，单位毫秒（默认 300 ）
-	 * @property {String | Number}	opacity		不透明度值，当做rgba的第四个参数 （默认 0.5 ）
-	 * @property {Object}			customStyle	定义需要用到的外部样式
-	 * @event {Function} click 点击遮罩发送事件
-	 * @example <uv-overlay :show="show" @click="show = false"></uv-overlay>
-	 */
-	export default {
-		name: "uv-overlay",
-		emits: ['click'],
-		mixins: [mpMixin, mixin, props],
-		watch: {
-			show(newVal){
-				// #ifdef H5
-				if(newVal){
-					document.querySelector('body').style.overflow = 'hidden';
-				}else{
-					document.querySelector('body').style.overflow = '';
-				}
-				// #endif
-			}
-		},
-		computed: {
-			overlayStyle() {
-				const style = {
-					position: 'fixed',
-					top: 0,
-					left: 0,
-					right: 0,
-					zIndex: this.zIndex,
-					bottom: 0,
-					'background-color': `rgba(0, 0, 0, ${this.opacity})`
-				}
-				return this.$uv.deepMerge(style, this.$uv.addStyle(this.customStyle))
-			}
-		},
-		methods: {
-			clickHandler() {
-				this.$emit('click')
-			},
-			clear() {}
-		}
-	}
-</script>
-<style lang="scss" scoped>
-/* #ifndef APP-NVUE */
-$uv-overlay-top:0 !default;
-$uv-overlay-left:0 !default;
-$uv-overlay-width:100% !default;
-$uv-overlay-height:100% !default;
-$uv-overlay-background-color:rgba(0, 0, 0, .7) !default;
-.uv-overlay {
-	position: fixed;
-	top:$uv-overlay-top;
-	left:$uv-overlay-left;
-	width: $uv-overlay-width;
-	height:$uv-overlay-height;
-	background-color:$uv-overlay-background-color;
-}
-/* #endif */
-</style>
+<template>
+	<uv-transition
+	  :show="show"
+		mode="fade"
+	  custom-class="uv-overlay"
+	  :duration="duration"
+	  :custom-style="overlayStyle"
+	  @click="clickHandler"
+		@touchmove.stop.prevent="clear"
+	>
+		<slot />
+	</uv-transition>
+</template>
+
+<script>
+	import mpMixin from '../../libs/mixin/mpMixin.js'
+	import mixin from '../../libs/mixin/mixin.js'
+	import props from './props.js';
+
+	/**
+	 * overlay 遮罩
+	 * @description 创建一个遮罩层，用于强调特定的页面元素，并阻止用户对遮罩下层的内容进行操作，一般用于弹窗场景
+	 * @tutorial https://www.uvui.cn/components/overlay.html
+	 * @property {Boolean}			show		是否显示遮罩（默认 false ）
+	 * @property {String | Number}	zIndex		zIndex 层级（默认 10070 ）
+	 * @property {String | Number}	duration	动画时长，单位毫秒（默认 300 ）
+	 * @property {String | Number}	opacity		不透明度值，当做rgba的第四个参数 （默认 0.5 ）
+	 * @property {Object}			customStyle	定义需要用到的外部样式
+	 * @event {Function} click 点击遮罩发送事件
+	 * @example <uv-overlay :show="show" @click="show = false"></uv-overlay>
+	 */
+	export default {
+		name: "uv-overlay",
+		emits: ['click'],
+		mixins: [mpMixin, mixin, props],
+		watch: {
+			show(newVal){
+				// #ifdef H5
+        if (this.hidden) {
+          if(newVal){
+            document.querySelector('body').style.overflow = 'hidden';
+          }else{
+            document.querySelector('body').style.overflow = '';
+          }
+        }
+				// #endif
+			}
+		},
+		computed: {
+			overlayStyle() {
+				const style = {
+					position: 'fixed',
+					top: 0,
+					left: 0,
+					right: 0,
+					zIndex: this.zIndex,
+					bottom: 0,
+					'background-color': `rgba(0, 0, 0, ${this.opacity})`
+				}
+				return this.$uv.deepMerge(style, this.$uv.addStyle(this.customStyle))
+			}
+		},
+		methods: {
+			clickHandler() {
+				this.$emit('click')
+			},
+			clear() {}
+		}
+	}
+</script>
+<style lang="scss" scoped>
+/* #ifndef APP-NVUE */
+$uv-overlay-top:0 !default;
+$uv-overlay-left:0 !default;
+$uv-overlay-width:100% !default;
+$uv-overlay-height:100% !default;
+$uv-overlay-background-color:rgba(0, 0, 0, .7) !default;
+.uv-overlay {
+	position: fixed;
+	top:$uv-overlay-top;
+	left:$uv-overlay-left;
+	width: $uv-overlay-width;
+	height:$uv-overlay-height;
+	background-color:$uv-overlay-background-color;
+}
+/* #endif */
+</style>

package/docs/api/configs/color.md

@@ -0,0 +1,52 @@
+## color 颜色值
+
+此功能为uv-ui内部通过js提供的一些颜色值，可以用于通过js修改元素字体，背景颜色等一些场景，常用于uv-ui的各个组件中。  
+这些颜色值，挂载在`$uv`对象下的`color`数组中，关于这些颜色值的具体描述，详见[Color 色彩](/components/color.html)  
+使用方法：如使用`primary`颜色值，方法为：`$uv.color['primary']`
+
+**说明**：这些通过JS调用的颜色值，也是能通过CSS调用的，二者等价。详见[Color 色彩](/components/color.html)  
+
+### 主题颜色
+
+该主题颜色值，一共有5个，分别是`primary`、`error`、`success`、`info`、`warning`
+
+```vue
+<script setup>
+import { onLoad } from '@dcloudio/uni-app';
+
+onLoad(() => {
+	console.log(uni.$uv.color['error']);
+});
+</script>
+```
+
+
+### 文字颜色
+
+uv-ui一共提供了四个颜色值，具体请见组件部分[Color色彩](/components/color.html)  
+分别有：`mainColor`、`contentColor`、`tipsColor`、`lightColor`、`borderColor`(边框颜色值)
+
+```vue
+<script setup>
+import { onLoad } from '@dcloudio/uni-app';
+
+onLoad(() => {
+	console.log(uni.$uv.color['contentColor']);
+});
+</script>
+```
+
+
+### 背景颜色
+
+uv-ui提供了一个浅灰的背景颜色值，该值为`#f3f4f6`
+
+```vue
+<script setup>
+import { onLoad } from '@dcloudio/uni-app';
+
+onLoad(() => {
+	console.log(uni.$uv.color['bgColor']);
+});
+</script>
+```