first commit

This commit is contained in:
GYJ
2024-12-02 10:39:36 +08:00
commit f1f5b666b5
464 changed files with 81372 additions and 0 deletions

View File

@@ -0,0 +1,18 @@
## 1.0.72023-11-20
修复issues问题https://gitee.com/climblee/uv-ui/issues/I8HDLO
## 1.0.62023-10-13
1. 优化vue内容有背景色设置圆角被遮挡的情况
## 1.0.52023-09-10
1. 修复H5默认层级过高的问题
2. 修复全局设置prop无效的问题
## 1.0.42023-08-08
1. 修复修改zIndex不生效的BUG
## 1.0.32023-07-02
uv-popup 弹出层代码重构优化性能翻倍小程序体验性能更加避免卡顿。打开和关闭方法更改详情参考文档https://www.uvui.cn/components/popup.html
## 1.0.22023-06-11
1. 修复zIndex层级问题
## 1.0.12023-05-16
1. 优化组件依赖,修改后无需全局引入,组件导入即可使用
2. 优化部分功能
## 1.0.02023-05-10
1. 新增uv-popup组件

View File

@@ -0,0 +1,45 @@
// #ifdef H5
export default {
name: 'Keypress',
props: {
disable: {
type: Boolean,
default: false
}
},
mounted () {
const keyNames = {
esc: ['Esc', 'Escape'],
tab: 'Tab',
enter: 'Enter',
space: [' ', 'Spacebar'],
up: ['Up', 'ArrowUp'],
left: ['Left', 'ArrowLeft'],
right: ['Right', 'ArrowRight'],
down: ['Down', 'ArrowDown'],
delete: ['Backspace', 'Delete', 'Del']
}
const listener = ($event) => {
if (this.disable) {
return
}
const keyName = Object.keys(keyNames).find(key => {
const keyName = $event.key
const value = keyNames[key]
return value === keyName || (Array.isArray(value) && value.includes(keyName))
})
if (keyName) {
// 避免和其他按键事件冲突
setTimeout(() => {
this.$emit(keyName, {})
}, 0)
}
}
document.addEventListener('keyup', listener)
// this.$once('hook:beforeDestroy', () => {
// document.removeEventListener('keyup', listener)
// })
},
render: () => {}
}
// #endif

View File

@@ -0,0 +1,539 @@
<template>
<view
v-if="showPopup"
class="uv-popup"
:class="[popupClass, isDesktop ? 'fixforpc-z-index' : '']"
:style="[{zIndex: zIndex}]"
>
<view @touchstart="touchstart">
<!-- 遮罩层 -->
<uv-overlay
key="1"
v-if="maskShow && overlay"
:show="showTrans"
:duration="duration"
:custom-style="overlayStyle"
:opacity="overlayOpacity"
:zIndex="zIndex"
@click="onTap"
></uv-overlay>
<uv-transition
key="2"
:mode="ani"
name="content"
:custom-style="transitionStyle"
:duration="duration"
:show="showTrans"
@click="onTap"
>
<view
class="uv-popup__content"
:style="[contentStyle]"
:class="[popupClass]"
@click="clear"
>
<uv-status-bar v-if="safeAreaInsetTop"></uv-status-bar>
<slot />
<uv-safe-bottom v-if="safeAreaInsetBottom"></uv-safe-bottom>
<view
v-if="closeable"
@tap.stop="close"
class="uv-popup__content__close"
:class="['uv-popup__content__close--' + closeIconPos]"
hover-class="uv-popup__content__close--hover"
hover-stay-time="150"
>
<uv-icon
name="close"
color="#909399"
size="18"
bold
></uv-icon>
</view>
</view>
</uv-transition>
</view>
<!-- #ifdef H5 -->
<keypress v-if="maskShow" @esc="onTap" />
<!-- #endif -->
</view>
</template>
<script>
// #ifdef H5
import keypress from './keypress.js'
// #endif
import mpMixin from '@/uni_modules/uv-ui-tools/libs/mixin/mpMixin.js'
import mixin from '@/uni_modules/uv-ui-tools/libs/mixin/mixin.js'
/**
* PopUp 弹出层
* @description 弹出层组件,为了解决遮罩弹层的问题
* @tutorial https://www.uvui.cn/components/popup.html
* @property {String} mode = [top|center|bottom|left|right] 弹出方式
* @value top 顶部弹出
* @value center 中间弹出
* @value bottom 底部弹出
* @value left 左侧弹出
* @value right 右侧弹出
* @property {Number} duration 动画时长默认300
* @property {Boolean} overlay 是否显示遮罩默认true
* @property {Boolean} overlayOpacity 遮罩透明度默认0.5
* @property {Object} overlayStyle 遮罩自定义样式
* @property {Boolean} closeOnClickOverlay = [true|false] 蒙版点击是否关闭弹窗默认true
* @property {Number | String} zIndex 弹出层的层级
* @property {Boolean} safeAreaInsetTop 是否留出顶部安全区状态栏高度默认false
* @property {Boolean} safeAreaInsetBottom 是否为留出底部安全区适配默认true
* @property {Boolean} closeable 是否显示关闭图标默认false
* @property {Boolean} closeIconPos 自定义关闭图标位置,`top-left`-左上角,`top-right`-右上角,`bottom-left`-左下角,`bottom-right`-右下角默认top-right
* @property {String} bgColor 主窗口背景色
* @property {String} maskBackgroundColor 蒙版颜色
* @property {Boolean} customStyle 自定义样式
* @event {Function} change 打开关闭弹窗触发e={show: false}
* @event {Function} maskClick 点击遮罩触发
*/
export default {
name: 'uv-popup',
components: {
// #ifdef H5
keypress
// #endif
},
mixins: [mpMixin, mixin],
emits: ['change', 'maskClick'],
props: {
// 弹出层类型可选值top: 顶部弹出层bottom底部弹出层center全屏弹出层
// message: 消息提示 ; dialog : 对话框
mode: {
type: String,
default: 'center'
},
// 动画时长单位ms
duration: {
type: [String, Number],
default: 300
},
// 层级
zIndex: {
type: [String, Number],
// #ifdef H5
default: 997
// #endif
// #ifndef H5
default: 10075
// #endif
},
bgColor: {
type: String,
default: '#ffffff'
},
safeArea: {
type: Boolean,
default: true
},
// 是否显示遮罩
overlay: {
type: Boolean,
default: true
},
// 点击遮罩是否关闭弹窗
closeOnClickOverlay: {
type: Boolean,
default: true
},
// 遮罩的透明度0-1之间
overlayOpacity: {
type: [Number, String],
default: 0.4
},
// 自定义遮罩的样式
overlayStyle: {
type: [Object, String],
default: ''
},
// 是否为iPhoneX留出底部安全距离
safeAreaInsetBottom: {
type: Boolean,
default: true
},
// 是否留出顶部安全距离(状态栏高度)
safeAreaInsetTop: {
type: Boolean,
default: false
},
// 是否显示关闭图标
closeable: {
type: Boolean,
default: false
},
// 自定义关闭图标位置top-left为左上角top-right为右上角bottom-left为左下角bottom-right为右下角
closeIconPos: {
type: String,
default: 'top-right'
},
// mode=center也即中部弹出时是否使用缩放模式
zoom: {
type: Boolean,
default: true
},
round: {
type: [Number, String],
default: 0
},
...uni.$uv?.props?.popup
},
watch: {
/**
* 监听type类型
*/
type: {
handler: function(type) {
if (!this.config[type]) return
this[this.config[type]](true)
},
immediate: true
},
isDesktop: {
handler: function(newVal) {
if (!this.config[newVal]) return
this[this.config[this.mode]](true)
},
immediate: true
},
// H5 下禁止底部滚动
showPopup(show) {
// #ifdef H5
// fix by mehaotian 处理 h5 滚动穿透的问题
document.getElementsByTagName('body')[0].style.overflow = show ? 'hidden' : 'visible'
// #endif
}
},
data() {
return {
ani: [],
showPopup: false,
showTrans: false,
popupWidth: 0,
popupHeight: 0,
config: {
top: 'top',
bottom: 'bottom',
center: 'center',
left: 'left',
right: 'right',
message: 'top',
dialog: 'center',
share: 'bottom'
},
transitionStyle: {
position: 'fixed',
left: 0,
right: 0
},
maskShow: true,
mkclick: true,
popupClass: this.isDesktop ? 'fixforpc-top' : 'top',
direction: ''
}
},
computed: {
isDesktop() {
return this.popupWidth >= 500 && this.popupHeight >= 500
},
bg() {
if (this.bgColor === '' || this.bgColor === 'none' || this.$uv.getPx(this.round)>0) {
return 'transparent'
}
return this.bgColor
},
contentStyle() {
const style = {};
if (this.bgColor) {
style.backgroundColor = this.bg
}
if(this.round) {
const value = this.$uv.addUnit(this.round)
const mode = this.direction?this.direction:this.mode
style.backgroundColor = this.bgColor
if(mode === 'top') {
style.borderBottomLeftRadius = value
style.borderBottomRightRadius = value
} else if(mode === 'bottom') {
style.borderTopLeftRadius = value
style.borderTopRightRadius = value
} else if(mode === 'center') {
style.borderRadius = value
}
}
return this.$uv.deepMerge(style, this.$uv.addStyle(this.customStyle))
}
},
// #ifndef VUE3
// TODO vue2
destroyed() {
this.setH5Visible()
},
// #endif
// #ifdef VUE3
// TODO vue3
unmounted() {
this.setH5Visible()
},
// #endif
created() {
// TODO 处理 message 组件生命周期异常的问题
this.messageChild = null
// TODO 解决头条冒泡的问题
this.clearPropagation = false
},
methods: {
setH5Visible() {
// #ifdef H5
// fix by mehaotian 处理 h5 滚动穿透的问题
document.getElementsByTagName('body')[0].style.overflow = 'visible'
// #endif
},
/**
* 公用方法,不显示遮罩层
*/
closeMask() {
this.maskShow = false
},
// TODO nvue 取消冒泡
clear(e) {
// #ifndef APP-NVUE
e.stopPropagation()
// #endif
this.clearPropagation = true
},
open(direction) {
// fix by mehaotian 处理快速打开关闭的情况
if (this.showPopup) {
return
}
let innerType = ['top', 'center', 'bottom', 'left', 'right', 'message', 'dialog', 'share']
if (!(direction && innerType.indexOf(direction) !== -1)) {
direction = this.mode
}else {
this.direction = direction;
}
if (!this.config[direction]) {
return this.$uv.error(`缺少类型:${direction}`);
}
this[this.config[direction]]()
this.$emit('change', {
show: true,
type: direction
})
},
close(type) {
this.showTrans = false
this.$emit('change', {
show: false,
type: this.mode
})
clearTimeout(this.timer)
// // 自定义关闭事件
this.timer = setTimeout(() => {
this.showPopup = false
}, 300)
},
// TODO 处理冒泡事件,头条的冒泡事件有问题 ,先这样兼容
touchstart() {
this.clearPropagation = false
},
onTap() {
if (this.clearPropagation) {
// fix by mehaotian 兼容 nvue
this.clearPropagation = false
return
}
this.$emit('maskClick')
if (!this.closeOnClickOverlay) return
this.close()
},
/**
* 顶部弹出样式处理
*/
top(type) {
this.popupClass = this.isDesktop ? 'fixforpc-top' : 'top'
this.ani = ['slide-top']
this.transitionStyle = {
position: 'fixed',
zIndex: this.zIndex,
left: 0,
right: 0,
backgroundColor: this.bg
}
// TODO 兼容 type 属性 ,后续会废弃
if (type) return
this.showPopup = true
this.showTrans = true
this.$nextTick(() => {
if (this.messageChild && this.mode === 'message') {
this.messageChild.timerClose()
}
})
},
/**
* 底部弹出样式处理
*/
bottom(type) {
this.popupClass = 'bottom'
this.ani = ['slide-bottom']
this.transitionStyle = {
position: 'fixed',
zIndex: this.zIndex,
left: 0,
right: 0,
bottom: 0,
backgroundColor: this.bg
}
// TODO 兼容 type 属性 ,后续会废弃
if (type) return
this.showPopup = true
this.showTrans = true
},
/**
* 中间弹出样式处理
*/
center(type) {
this.popupClass = 'center'
this.ani = this.zoom?['zoom-in', 'fade']:['fade'];
this.transitionStyle = {
position: 'fixed',
zIndex: this.zIndex,
/* #ifndef APP-NVUE */
display: 'flex',
flexDirection: 'column',
/* #endif */
bottom: 0,
left: 0,
right: 0,
top: 0,
justifyContent: 'center',
alignItems: 'center'
}
// TODO 兼容 type 属性 ,后续会废弃
if (type) return
this.showPopup = true
this.showTrans = true
},
left(type) {
this.popupClass = 'left'
this.ani = ['slide-left']
this.transitionStyle = {
position: 'fixed',
zIndex: this.zIndex,
left: 0,
bottom: 0,
top: 0,
backgroundColor: this.bg,
/* #ifndef APP-NVUE */
display: 'flex',
flexDirection: 'column'
/* #endif */
}
// TODO 兼容 type 属性 ,后续会废弃
if (type) return
this.showPopup = true
this.showTrans = true
},
right(type) {
this.popupClass = 'right'
this.ani = ['slide-right']
this.transitionStyle = {
position: 'fixed',
zIndex: this.zIndex,
bottom: 0,
right: 0,
top: 0,
backgroundColor: this.bg,
/* #ifndef APP-NVUE */
display: 'flex',
flexDirection: 'column'
/* #endif */
}
// TODO 兼容 type 属性 ,后续会废弃
if (type) return
this.showPopup = true
this.showTrans = true
}
}
}
</script>
<style lang="scss" scoped>
.uv-popup {
position: fixed;
/* #ifndef APP-NVUE */
z-index: 99;
/* #endif */
&.top,
&.left,
&.right {
/* #ifdef H5 */
top: var(--window-top);
/* #endif */
/* #ifndef H5 */
top: 0;
/* #endif */
}
.uv-popup__content {
/* #ifndef APP-NVUE */
display: block;
overflow: hidden;
/* #endif */
position: relative;
&.left,
&.right {
/* #ifdef H5 */
padding-top: var(--window-top);
/* #endif */
/* #ifndef H5 */
padding-top: 0;
/* #endif */
flex: 1;
}
&__close {
position: absolute;
&--hover {
opacity: 0.4;
}
}
&__close--top-left {
top: 15px;
left: 15px;
}
&__close--top-right {
top: 15px;
right: 15px;
}
&__close--bottom-left {
bottom: 15px;
left: 15px;
}
&__close--bottom-right {
right: 15px;
bottom: 15px;
}
}
}
.fixforpc-z-index {
/* #ifndef APP-NVUE */
z-index: 999;
/* #endif */
}
.fixforpc-top {
top: 0;
}
</style>

View File

@@ -0,0 +1,92 @@
{
"id": "uv-popup",
"displayName": "uv-popup 弹出层 全面兼容vue3+2、app、h5、小程序等多端",
"version": "1.0.7",
"description": "uv-popup 弹出层容器,用于展示弹窗、信息提示等内容,支持上、下、左、右和中部弹出。组件只提供容器,内部内容由用户自定义。",
"keywords": [
"uv-popup",
"uvui",
"uv-ui",
"popup",
"弹出层"
],
"repository": "",
"engines": {
"HBuilderX": "^3.1.0"
},
"dcloudext": {
"type": "component-vue",
"sale": {
"regular": {
"price": "0.00"
},
"sourcecode": {
"price": "0.00"
}
},
"contact": {
"qq": ""
},
"declaration": {
"ads": "无",
"data": "插件不采集任何数据",
"permissions": "无"
},
"npmurl": ""
},
"uni_modules": {
"dependencies": [
"uv-ui-tools",
"uv-overlay",
"uv-transition",
"uv-icon",
"uv-status-bar",
"uv-safe-bottom"
],
"encrypt": [],
"platforms": {
"cloud": {
"tcb": "y",
"aliyun": "y"
},
"client": {
"Vue": {
"vue2": "y",
"vue3": "y"
},
"App": {
"app-vue": "y",
"app-nvue": "y"
},
"H5-mobile": {
"Safari": "y",
"Android Browser": "y",
"微信浏览器(Android)": "y",
"QQ浏览器(Android)": "y"
},
"H5-pc": {
"Chrome": "y",
"IE": "y",
"Edge": "y",
"Firefox": "y",
"Safari": "y"
},
"小程序": {
"微信": "y",
"阿里": "y",
"百度": "y",
"字节跳动": "y",
"QQ": "y",
"钉钉": "u",
"快手": "u",
"飞书": "u",
"京东": "u"
},
"快应用": {
"华为": "u",
"联盟": "u"
}
}
}
}
}

View File

@@ -0,0 +1,21 @@
## Popup 弹出层
> **组件名uv-popup**
弹出层容器,用于展示弹窗、信息提示等内容,支持上、下、左、右和中部弹出。组件只提供容器,内部内容由用户自定义。
该组件已经放弃原来`uview2.x`的写法,参照了官方`uni-popup`的写法进行重构。在小程序端的性能大大提升,打开和关闭避免延迟,调用方法与之前相比也有所差异,具体请查看文档。
# <a href="https://www.uvui.cn/components/popup.html" target="_blank">查看文档</a>
## [下载完整示例项目](https://ext.dcloud.net.cn/plugin?name=uv-ui) <small>(请不要 下载插件ZIP</small>
### [更多插件请关注uv-ui组件库](https://ext.dcloud.net.cn/plugin?name=uv-ui)
<a href="https://ext.dcloud.net.cn/plugin?name=uv-ui" target="_blank">
![image](https://mp-a667b617-c5f1-4a2d-9a54-683a67cff588.cdn.bspapp.com/uv-ui/banner.png)
</a>
#### 如使用过程中有任何问题反馈或者您对uv-ui有一些好的建议欢迎加入uv-ui官方交流群<a href="https://www.uvui.cn/components/addQQGroup.html" target="_blank">官方QQ群</a>