Initial commit of akmon project
This commit is contained in:
140
uni_modules/lime-popup/components/l-popup/index-u.scss
Normal file
140
uni_modules/lime-popup/components/l-popup/index-u.scss
Normal file
@@ -0,0 +1,140 @@
|
||||
@import '~@/uni_modules/lime-style/index.scss';
|
||||
// $prefix: l !default;
|
||||
$popup: #{$prefix}-popup;
|
||||
|
||||
$popup-bg-color: create-var(popup-bg-color, #fff);
|
||||
$popup-close-icon-color: create-var(popup-close-icon-color, rgba(0,0,0,0.6));
|
||||
$popup-border-radius: create-var(popup-border-radius, $border-radius-lg);
|
||||
|
||||
|
||||
.#{$popup} {
|
||||
position: fixed;
|
||||
// z-index: 11500;
|
||||
// max-height: 100vh;
|
||||
// transition: translateY 1000ms ease;
|
||||
transition-duration: 300ms;
|
||||
transition-property: transform, opacity;
|
||||
transition-timing-function: ease;
|
||||
background-color: $popup-bg-color;
|
||||
overflow: visible;
|
||||
opacity: 1; // uniapp x ios 必须写
|
||||
|
||||
&__close {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
padding: 20rpx;
|
||||
/* #ifndef APP-ANDROID || APP-IOS || APP-HARMONY */
|
||||
color: $popup-close-icon-color;
|
||||
/* #endif */
|
||||
&-icon {
|
||||
color: $popup-close-icon-color;
|
||||
}
|
||||
}
|
||||
|
||||
&--top {
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
border-bottom-left-radius: $popup-border-radius;
|
||||
border-bottom-right-radius: $popup-border-radius;
|
||||
// transform: scale(1) translateY(0)
|
||||
transform: scale(1) translate(0, 0)
|
||||
}
|
||||
|
||||
&--bottom {
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
border-top-left-radius: $popup-border-radius;
|
||||
border-top-right-radius: $popup-border-radius;
|
||||
// transform: scale(1) translateY(0);
|
||||
transform: scale(1) translate(0, 0);
|
||||
|
||||
}
|
||||
&--safe-top {
|
||||
/* #ifndef APP-ANDROID || APP-IOS || APP-HARMONY */
|
||||
padding-top: constant(safe-area-inset-top);
|
||||
padding-top: env(safe-area-inset-top);
|
||||
/* #endif */
|
||||
}
|
||||
&--safe-bottom {
|
||||
/* #ifndef APP-ANDROID || APP-IOS || APP-HARMONY */
|
||||
padding-bottom: constant(safe-area-inset-bottom);
|
||||
padding-bottom: env(safe-area-inset-bottom);
|
||||
/* #endif */
|
||||
}
|
||||
&--left {
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
// transform: scale(1) translateX(0);
|
||||
transform: scale(1) translate(0, 0);
|
||||
// height: 100vh;
|
||||
}
|
||||
|
||||
&--right {
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
// transform: scale(1) translateX(0);
|
||||
transform: scale(1) translate(0, 0);
|
||||
// height: 100vh;
|
||||
}
|
||||
|
||||
&--center {
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
/* #ifdef APP-IOS */
|
||||
transform: translate(-50%, -50%);
|
||||
/* #endif */
|
||||
/* #ifndef APP-IOS */
|
||||
transform: translate(-50%, -50%) scale(1);
|
||||
/* #endif */
|
||||
transform-origin: 50% 50%;
|
||||
border-radius: $popup-border-radius;
|
||||
}
|
||||
|
||||
&.#{$popup}-fade-enter,
|
||||
&.#{$popup}-fade-leave-to {
|
||||
opacity: 0;
|
||||
&.#{$popup}--top {
|
||||
// transform: translateY(-100%);
|
||||
transform: scale(1) translate(0, -100%);
|
||||
}
|
||||
|
||||
&.#{$popup}--bottom {
|
||||
// transform: translateY(100%);
|
||||
transform: scale(1) translate(0, 100%);
|
||||
}
|
||||
|
||||
&.#{$popup}--left {
|
||||
// transform: translateX(-100%);
|
||||
transform: scale(1) translate(-100%, 0);
|
||||
}
|
||||
|
||||
&.#{$popup}--right {
|
||||
// transform: translateX(100%);
|
||||
transform: scale(1) translate(100%, 0);
|
||||
}
|
||||
|
||||
&.#{$popup}--center {
|
||||
// transform: scale(0.6) translate(-50%, -50%);
|
||||
/* #ifndef APP-IOS */
|
||||
transform: translate(-50%, -50%) scale(0.6);
|
||||
/* #endif */
|
||||
/* #ifdef APP-IOS */
|
||||
transform: translate(-50%, -50%);
|
||||
/* #endif */
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&.#{$prefix}-dialog-enter,
|
||||
&.#{$prefix}-dialog-leave-to {
|
||||
&.#{$popup}--center {
|
||||
transform: scale(0.6) translate(-50%, -50%);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
201
uni_modules/lime-popup/components/l-popup/l-popup.uvue
Normal file
201
uni_modules/lime-popup/components/l-popup/l-popup.uvue
Normal file
@@ -0,0 +1,201 @@
|
||||
<template>
|
||||
<l-overlay
|
||||
:visible="innerValue"
|
||||
:zIndex="overlayZIndex"
|
||||
:appear="true"
|
||||
:preventScrollThrough="preventScrollThrough"
|
||||
:l-style="overlayStyle"
|
||||
@click="handleOverlayClick"
|
||||
v-if="destroyOnClose ? display && overlay : overlay">
|
||||
</l-overlay>
|
||||
<view class="l-popup"
|
||||
ref="popupRef"
|
||||
v-if="destroyOnClose ? display : inited"
|
||||
:class="rootClass"
|
||||
:style="[styles, lStyle]"
|
||||
@transitionend="finished">
|
||||
<slot></slot>
|
||||
<view class="l-popup__close" v-if="closeable" @click="handleClose">
|
||||
<slot name="close-btn">
|
||||
<l-icon class="l-popup__close-icon" :name="closeIcon" size="27px" :color="iconColor" />
|
||||
</slot>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<script lang="uts" setup>
|
||||
/**
|
||||
* Popup 弹出层组件
|
||||
* @description 提供多种位置的弹窗展示能力，支持自定义内容和动画效果
|
||||
* <br>插件类型：LPopupComponentPublicInstance
|
||||
* @tutorial https://ext.dcloud.net.cn/plugin?name=lime-popup
|
||||
*
|
||||
* @property {boolean} closeable 显示关闭按钮（默认：false）
|
||||
* @property {boolean} closeOnClickOverlay 点击遮罩关闭（默认：true）
|
||||
* @property {boolean} destroyOnClose 关闭时销毁内容（默认：false）
|
||||
* @property {string} overlayStyle 遮罩层样式（支持CSS字符串）
|
||||
* @property {'top' | 'left' | 'right' | 'bottom' | 'center' | ''} position 弹出位置
|
||||
* @value top 从顶部滑入
|
||||
* @value bottom 从底部滑入
|
||||
* @value left 从左侧滑入
|
||||
* @value right 从右侧滑入
|
||||
* @value center 居中显示（默认）
|
||||
* @property {boolean} preventScrollThrough 阻止滚动穿透（默认：true）
|
||||
* @property {boolean} overlay 显示遮罩层（默认：true）
|
||||
* @property {string} transitionName 自定义动画名称（配合transition使用）
|
||||
* @property {string|number|Array} radius 圆角 可以是字符，数值，数组
|
||||
* @property {boolean} visible 控制显示/隐藏（支持v-model）
|
||||
* @property {number} zIndex 组件层级（默认：999）
|
||||
* @property {number} duration 动画时长（单位ms，默认：300）
|
||||
* @property {string} bgColor 内容区域背景色（默认：#ffffff）
|
||||
* @property {string} closeIcon 关闭图标名称/路径（默认：'close'）
|
||||
* @property {string} iconColor 关闭图标颜色（默认：#333）
|
||||
* @property {string} lStyle 自定义内容区样式（支持CSS字符串）
|
||||
* @property {boolean} safeAreaInsetBottom 适配底部安全区域（默认：true）
|
||||
* @property {boolean} safeAreaInsetTop 适配顶部安全区域（默认：true）
|
||||
* @event {Function} close 关闭时触发（返回触发来源：'close-btn' | 'overlay'）
|
||||
* @event {Function} change 切换时触发
|
||||
* @event {Function} click-overlay 点击遮罩触发
|
||||
* @event {Function} click-close 点击关闭触发
|
||||
* @event {Function} open 打开触发
|
||||
* @event {Function} opened 打开完成触发
|
||||
* @event {Function} closed 关闭完成触发
|
||||
* @event {Function} before-enter
|
||||
* @event {Function} enter
|
||||
* @event {Function} after-enter
|
||||
* @event {Function} before-leave
|
||||
* @event {Function} leave
|
||||
* @event {Function} after-leave
|
||||
*/
|
||||
import { useTransition, UseTransitionOptions, TransitionEmitStatus } from '@/uni_modules/lime-transition';
|
||||
import { convertRadius } from './utils'
|
||||
import { PopupProps } from './type';
|
||||
|
||||
const emit = defineEmits(['change', 'click-overlay', 'click-close', 'open', 'opened','close','closed', 'before-enter', 'enter', 'after-enter', 'before-leave', 'leave', 'after-leave'])
|
||||
const props = withDefaults(defineProps<PopupProps>(),{
|
||||
closeable: false,
|
||||
overlay: true,
|
||||
closeOnClickOverlay: true,
|
||||
preventScrollThrough: true,
|
||||
destroyOnClose: false,
|
||||
safeAreaInsetBottom: true,
|
||||
safeAreaInsetTop: false,
|
||||
position: 'center',
|
||||
zIndex: 999,
|
||||
duration: 300,
|
||||
closeIcon: 'close'
|
||||
})
|
||||
|
||||
const modelValue = defineModel({type: Boolean});
|
||||
const innerValue = computed({
|
||||
set(value: boolean) {
|
||||
modelValue.value = value;
|
||||
emit('change', value)
|
||||
},
|
||||
get():boolean {
|
||||
// #ifdef APP-ANDROID
|
||||
return (props.visible ?? false) || modelValue.value// ?? false
|
||||
// #endif
|
||||
// #ifndef APP-ANDROID
|
||||
return props.visible || modelValue.value
|
||||
// #endif
|
||||
}
|
||||
} as WritableComputedOptions<boolean>)
|
||||
const status = ref<TransitionEmitStatus>('before-enter')
|
||||
const {inited, display, classes, finished} = useTransition({
|
||||
defaultName: props.transitionName ?? 'popup-fade',
|
||||
appear: innerValue.value,
|
||||
emits: (name:TransitionEmitStatus) => {
|
||||
status.value = name
|
||||
if(name == 'before-enter') {
|
||||
emit('open')
|
||||
} else if(name == 'after-enter') {
|
||||
emit('opened')
|
||||
} else if(name == 'before-leave') {
|
||||
emit('close')
|
||||
} else if(name == 'after-leave') {
|
||||
emit('closed')
|
||||
}
|
||||
emit(name)
|
||||
},
|
||||
visible: (): boolean => innerValue.value,
|
||||
duration: props.duration,
|
||||
} as UseTransitionOptions)
|
||||
|
||||
const overlayZIndex = computed(():number => props.zIndex > 0 ? props.zIndex - 1: 998);
|
||||
|
||||
const rootClass = computed(():string=>{
|
||||
const safe = props.safeAreaInsetTop && props.position == 'top'
|
||||
? 'l-popup--safe-top'
|
||||
: props.safeAreaInsetBottom && props.position == 'bottom'
|
||||
? 'l-popup--safe-bottom'
|
||||
: ''
|
||||
|
||||
return `l-popup--${props.position} ${safe} ${classes.value}`
|
||||
})
|
||||
|
||||
const {safeAreaInsets} = uni.getWindowInfo()
|
||||
|
||||
const styles = computed<Map<string,any>>(():Map<string,any> => {
|
||||
const style = new Map<string,any>();
|
||||
// #ifdef APP-ANDROID || APP-IOS || APP-HARMONY
|
||||
style.set('transition-duration', (['after-leave', 'before-enter'].includes(status.value) ? 0 : props.duration) + 'ms')
|
||||
// #endif
|
||||
// #ifndef APP-ANDROID || APP-IOS || APP-HARMONY
|
||||
style.set('transition-duration', props.duration + 'ms')
|
||||
// #endif
|
||||
if (props.bgColor != null) {
|
||||
style.set("background", props.bgColor!)
|
||||
}
|
||||
if (props.zIndex > 0) {
|
||||
style.set("z-index", props.zIndex)
|
||||
}
|
||||
|
||||
if(props.safeAreaInsetBottom && props.position == 'bottom') {
|
||||
style.set('padding-bottom', safeAreaInsets.bottom + 'px')
|
||||
}
|
||||
if(props.safeAreaInsetTop && props.position == 'top') {
|
||||
style.set('padding-top', safeAreaInsets.top + 'px')
|
||||
}
|
||||
|
||||
if(props.radius != null) {
|
||||
const values = convertRadius(props.radius!)
|
||||
style.set('border-top-left-radius', values[0])
|
||||
style.set('border-top-right-radius', values[1])
|
||||
style.set('border-bottom-right-radius', values[2])
|
||||
style.set('border-bottom-left-radius', values[3])
|
||||
}
|
||||
|
||||
// #ifndef APP
|
||||
if (!display.value) {
|
||||
style.set("display", "none")
|
||||
}
|
||||
// #endif
|
||||
|
||||
return style
|
||||
})
|
||||
const handleOverlayClick = () => {
|
||||
if(props.closeOnClickOverlay) {
|
||||
innerValue.value = false;
|
||||
emit('click-overlay')
|
||||
}
|
||||
}
|
||||
const handleClose = () => {
|
||||
innerValue.value = false;
|
||||
emit('click-close')
|
||||
}
|
||||
|
||||
// #ifdef APP
|
||||
const popupRef = ref<UniElement|null>(null)
|
||||
|
||||
watchEffect(()=>{
|
||||
if(!display.value) {
|
||||
popupRef.value?.style.setProperty('display', 'none')
|
||||
} else {
|
||||
popupRef.value?.style.setProperty('display', 'flex')
|
||||
}
|
||||
})
|
||||
// #endif
|
||||
</script>
|
||||
<style lang="scss">
|
||||
@import "./index-u";
|
||||
</style>
|
||||
181
uni_modules/lime-popup/components/l-popup/l-popup.vue
Normal file
181
uni_modules/lime-popup/components/l-popup/l-popup.vue
Normal file
@@ -0,0 +1,181 @@
|
||||
<template>
|
||||
<view>
|
||||
<l-overlay
|
||||
:visible="innerValue"
|
||||
:zIndex="overlayZIndex"
|
||||
:preventScrollThrough="preventScrollThrough"
|
||||
:l-style="overlayStyle"
|
||||
@click="handleOverlayClick"
|
||||
v-if="destroyOnClose ? display && overlay : overlay">
|
||||
</l-overlay>
|
||||
<view class="l-popup"
|
||||
v-if="destroyOnClose ? display : inited"
|
||||
:class="rootClass"
|
||||
:style="[styles, lStyle]"
|
||||
@transitionend="finished">
|
||||
<slot></slot>
|
||||
<view class="l-popup__close" v-if="closeable" @click="handleClose">
|
||||
<slot name="close-btn">
|
||||
<l-icon class="l-popup__close-icon" :name="closeIcon" v-if="closeable" size="54rpx" :color="iconColor" />
|
||||
</slot>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
// @ts-nocheck
|
||||
/**
|
||||
* Popup 弹出层组件
|
||||
* @description 提供多种位置的弹窗展示能力，支持自定义内容和动画效果
|
||||
* <br>插件类型：LPopupComponentPublicInstance
|
||||
* @tutorial https://ext.dcloud.net.cn/plugin?name=lime-popup
|
||||
*
|
||||
* @property {boolean} closeable 显示关闭按钮（默认：false）
|
||||
* @property {boolean} closeOnClickOverlay 点击遮罩关闭（默认：true）
|
||||
* @property {boolean} destroyOnClose 关闭时销毁内容（默认：false）
|
||||
* @property {string} overlayStyle 遮罩层样式（支持CSS字符串）
|
||||
* @property {'top' | 'left' | 'right' | 'bottom' | 'center' | ''} position 弹出位置
|
||||
* @value top 从顶部滑入
|
||||
* @value bottom 从底部滑入
|
||||
* @value left 从左侧滑入
|
||||
* @value right 从右侧滑入
|
||||
* @value center 居中显示（默认）
|
||||
* @property {boolean} preventScrollThrough 阻止滚动穿透（默认：true）
|
||||
* @property {boolean} overlay 显示遮罩层（默认：true）
|
||||
* @property {string} transitionName 自定义动画名称（配合transition使用）
|
||||
* @property {string|number|Array} radius 圆角 可以是字符，数值，数组
|
||||
* @property {boolean} visible 控制显示/隐藏（支持v-model）
|
||||
* @property {number} zIndex 组件层级（默认：999）
|
||||
* @property {number} duration 动画时长（单位ms，默认：300）
|
||||
* @property {string} bgColor 内容区域背景色（默认：#ffffff）
|
||||
* @property {string} closeIcon 关闭图标名称/路径（默认：'close'）
|
||||
* @property {string} iconColor 关闭图标颜色（默认：#333）
|
||||
* @property {string} lStyle 自定义内容区样式（支持CSS字符串）
|
||||
* @property {boolean} safeAreaInsetBottom 适配底部安全区域（默认：true）
|
||||
* @property {boolean} safeAreaInsetTop 适配顶部安全区域（默认：true）
|
||||
* @event {Function} close 关闭时触发（返回触发来源：'close-btn' | 'overlay'）
|
||||
* @event {Function} change 切换时触发
|
||||
* @event {Function} click-overlay 点击遮罩触发
|
||||
* @event {Function} click-close 点击关闭触发
|
||||
* @event {Function} open 打开触发
|
||||
* @event {Function} opened 打开完成触发
|
||||
* @event {Function} closed 关闭完成触发
|
||||
* @event {Function} before-enter
|
||||
* @event {Function} enter
|
||||
* @event {Function} after-enter
|
||||
* @event {Function} before-leave
|
||||
* @event {Function} leave
|
||||
* @event {Function} after-leave
|
||||
*/
|
||||
import { computed, defineComponent } from '@/uni_modules/lime-shared/vue';
|
||||
import { useTransition, UseTransitionOptions, TransitionEmitStatus } from '@/uni_modules/lime-transition';
|
||||
import popupProps from './props'
|
||||
import { convertRadius } from './utils'
|
||||
export default defineComponent({
|
||||
name: 'l-popup',
|
||||
props: popupProps,
|
||||
options: {
|
||||
addGlobalClass: true,
|
||||
virtualHost: true,
|
||||
},
|
||||
externalClasses: ['l-class'],
|
||||
emits: ['change', 'click-overlay', 'click-close', 'open', 'opened','close','closed','update:modelValue', 'input', 'before-enter', 'enter', 'after-enter', 'before-leave', 'leave', 'after-leave'],
|
||||
setup(props, { emit }) {
|
||||
const innerValue = computed({
|
||||
set(value: boolean) {
|
||||
emit('change', value)
|
||||
emit('update:modelValue', value)
|
||||
// #ifdef VUE2
|
||||
emit('input', value)
|
||||
// #endif
|
||||
},
|
||||
get():boolean {
|
||||
return props.visible || props.modelValue || props.value || false
|
||||
}
|
||||
} as WritableComputedOptions<boolean>)
|
||||
|
||||
const {inited, display, classes, finished} = useTransition({
|
||||
defaultName: props.transitionName || 'popup-fade',
|
||||
appear: innerValue.value,
|
||||
emits: (name:TransitionEmitStatus) => {
|
||||
if(name == 'before-enter') {
|
||||
emit('open')
|
||||
} else if(name == 'after-enter') {
|
||||
emit('opened')
|
||||
} else if(name == 'before-leave') {
|
||||
emit('close')
|
||||
} else if(name == 'after-leave') {
|
||||
emit('closed')
|
||||
}
|
||||
emit(name)
|
||||
},
|
||||
visible: (): boolean => innerValue.value,
|
||||
duration: props.duration,
|
||||
} as UseTransitionOptions)
|
||||
|
||||
const overlayZIndex = computed(():number => props.zIndex > 0? props.zIndex - 1 : 998);
|
||||
|
||||
const rootClass = computed(():string=>{
|
||||
const safe = props.safeAreaInsetTop && props.position == 'top'
|
||||
? 'l-safe-area-top'
|
||||
: props.safeAreaInsetBottom && props.position == 'bottom'
|
||||
? 'l-safe-area-bottom'
|
||||
: ''
|
||||
|
||||
return `l-popup--${props.position} ${safe} ${classes.value}`
|
||||
// return `l-popup--${props.position} ${classes.value}`
|
||||
})
|
||||
|
||||
const styles = computed(() => {
|
||||
const style:Record<string, any> = {}
|
||||
style['transition-duration'] = props.duration + 'ms'
|
||||
if (props.bgColor != null) {
|
||||
style["background"] = props.bgColor!
|
||||
}
|
||||
if (props.zIndex > 0) {
|
||||
style["z-index"] = props.zIndex
|
||||
}
|
||||
if (!display.value) {
|
||||
style["display"] = "none"
|
||||
}
|
||||
|
||||
if(props.radius) {
|
||||
const values = convertRadius(props.radius!)
|
||||
|
||||
style['border-top-left-radius'] = values[0]
|
||||
style['border-top-right-radius'] = values[1]
|
||||
style['border-bottom-right-radius'] = values[2]
|
||||
style['border-bottom-left-radius'] = values[3]
|
||||
}
|
||||
|
||||
return style
|
||||
})
|
||||
|
||||
const handleOverlayClick = () => {
|
||||
if(props.closeOnClickOverlay) {
|
||||
innerValue.value = false
|
||||
emit('click-overlay')
|
||||
}
|
||||
}
|
||||
const handleClose = () => {
|
||||
innerValue.value = false
|
||||
emit('click-close')
|
||||
}
|
||||
|
||||
return {
|
||||
innerValue,
|
||||
inited,
|
||||
display,
|
||||
finished,
|
||||
overlayZIndex,
|
||||
rootClass,
|
||||
styles,
|
||||
handleOverlayClick,
|
||||
handleClose
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
<style lang="scss">
|
||||
@import "./index-u";
|
||||
</style>
|
||||
82
uni_modules/lime-popup/components/l-popup/props.ts
Normal file
82
uni_modules/lime-popup/components/l-popup/props.ts
Normal file
@@ -0,0 +1,82 @@
|
||||
// @ts-nocheck
|
||||
export default {
|
||||
/** 是否展示关闭按钮，值为 `true` 显示默认关闭按钮；值为 `false` 则不显示关闭按钮；也可以自定义关闭按钮 */
|
||||
closeable: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
/** 点击遮罩层是否关闭 */
|
||||
closeOnClickOverlay: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
/** 是否在关闭浮层时销毁浮层 */
|
||||
destroyOnClose: Boolean,
|
||||
/** 浮层出现位置 */
|
||||
position: {
|
||||
type: String,
|
||||
default: 'center',
|
||||
validator(val: string) : boolean {
|
||||
if (!val) return true;
|
||||
return ['top', 'left', 'right', 'bottom', 'center'].includes(val);
|
||||
},
|
||||
},
|
||||
/** 防止滚动穿透 */
|
||||
preventScrollThrough: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
overlayStyle: {
|
||||
type: [String, Object]
|
||||
},
|
||||
/** 是否显示遮罩层 */
|
||||
overlay: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
/** 弹出层内容区的动画名，等价于transition组件的name属性 */
|
||||
transitionName: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
/** 是否显示浮层 */
|
||||
visible: {
|
||||
type: Boolean,
|
||||
default: undefined,
|
||||
},
|
||||
// vue2
|
||||
value: {
|
||||
type: Boolean,
|
||||
default: undefined,
|
||||
},
|
||||
modelValue: {
|
||||
type: Boolean,
|
||||
default: undefined,
|
||||
},
|
||||
/** 组件层级 默认为 999 */
|
||||
zIndex: {
|
||||
type: Number,
|
||||
default: 999
|
||||
},
|
||||
duration: {
|
||||
type: Number,
|
||||
default: 300
|
||||
},
|
||||
bgColor: {
|
||||
type: String
|
||||
},
|
||||
iconColor: {
|
||||
type: String
|
||||
},
|
||||
lStyle: {
|
||||
type: String
|
||||
},
|
||||
closeIcon: {
|
||||
type: String,
|
||||
default: 'close'
|
||||
},
|
||||
radius: {
|
||||
type: [String, Number, Array],
|
||||
default: undefined
|
||||
}
|
||||
};
|
||||
59
uni_modules/lime-popup/components/l-popup/type.ts
Normal file
59
uni_modules/lime-popup/components/l-popup/type.ts
Normal file
@@ -0,0 +1,59 @@
|
||||
// @ts-nocheck
|
||||
export interface PopupProps {
|
||||
/**
|
||||
* 是否展示关闭按钮，值为 `true` 显示默认关闭按钮；值为 `false` 则不显示关闭按钮；也可以自定义关闭按钮
|
||||
*/
|
||||
closeable : boolean;
|
||||
/**
|
||||
* 点击遮罩层是否关闭
|
||||
*/
|
||||
closeOnClickOverlay : boolean;
|
||||
/**
|
||||
* 是否在关闭浮层时销毁浮层
|
||||
*/
|
||||
destroyOnClose : boolean;
|
||||
/**
|
||||
* 遮罩层的属性，透传至 overlay
|
||||
*/
|
||||
overlayStyle ?: string | UTSJSONObject;
|
||||
// overlayProps ?: {
|
||||
// preventScrollThrough: boolean
|
||||
// zIndex: number
|
||||
// lStyle: string
|
||||
// };
|
||||
/**
|
||||
* 浮层出现位置
|
||||
*/
|
||||
position : 'top' | 'left' | 'right' | 'bottom' | 'center' | '';
|
||||
/**
|
||||
* 防止滚动穿透
|
||||
*/
|
||||
preventScrollThrough : boolean;
|
||||
/**
|
||||
* 是否显示遮罩层
|
||||
*/
|
||||
overlay : boolean;
|
||||
/**
|
||||
* 弹出层内容区的动画名，等价于transition组件的name属性
|
||||
*/
|
||||
transitionName ?: string;
|
||||
/**
|
||||
* 是否显示浮层
|
||||
*/
|
||||
visible ?: boolean;
|
||||
/**
|
||||
* 组件层级，Web 侧样式默认为 999，移动端和小程序样式默认为 999
|
||||
*/
|
||||
zIndex : number;
|
||||
duration : number;
|
||||
bgColor?: string;
|
||||
closeIcon: string;
|
||||
iconColor?: string;
|
||||
lStyle?: string | UTSJSONObject;
|
||||
safeAreaInsetBottom:boolean;
|
||||
safeAreaInsetTop:boolean;
|
||||
|
||||
radius?: string | number | (string|number)[]
|
||||
}
|
||||
|
||||
export type PopupSource = 'close-btn' | 'overlay';
|
||||
21
uni_modules/lime-popup/components/l-popup/utils.ts
Normal file
21
uni_modules/lime-popup/components/l-popup/utils.ts
Normal file
@@ -0,0 +1,21 @@
|
||||
import { addUnit } from '@/uni_modules/lime-shared/addUnit'
|
||||
export function convertRadius(radius : any) : string[] {
|
||||
if (Array.isArray(radius)) {
|
||||
const values = radius.map((item) : string|null => addUnit(item))
|
||||
if (values.length == 1) {
|
||||
return [values[0]!, values[0]!, values[0]!, values[0]!]
|
||||
}
|
||||
if (values.length == 2) {
|
||||
return [values[0]!, values[1]!, values[0]!, values[1]!]
|
||||
}
|
||||
if (values.length == 3) {
|
||||
return [values[0]!, values[1]!, values[2]!, values[1]!]
|
||||
}
|
||||
if (values.length == 4) {
|
||||
return [values[0]!, values[1]!, values[2]!, values[3]!]
|
||||
}
|
||||
return ['0', '0', '0', '0']
|
||||
}
|
||||
const value = addUnit(radius) ?? '0'
|
||||
return [value, value, value, value]
|
||||
}
|
||||
171
uni_modules/lime-popup/components/lime-popup/lime-popup.uvue
Normal file
171
uni_modules/lime-popup/components/lime-popup/lime-popup.uvue
Normal file
@@ -0,0 +1,171 @@
|
||||
<template>
|
||||
<view class="demo-block">
|
||||
<text class="demo-block__title-text ultra">Popup 弹出层</text>
|
||||
<text class="demo-block__desc-text">弹出层容器，用于展示弹窗、信息提示等内容</text>
|
||||
<view class="demo-block__body">
|
||||
|
||||
<view class="demo-block">
|
||||
<text class="demo-block__title-text">基础类型{{visible}}</text>
|
||||
<view class="demo-block__body">
|
||||
<button class="button"
|
||||
v-for="item in placement"
|
||||
@click="onClick(item.value)"
|
||||
:key="item.value">{{item.text}}</button>
|
||||
<l-popup v-model="visible"
|
||||
:position="currentPlacement"
|
||||
:closeable="true">
|
||||
<view style="padding: 100px;"></view>
|
||||
</l-popup>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="demo-block">
|
||||
<text class="demo-block__title-text">其它</text>
|
||||
<view class="demo-block__body">
|
||||
|
||||
<button class="button" @click="visible1 = true">底部弹出层-带标题及操作</button>
|
||||
<l-popup v-model="visible1" position="bottom" lStyle="height: 258px">
|
||||
<view class="header">
|
||||
<text class="btn btn--cancel" aria-role="button" @click="onHide">取消</text>
|
||||
<text class="title">标题文字</text>
|
||||
<text class="btn btn--confirm" aria-role="button" @click="onHide">确定</text>
|
||||
</view>
|
||||
</l-popup>
|
||||
|
||||
<button class="button" @click="visible2 = true">居中弹出层-带自定义关闭按钮</button>
|
||||
<l-popup v-model="visible2" position="center" @change="change">
|
||||
<view style="width: 240px; height: 240px; overflow: visible;">
|
||||
</view>
|
||||
<view class="close-btn">
|
||||
<l-icon name="close-circle" size="32" color="white" @click="onClose" />
|
||||
</view>
|
||||
</l-popup>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<script lang="uts" setup>
|
||||
type Placement = {
|
||||
value : string
|
||||
text : string
|
||||
}
|
||||
const top = ref(10)
|
||||
const placement = [
|
||||
{ value: 'top', text: '顶部弹出' },
|
||||
{ value: 'left', text: '左侧弹出' },
|
||||
{ value: 'center', text: '中间弹出' },
|
||||
{ value: 'bottom', text: '底部弹出' },
|
||||
{ value: 'right', text: '右侧弹出' },
|
||||
] as Placement[]
|
||||
|
||||
const visible = ref(false)
|
||||
const visible1 = ref(false)
|
||||
const visible2 = ref(false)
|
||||
const currentPlacement = ref('top')
|
||||
const onClick = (value: string) => {
|
||||
visible.value = true
|
||||
currentPlacement.value = value
|
||||
}
|
||||
const change = () => {}
|
||||
const onHide = () =>{
|
||||
visible1.value= false
|
||||
}
|
||||
const onClose = ()=>{
|
||||
visible2.value= false
|
||||
}
|
||||
</script>
|
||||
<style lang="scss">
|
||||
.header {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
height: 116rpx;
|
||||
}
|
||||
|
||||
.title {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
// font-weight: 600;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.button {
|
||||
margin-bottom: 10rpx;
|
||||
}
|
||||
|
||||
.btn {
|
||||
font-size: 16px;
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.btn--cancel {
|
||||
color: rgba(0, 0, 0, 0.6);
|
||||
}
|
||||
|
||||
.btn--confirm {
|
||||
color: #0052d9;
|
||||
}
|
||||
|
||||
.close-btn {
|
||||
overflow: visible;
|
||||
position: absolute;
|
||||
// background-color: aqua;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
z-index: 11501;
|
||||
// margin-left: -32rpx;
|
||||
bottom: -100rpx;
|
||||
// bottom: -112rpx // calc(-1 * (48rpx + 64rpx));
|
||||
}
|
||||
|
||||
.demo-block {
|
||||
margin: 32px 20px 0;
|
||||
overflow: visible;
|
||||
|
||||
&__title {
|
||||
margin: 0;
|
||||
margin-top: 8px;
|
||||
|
||||
&-text {
|
||||
color: rgba(0, 0, 0, 0.6);
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 16px;
|
||||
|
||||
&.large {
|
||||
color: rgba(0, 0, 0, 0.9);
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
line-height: 26px;
|
||||
}
|
||||
|
||||
&.ultra {
|
||||
color: rgba(0, 0, 0, 0.9);
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
line-height: 32px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__desc-text {
|
||||
color: rgba(0, 0, 0, 0.6);
|
||||
margin: 8px 16px 0 0;
|
||||
font-size: 14px;
|
||||
line-height: 22px;
|
||||
}
|
||||
|
||||
&__body {
|
||||
margin: 16px 0;
|
||||
overflow: visible;
|
||||
|
||||
.demo-block {
|
||||
// margin-top: 0px;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
174
uni_modules/lime-popup/components/lime-popup/lime-popup.vue
Normal file
174
uni_modules/lime-popup/components/lime-popup/lime-popup.vue
Normal file
@@ -0,0 +1,174 @@
|
||||
<template>
|
||||
<view class="demo-block">
|
||||
<text class="demo-block__title-text ultra">Popup 弹出层</text>
|
||||
<text class="demo-block__desc-text">弹出层容器，用于展示弹窗、信息提示等内容</text>
|
||||
<view class="demo-block__body">
|
||||
|
||||
<view class="demo-block">
|
||||
<text class="demo-block__title-text">基础类型{{visible}}</text>
|
||||
<view class="demo-block__body">
|
||||
<button class="button"
|
||||
v-for="item in placement"
|
||||
@click="onClick(item.value)"
|
||||
:key="item.value">{{item.text}}</button>
|
||||
<l-popup v-model="visible"
|
||||
:position="currentPlacement"
|
||||
:closeable="true">
|
||||
<view style="padding: 100px;"></view>
|
||||
</l-popup>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="demo-block">
|
||||
<text class="demo-block__title-text">其它</text>
|
||||
<view class="demo-block__body">
|
||||
|
||||
<button class="button" @click="visible1 = true">底部弹出层-带标题及操作</button>
|
||||
<l-popup v-model="visible1" position="bottom" lStyle="height: 258px">
|
||||
<view class="header">
|
||||
<text class="btn btn--cancel" aria-role="button" @click="onHide">取消</text>
|
||||
<text class="title">标题文字</text>
|
||||
<text class="btn btn--confirm" aria-role="button" @click="onHide">确定</text>
|
||||
</view>
|
||||
</l-popup>
|
||||
|
||||
<button class="button" @click="visible2 = true">居中弹出层-带自定义关闭按钮</button>
|
||||
<l-popup v-model="visible2" position="center" @change="change">
|
||||
<view style="width: 240px; height: 240px; overflow: visible;">
|
||||
</view>
|
||||
<view class="close-btn">
|
||||
<l-icon name="close-circle" size="32" color="white" @click="onClose" />
|
||||
</view>
|
||||
</l-popup>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
visible: false,
|
||||
visible1: false,
|
||||
visible2: false,
|
||||
currentPlacement: 'top',
|
||||
placement: [
|
||||
{ value: 'top', text: '顶部弹出' },
|
||||
{ value: 'left', text: '左侧弹出' },
|
||||
{ value: 'center', text: '中间弹出' },
|
||||
{ value: 'bottom', text: '底部弹出' },
|
||||
{ value: 'right', text: '右侧弹出' },
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onClick(type) {
|
||||
this.visible = true
|
||||
this.currentPlacement = type
|
||||
},
|
||||
onHide() {
|
||||
this.visible1 = !this.visible1
|
||||
},
|
||||
onClose() {
|
||||
this.visible2 = !this.visible2
|
||||
},
|
||||
change() {
|
||||
console.log('change')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
popup-demo {
|
||||
padding: 0 16px;
|
||||
}
|
||||
|
||||
.header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 116rpx;
|
||||
}
|
||||
|
||||
.title {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
// font-weight: 600;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.btn {
|
||||
font-size: 16px;
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.btn--cancel {
|
||||
color: rgba(0, 0, 0, 0.6);
|
||||
}
|
||||
|
||||
.btn--confirm {
|
||||
color: #0052d9;
|
||||
}
|
||||
|
||||
|
||||
.close-btn {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
margin-left: -16px;
|
||||
bottom: calc(-1 * (24px + 32px));
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
margin: 16px;
|
||||
display: block;
|
||||
}
|
||||
.demo-block {
|
||||
margin: 32px 20px 0;
|
||||
overflow: visible;
|
||||
|
||||
&__title {
|
||||
margin: 0;
|
||||
margin-top: 8px;
|
||||
|
||||
&-text {
|
||||
color: rgba(0, 0, 0, 0.6);
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 16px;
|
||||
|
||||
&.large {
|
||||
color: rgba(0, 0, 0, 0.9);
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
line-height: 26px;
|
||||
}
|
||||
|
||||
&.ultra {
|
||||
color: rgba(0, 0, 0, 0.9);
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
line-height: 32px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__desc-text {
|
||||
color: rgba(0, 0, 0, 0.6);
|
||||
margin: 8px 16px 0 0;
|
||||
font-size: 14px;
|
||||
line-height: 22px;
|
||||
}
|
||||
|
||||
&__body {
|
||||
margin: 16px 0;
|
||||
overflow: visible;
|
||||
|
||||
.demo-block {
|
||||
// margin-top: 0px;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user