更新：登录功能
This commit is contained in:
84
uni_modules/wot-design-uni/components/wd-popup/index.scss
Normal file
84
uni_modules/wot-design-uni/components/wd-popup/index.scss
Normal file
@@ -0,0 +1,84 @@
|
||||
@import './../common/abstracts/_mixin.scss';
|
||||
@import './../common/abstracts/variable.scss';
|
||||
|
||||
.wot-theme-dark {
|
||||
@include b(popup-wrapper) {
|
||||
:deep() {
|
||||
.wd-popup {
|
||||
background: $-dark-background2;
|
||||
}
|
||||
|
||||
.wd-popup__close {
|
||||
color: $-dark-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include b(popup-wrapper) {
|
||||
:deep() {
|
||||
.wd-popup {
|
||||
position: fixed;
|
||||
max-height: 100%;
|
||||
overflow-y: auto;
|
||||
background: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@include b(popup) {
|
||||
@include edeep(close) {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
color: $-popup-close-color;
|
||||
font-size: $-popup-close-size;
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
|
||||
@include mdeep(center) {
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate3d(-50%, -50%, 0);
|
||||
transform-origin: 0% 0%;
|
||||
|
||||
&.wd-zoom-in-enter,
|
||||
&.wd-zoom-in-leave-to {
|
||||
transform: scale(0.8) translate3d(-50%, -50%, 0) !important;
|
||||
}
|
||||
|
||||
@include when(deep) {
|
||||
|
||||
&.wd-zoom-in-enter,
|
||||
&.wd-zoom-in-leave-to {
|
||||
transform: scale(0.1) translate3d(-50%, -50%, 0) !important;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@include mdeep(left) {
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
@include mdeep(right) {
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
@include mdeep(top) {
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
@include mdeep(bottom) {
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
104
uni_modules/wot-design-uni/components/wd-popup/types.ts
Normal file
104
uni_modules/wot-design-uni/components/wd-popup/types.ts
Normal file
@@ -0,0 +1,104 @@
|
||||
/*
|
||||
* @Author: weisheng
|
||||
* @Date: 2024-03-18 11:22:03
|
||||
* @LastEditTime: 2025-07-06 21:00:04
|
||||
* @LastEditors: weisheng
|
||||
* @Description:
|
||||
* @FilePath: /wot-design-uni/src/uni_modules/wot-design-uni/components/wd-popup/types.ts
|
||||
* 记得注释
|
||||
*/
|
||||
import type { PropType } from 'vue'
|
||||
import { baseProps, makeBooleanProp, makeNumberProp, makeStringProp } from '../common/props'
|
||||
import type { TransitionName } from '../wd-transition/types'
|
||||
|
||||
export type PopupType = 'center' | 'top' | 'right' | 'bottom' | 'left'
|
||||
|
||||
export const popupProps = {
|
||||
...baseProps,
|
||||
/**
|
||||
* 动画类型，参见 wd-transition 组件的name
|
||||
* 类型：string
|
||||
* 可选值：fade / fade-up / fade-down / fade-left / fade-right / slide-up / slide-down / slide-left / slide-right / zoom-in
|
||||
*/
|
||||
transition: String as PropType<TransitionName>,
|
||||
/**
|
||||
* 关闭按钮
|
||||
* 类型：boolean
|
||||
* 默认值：false
|
||||
*/
|
||||
closable: makeBooleanProp(false),
|
||||
/**
|
||||
* 弹出框的位置
|
||||
* 类型：string
|
||||
* 默认值：center
|
||||
* 可选值：center / top / right / bottom / left
|
||||
*/
|
||||
position: makeStringProp<PopupType>('center'),
|
||||
/**
|
||||
* 点击遮罩是否关闭
|
||||
* 类型：boolean
|
||||
* 默认值：true
|
||||
*/
|
||||
closeOnClickModal: makeBooleanProp(true),
|
||||
/**
|
||||
* 动画持续时间
|
||||
* 类型：number | boolean
|
||||
* 默认值：300
|
||||
*/
|
||||
duration: {
|
||||
type: [Number, Boolean],
|
||||
default: 300
|
||||
},
|
||||
/**
|
||||
* 是否显示遮罩
|
||||
* 类型：boolean
|
||||
* 默认值：true
|
||||
*/
|
||||
modal: makeBooleanProp(true),
|
||||
/**
|
||||
* 设置层级
|
||||
* 类型：number
|
||||
* 默认值：10
|
||||
*/
|
||||
zIndex: makeNumberProp(10),
|
||||
/**
|
||||
* 是否当关闭时将弹出层隐藏（display: none)
|
||||
* 类型：boolean
|
||||
* 默认值：true
|
||||
*/
|
||||
hideWhenClose: makeBooleanProp(true),
|
||||
/**
|
||||
* 遮罩样式
|
||||
* 类型：string
|
||||
* 默认值：''
|
||||
*/
|
||||
modalStyle: makeStringProp(''),
|
||||
/**
|
||||
* 弹出面板是否设置底部安全距离（iphone X 类型的机型）
|
||||
* 类型：boolean
|
||||
* 默认值：false
|
||||
*/
|
||||
safeAreaInsetBottom: makeBooleanProp(false),
|
||||
/**
|
||||
* 弹出层是否显示
|
||||
*/
|
||||
modelValue: makeBooleanProp(false),
|
||||
/**
|
||||
* 弹层内容懒渲染，触发展示时才渲染内容
|
||||
* 类型：boolean
|
||||
* 默认值：true
|
||||
*/
|
||||
lazyRender: makeBooleanProp(true),
|
||||
/**
|
||||
* 是否锁定滚动
|
||||
* 类型：boolean
|
||||
* 默认值：true
|
||||
*/
|
||||
lockScroll: makeBooleanProp(true),
|
||||
/**
|
||||
* 是否从页面中脱离出来，用于解决各种 fixed 失效问题 (H5: teleport, APP: renderjs, 小程序: root-portal)
|
||||
* 类型：boolean
|
||||
* 默认值：false
|
||||
*/
|
||||
rootPortal: makeBooleanProp(false)
|
||||
}
|
||||
169
uni_modules/wot-design-uni/components/wd-popup/wd-popup.vue
Normal file
169
uni_modules/wot-design-uni/components/wd-popup/wd-popup.vue
Normal file
@@ -0,0 +1,169 @@
|
||||
<template>
|
||||
<wd-root-portal v-if="rootPortal">
|
||||
<view class="wd-popup-wrapper">
|
||||
<wd-overlay
|
||||
v-if="modal"
|
||||
:show="modelValue"
|
||||
:z-index="zIndex"
|
||||
:lock-scroll="lockScroll"
|
||||
:duration="duration"
|
||||
:custom-style="modalStyle"
|
||||
@click="handleClickModal"
|
||||
@touchmove="noop"
|
||||
/>
|
||||
<wd-transition
|
||||
:lazy-render="lazyRender"
|
||||
:custom-class="rootClass"
|
||||
:custom-style="style"
|
||||
:duration="duration"
|
||||
:show="modelValue"
|
||||
:name="transitionName"
|
||||
:destroy="hideWhenClose"
|
||||
@before-enter="emit('before-enter')"
|
||||
@enter="emit('enter')"
|
||||
@after-enter="emit('after-enter')"
|
||||
@before-leave="emit('before-leave')"
|
||||
@leave="emit('leave')"
|
||||
@after-leave="emit('after-leave')"
|
||||
>
|
||||
<slot />
|
||||
<wd-icon v-if="closable" custom-class="wd-popup__close" name="add" @click="close" />
|
||||
</wd-transition>
|
||||
</view>
|
||||
</wd-root-portal>
|
||||
|
||||
<!-- 非传送模式 -->
|
||||
<view v-else class="wd-popup-wrapper">
|
||||
<wd-overlay
|
||||
v-if="modal"
|
||||
:show="modelValue"
|
||||
:z-index="zIndex"
|
||||
:lock-scroll="lockScroll"
|
||||
:duration="duration"
|
||||
:custom-style="modalStyle"
|
||||
@click="handleClickModal"
|
||||
@touchmove="noop"
|
||||
/>
|
||||
<wd-transition
|
||||
:lazy-render="lazyRender"
|
||||
:custom-class="rootClass"
|
||||
:custom-style="style"
|
||||
:duration="duration"
|
||||
:show="modelValue"
|
||||
:name="transitionName"
|
||||
:destroy="hideWhenClose"
|
||||
@before-enter="emit('before-enter')"
|
||||
@enter="emit('enter')"
|
||||
@after-enter="emit('after-enter')"
|
||||
@before-leave="emit('before-leave')"
|
||||
@leave="emit('leave')"
|
||||
@after-leave="emit('after-leave')"
|
||||
>
|
||||
<slot />
|
||||
<wd-icon v-if="closable" custom-class="wd-popup__close" name="add" @click="close" />
|
||||
</wd-transition>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: 'wd-popup',
|
||||
options: {
|
||||
virtualHost: true,
|
||||
addGlobalClass: true,
|
||||
styleIsolation: 'shared'
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { computed, onBeforeMount, ref } from 'vue'
|
||||
import wdIcon from '../wd-icon/wd-icon.vue'
|
||||
import wdOverlay from '../wd-overlay/wd-overlay.vue'
|
||||
import wdTransition from '../wd-transition/wd-transition.vue'
|
||||
import wdRootPortal from '../wd-root-portal/wd-root-portal.vue'
|
||||
import { popupProps } from './types'
|
||||
import type { TransitionName } from '../wd-transition/types'
|
||||
|
||||
const props = defineProps(popupProps)
|
||||
const emit = defineEmits([
|
||||
'update:modelValue',
|
||||
'before-enter',
|
||||
'enter',
|
||||
'before-leave',
|
||||
'leave',
|
||||
'after-leave',
|
||||
'after-enter',
|
||||
'click-modal',
|
||||
'close'
|
||||
])
|
||||
|
||||
/**
|
||||
* 弹出位置
|
||||
*/
|
||||
const transitionName = computed<TransitionName | TransitionName[]>(() => {
|
||||
if (props.transition) {
|
||||
return props.transition
|
||||
}
|
||||
if (props.position === 'center') {
|
||||
return ['zoom-in', 'fade']
|
||||
}
|
||||
if (props.position === 'left') {
|
||||
return 'slide-left'
|
||||
}
|
||||
if (props.position === 'right') {
|
||||
return 'slide-right'
|
||||
}
|
||||
if (props.position === 'bottom') {
|
||||
return 'slide-up'
|
||||
}
|
||||
if (props.position === 'top') {
|
||||
return 'slide-down'
|
||||
}
|
||||
return 'slide-up'
|
||||
})
|
||||
|
||||
const safeBottom = ref<number>(0)
|
||||
|
||||
const style = computed(() => {
|
||||
return `z-index:${props.zIndex}; padding-bottom: ${safeBottom.value}px;${props.customStyle}`
|
||||
})
|
||||
|
||||
const rootClass = computed(() => {
|
||||
return `wd-popup wd-popup--${props.position} ${!props.transition && props.position === 'center' ? 'is-deep' : ''} ${props.customClass || ''}`
|
||||
})
|
||||
|
||||
onBeforeMount(() => {
|
||||
if (props.safeAreaInsetBottom) {
|
||||
const { safeArea, screenHeight, safeAreaInsets } = uni.getSystemInfoSync()
|
||||
|
||||
if (safeArea) {
|
||||
// #ifdef MP-WEIXIN
|
||||
safeBottom.value = screenHeight - (safeArea!.bottom || 0)
|
||||
// #endif
|
||||
// #ifndef MP-WEIXIN
|
||||
safeBottom.value = safeAreaInsets ? safeAreaInsets.bottom : 0
|
||||
// #endif
|
||||
} else {
|
||||
safeBottom.value = 0
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
function handleClickModal() {
|
||||
emit('click-modal')
|
||||
if (props.closeOnClickModal) {
|
||||
close()
|
||||
}
|
||||
}
|
||||
|
||||
function close() {
|
||||
emit('close')
|
||||
emit('update:modelValue', false)
|
||||
}
|
||||
function noop() {}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import './index.scss';
|
||||
</style>
|
||||
Reference in New Issue
Block a user