mirror of
https://gitee.com/hhyykk/ipms-sjy.git
synced 2025-07-06 15:15:07 +08:00
使用 uview 重构实际登陆
This commit is contained in:
@ -0,0 +1,84 @@
|
||||
export default {
|
||||
props: {
|
||||
// 是否展示弹窗
|
||||
show: {
|
||||
type: Boolean,
|
||||
default: uni.$u.props.popup.show
|
||||
},
|
||||
// 是否显示遮罩
|
||||
overlay: {
|
||||
type: Boolean,
|
||||
default: uni.$u.props.popup.overlay
|
||||
},
|
||||
// 弹出的方向,可选值为 top bottom right left center
|
||||
mode: {
|
||||
type: String,
|
||||
default: uni.$u.props.popup.mode
|
||||
},
|
||||
// 动画时长,单位ms
|
||||
duration: {
|
||||
type: [String, Number],
|
||||
default: uni.$u.props.popup.duration
|
||||
},
|
||||
// 圆角值
|
||||
borderRadius: {
|
||||
type: [String, Number],
|
||||
default: uni.$u.props.popup.borderRadius
|
||||
},
|
||||
// 是否显示关闭图标
|
||||
closeable: {
|
||||
type: Boolean,
|
||||
default: uni.$u.props.popup.closeable
|
||||
},
|
||||
// 自定义遮罩的样式
|
||||
overlayStyle: {
|
||||
type: [Object, String],
|
||||
default: uni.$u.props.popup.overlayStyle
|
||||
},
|
||||
// 点击遮罩是否关闭弹窗
|
||||
closeOnClickOverlay: {
|
||||
type: Boolean,
|
||||
default: uni.$u.props.popup.closeOnClickOverlay
|
||||
},
|
||||
// 层级
|
||||
zIndex: {
|
||||
type: [String, Number],
|
||||
default: uni.$u.props.popup.zIndex
|
||||
},
|
||||
// 是否为iPhoneX留出底部安全距离
|
||||
safeAreaInsetBottom: {
|
||||
type: Boolean,
|
||||
default: uni.$u.props.popup.safeAreaInsetBottom
|
||||
},
|
||||
// 是否留出顶部安全距离(状态栏高度)
|
||||
safeAreaInsetTop: {
|
||||
type: Boolean,
|
||||
default: uni.$u.props.popup.safeAreaInsetTop
|
||||
},
|
||||
// 自定义关闭图标位置,top-left为左上角,top-right为右上角,bottom-left为左下角,bottom-right为右下角
|
||||
closeIconPos: {
|
||||
type: String,
|
||||
default: uni.$u.props.popup.closeIconPos
|
||||
},
|
||||
// 是否显示圆角
|
||||
round: {
|
||||
type: Boolean,
|
||||
default: uni.$u.props.popup.round
|
||||
},
|
||||
// mode=center,也即中部弹出时,是否使用缩放模式
|
||||
zoom: {
|
||||
type: Boolean,
|
||||
default: uni.$u.props.popup.zoom
|
||||
},
|
||||
// 弹窗背景色,设置为transparent可去除白色背景
|
||||
bgColor: {
|
||||
type: String,
|
||||
default: uni.$u.props.popup.bgColor
|
||||
},
|
||||
// 遮罩的透明度,0-1之间
|
||||
overlayOpacity: {
|
||||
type: [Number, String],
|
||||
default: uni.$u.props.popup.overlayOpacity
|
||||
}
|
||||
}
|
||||
}
|
311
yudao-vue-ui/uni_modules/uview-ui/components/u-popup/u-popup.vue
Normal file
311
yudao-vue-ui/uni_modules/uview-ui/components/u-popup/u-popup.vue
Normal file
@ -0,0 +1,311 @@
|
||||
<template>
|
||||
<view class="u-popup">
|
||||
<u-overlay
|
||||
:show="show"
|
||||
@click="overlayClick"
|
||||
v-if="overlay"
|
||||
:duration="duration"
|
||||
:customStyle="overlayStyle"
|
||||
:opacity="overlayOpacity"
|
||||
></u-overlay>
|
||||
<u-transition
|
||||
:show="show"
|
||||
:customStyle="transitionStyle"
|
||||
:mode="position"
|
||||
:duration="duration"
|
||||
@after-enter="afterEnter"
|
||||
@click="clickHandler"
|
||||
>
|
||||
<view
|
||||
class="u-popup__content"
|
||||
:style="[contentStyle]"
|
||||
@tap.stop="noop"
|
||||
:class="[round && `u-popup__content--round-${mode}`]"
|
||||
>
|
||||
<u-status-bar v-if="safeAreaInsetTop"></u-status-bar>
|
||||
<slot></slot>
|
||||
<view
|
||||
v-if="closeable"
|
||||
@tap.stop="close"
|
||||
class="u-popup__content__close"
|
||||
:class="['u-popup__content__close--' + closeIconPos]"
|
||||
hover-class="u-popup__content__close--hover"
|
||||
hover-stay-time="150"
|
||||
>
|
||||
<u-icon
|
||||
name="close"
|
||||
color="#909399"
|
||||
size="18"
|
||||
bold
|
||||
></u-icon>
|
||||
</view>
|
||||
<u-safe-bottom v-if="safeAreaInsetBottom"></u-safe-bottom>
|
||||
</view>
|
||||
</u-transition>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import props from './props.js';
|
||||
|
||||
/**
|
||||
* popup 弹窗
|
||||
* @description 弹出层容器,用于展示弹窗、信息提示等内容,支持上、下、左、右和中部弹出。组件只提供容器,内部内容由用户自定义
|
||||
* @tutorial https://www.uviewui.com/components/popup.html
|
||||
* @property {Boolean} show 是否展示弹窗 (默认 false )
|
||||
* @property {Boolean} overlay 是否显示遮罩 (默认 true )
|
||||
* @property {String} mode 弹出方向(默认 'bottom' )
|
||||
* @property {String | Number} duration 动画时长,单位ms (默认 300 )
|
||||
* @property {String | Number} borderRadius 弹窗圆角值(默认 0 )
|
||||
* @property {Boolean} closeable 是否显示关闭图标(默认 false )
|
||||
* @property {Object | String} overlayStyle 自定义遮罩的样式
|
||||
* @property {String | Number} overlayOpacity 遮罩透明度,0-1之间(默认 0.5)
|
||||
* @property {Boolean} closeOnClickOverlay 点击遮罩是否关闭弹窗 (默认 true )
|
||||
* @property {String | Number} zIndex 层级 (默认 10075 )
|
||||
* @property {Boolean} safeAreaInsetBottom 是否为iPhoneX留出底部安全距离 (默认 true )
|
||||
* @property {Boolean} safeAreaInsetTop 是否留出顶部安全距离(状态栏高度) (默认 false )
|
||||
* @property {String} closeIconPos 自定义关闭图标位置(默认 'top-right' )
|
||||
* @property {Boolean} round 是否显示圆角(默认 false )
|
||||
* @property {Boolean} zoom 当mode=center时 是否开启缩放(默认 true )
|
||||
* @property {Object} customStyle 组件的样式,对象形式
|
||||
* @event {Function} open 弹出层打开
|
||||
* @event {Function} close 弹出层收起
|
||||
* @example <u-popup v-model="show"><text>出淤泥而不染,濯清涟而不妖</text></u-popup>
|
||||
*/
|
||||
export default {
|
||||
name: 'u-popup',
|
||||
mixins: [uni.$u.mpMixin, uni.$u.mixin, props],
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
watch: {
|
||||
show(newValue, oldValue) {
|
||||
if (newValue === true) {
|
||||
// #ifdef MP-WEIXIN
|
||||
const children = this.$children
|
||||
this.retryComputedComponentRect(children)
|
||||
// #endif
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
transitionStyle() {
|
||||
const style = {
|
||||
zIndex: this.zIndex,
|
||||
position: 'fixed',
|
||||
display: 'flex',
|
||||
}
|
||||
style[this.mode] = 0
|
||||
if (this.mode === 'left') {
|
||||
return this.$u.deepMerge(style, {
|
||||
bottom: 0,
|
||||
top: 0,
|
||||
})
|
||||
} else if (this.mode === 'right') {
|
||||
return this.$u.deepMerge(style, {
|
||||
bottom: 0,
|
||||
top: 0,
|
||||
})
|
||||
} else if (this.mode === 'top') {
|
||||
return this.$u.deepMerge(style, {
|
||||
left: 0,
|
||||
right: 0
|
||||
})
|
||||
} else if (this.mode === 'bottom') {
|
||||
return this.$u.deepMerge(style, {
|
||||
left: 0,
|
||||
right: 0,
|
||||
})
|
||||
} else if (this.mode === 'center') {
|
||||
return this.$u.deepMerge(style, {
|
||||
alignItems: 'center',
|
||||
'justify-content': 'center',
|
||||
top: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
bottom: 0
|
||||
})
|
||||
}
|
||||
},
|
||||
contentStyle() {
|
||||
const style = {}
|
||||
// 通过设备信息的safeAreaInsets值来判断是否需要预留顶部状态栏和底部安全局的位置
|
||||
// 不使用css方案,是因为nvue不支持css的iPhoneX安全区查询属性
|
||||
const {
|
||||
safeAreaInsets
|
||||
} = uni.$u.sys()
|
||||
if (this.mode !== 'center') {
|
||||
style.flex = 1
|
||||
}
|
||||
// 背景色,一般用于设置为transparent,去除默认的白色背景
|
||||
if (this.bgColor) {
|
||||
style.backgroundColor = this.bgColor
|
||||
}
|
||||
// // 如果用户设置了borderRadius值,添加弹窗的圆角
|
||||
// if (this.round && this.mode === 'bottom' || this.mode === 'center') {
|
||||
// switch (this.mode) {
|
||||
// case 'left':
|
||||
// style.borderRadius = `0 15px 15px 0`;
|
||||
// break;
|
||||
// case 'top':
|
||||
// style.borderRadius = `0 0 15px 15px`;
|
||||
// break;
|
||||
// case 'right':
|
||||
// style.borderRadius = `15px 0 0 15px`;
|
||||
// break;
|
||||
// case 'bottom':
|
||||
// style.borderRadius = `15px 15px 0 0`;
|
||||
// break;
|
||||
// default:
|
||||
// }
|
||||
// // 不加可能圆角无效
|
||||
// style.overflow = 'hidden';
|
||||
// }
|
||||
return uni.$u.deepMerge(style, uni.$u.addStyle(this.customStyle))
|
||||
},
|
||||
position() {
|
||||
if (this.mode === 'center') {
|
||||
return this.zoom ? 'fade-zoom' : 'fade'
|
||||
}
|
||||
if (this.mode === 'left') {
|
||||
return 'slide-left'
|
||||
}
|
||||
if (this.mode === 'right') {
|
||||
return 'slide-right'
|
||||
}
|
||||
if (this.mode === 'bottom') {
|
||||
return 'slide-up'
|
||||
}
|
||||
if (this.mode === 'top') {
|
||||
return 'slide-down'
|
||||
}
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
// 点击遮罩
|
||||
overlayClick() {
|
||||
if (this.closeOnClickOverlay) {
|
||||
this.$emit('close')
|
||||
}
|
||||
},
|
||||
close(e) {
|
||||
this.$emit('close')
|
||||
},
|
||||
afterEnter() {
|
||||
this.$emit('open')
|
||||
},
|
||||
clickHandler() {
|
||||
// 由于中部弹出时,其u-transition占据了整个页面相当于遮罩,此时需要发出遮罩点击事件,是否无法通过点击遮罩关闭弹窗
|
||||
if(this.mode === 'center') {
|
||||
this.overlayClick()
|
||||
}
|
||||
this.$emit('click')
|
||||
},
|
||||
// #ifdef MP-WEIXIN
|
||||
retryComputedComponentRect(children) {
|
||||
// 组件内部需要计算节点的组件
|
||||
const names = ['u-calendar-month', 'u-album', 'u-collapse-item', 'u-dropdown', 'u-index-item', 'u-index-list',
|
||||
'u-line-progress', 'u-list-item', 'u-rate', 'u-read-more', 'u-row', 'u-row-notice', 'u-scroll-list',
|
||||
'u-skeleton', 'u-slider', 'u-steps-item', 'u-sticky', 'u-subsection', 'u-swipe-action-item', 'u-tabbar',
|
||||
'u-tabs', 'u-tooltip'
|
||||
]
|
||||
// 历遍所有的子组件节点
|
||||
for (let i = 0; i < children.length; i++) {
|
||||
const child = children[i]
|
||||
// 拿到子组件的子组件
|
||||
const grandChild = child.$children
|
||||
// 判断如果在需要重新初始化的组件数组中名中,并且存在init方法的话,则执行
|
||||
if (names.includes(child.$options.name) && typeof child?.init === 'function') {
|
||||
// 需要进行一定的延时,因为初始化页面需要时间
|
||||
uni.$u.sleep(50).then(() => {
|
||||
child.init()
|
||||
})
|
||||
}
|
||||
// 如果子组件还有孙组件,进行递归历遍
|
||||
if (grandChild.length) {
|
||||
this.retryComputedComponentRect(grandChild)
|
||||
}
|
||||
}
|
||||
}
|
||||
// #endif
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "../../libs/css/components.scss";
|
||||
$u-popup-flex:1 !default;
|
||||
$u-popup-content-background-color: #fff !default;
|
||||
|
||||
.u-popup {
|
||||
flex: $u-popup-flex;
|
||||
|
||||
&__content {
|
||||
background-color: $u-popup-content-background-color;
|
||||
position: relative;
|
||||
|
||||
&--round-top {
|
||||
border-top-left-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-left-radius: 10px;
|
||||
border-bottom-right-radius: 10px;
|
||||
}
|
||||
|
||||
&--round-left {
|
||||
border-top-left-radius: 0;
|
||||
border-top-right-radius: 10px;
|
||||
border-bottom-left-radius: 0;
|
||||
border-bottom-right-radius: 10px;
|
||||
}
|
||||
|
||||
&--round-right {
|
||||
border-top-left-radius: 10px;
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-left-radius: 10px;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
|
||||
&--round-bottom {
|
||||
border-top-left-radius: 10px;
|
||||
border-top-right-radius: 10px;
|
||||
border-bottom-left-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
|
||||
&--round-center {
|
||||
border-top-left-radius: 10px;
|
||||
border-top-right-radius: 10px;
|
||||
border-bottom-left-radius: 10px;
|
||||
border-bottom-right-radius: 10px;
|
||||
}
|
||||
|
||||
&__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;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
Reference in New Issue
Block a user