XJT778/1XJT
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

first save

Browse Source
This commit is contained in:
jackey
2025-11-12 15:08:51 +08:00
commit c66fc54821
2885 changed files with 339178 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
scoring/uni_modules/lime-popup/changelog.md Normal file
View File

@@ -0,0 +1,50 @@
## 0.2.5（2025-10-23）
- fix: 去掉鸿蒙强制更新的操作，有使用鸿蒙的请使用hbx4.82以上
## 0.2.4（2025-10-15）
- fix: 去掉版本判断
## 0.2.3（2025-10-15）
- fix:修复uniapp web z-index失效问题
## 0.2.2（2025-08-13）
- fix: 修复uniapp type当变量导致的问题
## 0.2.1（2025-07-18）
- fix: 修复因隐藏还存在页面导致无法点击问题
## 0.2.0（2025-06-20）
- fix: 修复因隐藏导致其它插件样式失效问题
## 0.1.9（2025-05-30）
- fix: 修复演示demo问题
## 0.1.8（2025-05-14）
- feat: 关闭icon 单位由rpx改成px
## 0.1.7（2025-05-07）
- feat: 增加`radius`圆角属性
## 0.1.6（2025-04-22）
- feat: 兼容uniappx 鸿蒙next
## 0.1.5（2025-04-18）
- chore: 更新文档
## 0.1.4（2025-03-26）
- chore: 组件的`position`值由`top`改为`center`,与文档保持一致
## 0.1.3（2025-03-24）
- chore: 组件的`click-icon`改为`click-close`,与文档保持一致
## 0.1.2（2025-02-13）
- fix: 修复遮罩层z-index固定值的问题
## 0.1.1（2025-01-22）
- chore: `closeOnOverlayClick`改为`closeOnClickOverlay`
## 0.1.0（2025-01-18）
- chore: 更新文档
## 0.0.9（2025-01-15）
- fix: 修复`closeOnOverlayClick`无效的问题
## 0.0.8（2025-01-13）
- fix: uniapp x ios 居中弹出不使用scale,因为会导致不居中，为官方bug
## 0.0.7（2024-11-26）
- feat: z-index改成999
## 0.0.6（2024-11-13）
- chore: 更新文档
## 0.0.5（2024-11-03）
- feat: z-index降到888
## 0.0.4（2024-10-27）
- chore: 更新文档
## 0.0.3（2024-10-26）
- chore: 去掉多余log
## 0.0.2（2024-10-24）
- feat: 兼容vue2
## 0.0.1（2024-10-24）
- init

156
scoring/uni_modules/lime-popup/components/l-popup/index-u.scss Normal file
View File

@@ -0,0 +1,156 @@
@import '~@/uni_modules/lime-style/index.scss';
// $prefix: l !default;
$use-css-var: true;
$popup: #{$prefix}-popup;
$popup-bg-color: create-var(popup-bg-color, $bg-color-elevated);
$popup-close-icon-color: create-var(popup-close-icon-color, $text-color-2);
$popup-border-radius: create-var(popup-border-radius, $border-radius-lg);
$popup-z-index: create-var(popup-z-index, 999);
.#{$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 必须写
// z-index: $popup-z-index;
&__close {
position: absolute;
top: 0;
right: 0;
padding: 10px;
/* #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 UNI-APP-X */
padding-top: constant(safe-area-inset-top);
padding-top: env(safe-area-inset-top);
/* #endif */
/* #ifdef UNI-APP-X */
padding-top: var(--uni-safe-area-inset-top);
// padding-top: constant(safe-area-inset-top);
// padding-top: env(safe-area-inset-top);
/* #endif */
}
&--safe-bottom {
/* #ifndef UNI-APP-X */
padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);
/* #endif */
/* #ifdef UNI-APP-X */
padding-bottom: var(--uni-safe-area-inset-bottom);
// 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;
@include 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;
}
}
}

215
scoring/uni_modules/lime-popup/components/l-popup/l-popup.uvue Normal file
View File

@@ -0,0 +1,215 @@
<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, type UseTransitionOptions, type 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 hosKey = ref(0)
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')
// setTimeout(()=>{
// if(hosKey.value > 0) return
// hosKey.value++
// },5)
} 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 UNI-APP-X && APP
style.set('transition-duration', (['after-leave', 'before-enter'].includes(status.value) ? 0 : props.duration) + 'ms')
// #endif
// #ifndef UNI-APP-X && APP
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) {
// 会导致picker触发pick
// style.set("display", "none")
style.set("pointer-events", "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(()=>{
// 会导致picker触发pick
if(!display.value) {
// popupRef.value?.style.setProperty('display', 'none')
popupRef.value?.style.setProperty('pointer-events', 'none')
popupRef.value?.style.setProperty('z-index', -10000)
} else {
// popupRef.value?.style.setProperty('display', 'flex')
popupRef.value?.style.setProperty('pointer-events', 'auto')
popupRef.value?.style.setProperty('z-index', props.zIndex)
}
})
// #endif
</script>
<style lang="scss">
@import "./index-u";
</style>

181
scoring/uni_modules/lime-popup/components/l-popup/l-popup.vue Normal file
View 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, type UseTransitionOptions, type 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 || !props.zIndex) {
style["z-index"] = props.zIndex ?? 999
}
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
scoring/uni_modules/lime-popup/components/l-popup/props.ts Normal file
View 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
scoring/uni_modules/lime-popup/components/l-popup/type.ts Normal file
View 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 | Array//(string|number)[]
}
export type PopupSource = 'close-btn' | 'overlay';

21
scoring/uni_modules/lime-popup/components/l-popup/utils.ts Normal file
View 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]
}

177
scoring/uni_modules/lime-popup/components/lime-popup/lime-popup.uvue Normal file
View File

@@ -0,0 +1,177 @@
<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">基础类型</text>
<view class="demo-block__body">
<button class="button" type="primary" 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 type="primary" 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 type="primary" class="button" @click="visible2 = true">居中弹出层-带自定义关闭按钮</button>
<l-popup v-model="visible2" position="center" @change="change" closeable>
<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) => {
console.log('value', value)
visible.value = true
currentPlacement.value = value
}
const change = () => { }
const onHide = () => {
visible1.value = false
}
const onClose = () => {
visible2.value = false
}
</script>
<style lang="scss">
$card-bg-color: var(--doc-card-bg-color, white);
// $page-bg-color: var(--doc-page-bg-color, #f5f5f5);
$title-color: var(--doc-title-color, #000000E6);
$summary-color: var(--doc-summary-color, #00000099);
.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;
color: $title-color;
}
.button {
margin-bottom: 10rpx;
}
.btn {
font-size: 16px;
padding: 16px;
}
.btn--cancel {
color: $summary-color;
}
.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: -50px;
// bottom: -112rpx // calc(-1 * (48rpx + 64rpx));
}
.demo-block {
// margin: 32px 20px 0;
padding: 32px 10px 0;
// background-color: $page-bg-color;
transition-property: background-color;
transition-duration: 300ms;
overflow: visible;
&__title {
margin: 0;
margin-top: 8px;
&-text {
color: $summary-color;
font-weight: 400;
font-size: 14px;
line-height: 16px;
&.large {
color: $title-color;
font-size: 18px;
font-weight: 700;
line-height: 26px;
}
&.ultra {
color: $title-color;
font-size: 24px;
font-weight: 700;
line-height: 32px;
}
}
}
&__desc-text {
color: $summary-color;
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
scoring/uni_modules/lime-popup/components/lime-popup/lime-popup.vue Normal file
View 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>

112
scoring/uni_modules/lime-popup/package.json Normal file
View File

@@ -0,0 +1,112 @@
{
"id": "lime-popup",
"displayName": "lime-popup 弹出层",
"version": "0.2.5",
"description": "lime-popup 弹出层容器，用于展示弹窗、信息提示等内容,兼容uniapp/uniappx",
"keywords": [
"lime-popup",
"popup",
"弹出层",
"弹窗"
],
"repository": "",
"engines": {
"HBuilderX": "^4.29",
"uni-app": "^4.62",
"uni-app-x": "^4.75"
},
"dcloudext": {
"type": "component-vue",
"sale": {
"regular": {
"price": "0.00"
},
"sourcecode": {
"price": "0.00"
}
},
"contact": {
"qq": ""
},
"declaration": {
"ads": "无",
"data": "无",
"permissions": "无"
},
"npmurl": "",
"darkmode": "x",
"i18n": "x",
"widescreen": "x"
},
"uni_modules": {
"dependencies": [
"lime-style",
"lime-shared",
"lime-overlay",
"lime-transition",
"lime-icon"
],
"encrypt": [],
"platforms": {
"cloud": {
"tcb": "x",
"aliyun": "x",
"alipay": "x"
},
"client": {
"uni-app": {
"vue": {
"vue2": "√",
"vue3": "√"
},
"web": {
"safari": "√",
"chrome": "√"
},
"app": {
"vue": "√",
"nvue": "-",
"android": {
"extVersion": "",
"minVersion": "22"
},
"ios": "√",
"harmony": "√"
},
"mp": {
"weixin": "√",
"alipay": "-",
"toutiao": "-",
"baidu": "-",
"kuaishou": "-",
"jd": "-",
"harmony": "-",
"qq": "-",
"lark": "-"
},
"quickapp": {
"huawei": "-",
"union": "-"
}
},
"uni-app-x": {
"web": {
"safari": "√",
"chrome": "√"
},
"app": {
"android": {
"extVersion": "",
"minVersion": "22"
},
"ios": "√",
"harmony": "√"
},
"mp": {
"weixin": "√"
}
}
}
}
}
}

230
scoring/uni_modules/lime-popup/readme.md Normal file
View File

@@ -0,0 +1,230 @@
# lime-popup 弹出层
弹出层容器，用于展示弹窗、信息提示等内容，支持多种弹出位置和动画效果，兼容uniapp/uniappx。
> 插件依赖：`lime-style`、`lime-shared`、`lime-overlay`、`lime-transition`、`lime-icon`。
> 注意：`lime-svg`为收费插件，若不需要svg功能可删除依赖。
## 文档链接
📚 组件详细文档请访问以下站点：
- [弹出层文档 - 站点1](https://limex.qcoon.cn/components/popup.html)
- [弹出层文档 - 站点2](https://limeui.netlify.app/components/popup.html)
- [弹出层文档 - 站点3](https://limeui.familyzone.top/components/popup.html)
## 安装方法
1. 在uni-app插件市场中搜索并导入`lime-popup`
2. 导入后可能需要重新编译项目
3. 在页面中使用`l-popup`组件（组件）或`lime-popup`（演示）
::: tip 注意🔔
本插件依赖的[【lime-svg】](https://ext.dcloud.net.cn/plugin?id=18519)是原生插件，如果购买(收费为6元)则需要自定义基座，才能使用，
若不需要删除即可
:::
## 代码演示
### 基础用法
通过 `v-model` 控制弹出层是否展示。
```html
<button @click="show = true">展示弹出层</button>
<l-popup v-model="show">
<view style="padding: 100px;"></view>
</l-popup>
```
```js
const show = ref(false);
```
### 弹出位置
通过 `position` 属性设置弹窗的弹出位置，默认为居中弹出，可以设置为 `top`、`bottom`、`left`、`right`、`center`。
- 当弹窗从顶部或底部弹出时，默认宽度与屏幕宽度保持一致，弹窗高度取决于内容的高度。
- 当弹窗从左侧或右侧弹出时，默认不设置宽度和高度，弹窗的宽高取决于内容的宽高。
```html
<!-- 顶部弹出 -->
<l-popup v-model"showTop" position="top">
<view style="padding: 100px;"></view>
</l-popup>
<!-- 左边弹出 -->
<l-popup v-model"showTop" position="left">
<view style="padding: 100px;"></view>
</l-popup>
<!-- 底部弹出 -->
<l-popup v-model"showTop" position="bottom">
<view style="padding: 100px;"></view>
</l-popup>
<!-- 右边弹出 -->
<l-popup v-model"showTop" position="right">
<view style="padding: 100px;"></view>
</l-popup>
```
### 关闭图标
设置 `closeable` 属性后，会在弹出层的右上角显示关闭图标，并且可以通过 `close-icon` 属性自定义图标。
```html
<l-popup v-model"showTop" :closeable="true">
<view style="padding: 100px;"></view>
</l-popup>
```
### 监听点击事件
Popup 支持以下点击事件：
- `click-overlay`: 点击遮罩层时触发。
- `click-close`: 点击关闭图标时触发。
```html
<button @click="show = true">展示弹出层</button>
<l-popup
v-model"show"
position="bottom"
:closeable="true"
@click-overlay="onClickOverlay"
@click-close="onClickClose"
/>
```
```js
const onClickOverlay = () => {
console.log('click-overlay');
};
const onClickClose = () => {
console.log('click-close');
};
```
### 监听显示事件
当 Popup 被打开或关闭时，会触发以下事件：
- `open`: 打开弹出层时立即触发。
- `opened`: 打开弹出层且动画结束后触发。
- `close`: 关闭弹出层时立即触发。
- `closed`: 关闭弹出层且动画结束后触发。
```html
<button @click="show = true">展示弹出层</button>
<l-popup
v-model="show"
position="bottom"
@open="handlePopupOpen"
@opened="handlePopupOpened("
@close="handlePopupClose"
@closed="handlePopupClosed"
/>
```
```js
const show = ref(false);
const handlePopupOpen = () => {
// 处理弹出框打开前的逻辑
}
const handlePopupOpened = () => {
// 处理弹出框打开后的逻辑
}
const handlePopupClose = () => {
// 处理弹出框关闭前的逻辑
}
const handlePopupClosed = () => {
// 处理弹出框关闭后的逻辑
}
```
## 快速预览
导入插件后，可以直接使用以下标签查看演示效果：
```html
<!-- 代码位于 uni_modules/lime-popup/components/lime-popup -->
<lime-popup />
```
## 插件标签说明
- `l-popup`: 组件标签，用于实际开发中
- `lime-popup`: 演示标签，用于查看示例效果
## Vue2使用说明
本插件使用了`composition-api`，如需在Vue2项目中使用，请按照[官方教程](https://uniapp.dcloud.net.cn/tutorial/vue-composition-api.html)配置。
关键配置代码（在main.js中添加）：
```js
// vue2
import Vue from 'vue'
import VueCompositionAPI from '@vue/composition-api'
Vue.use(VueCompositionAPI)
```
## API文档
### Props
| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| v-model | 是否显示弹出层 | _boolean_ | `false` |
| visible | 是否显示弹出层 | _boolean_ | `false` |
| overlay | 是否显示遮罩层 | _boolean_ | `true` |
| position | 弹出位置，可选值为 `top` `bottom` `right` `left` | _string_ | `center` |
| position | 弹出层内容区的动画名 | _string_ | `` |
| transitionName | 动画时长，单位毫秒，设置为 0 可以禁用动画 | _number_ | `300` |
| z-index | 将弹窗的 z-index 层级设置为一个固定值 | _number_ | `999` |
| preventScrollThrough | 是否锁定背景滚动 | _boolean_ | `true` |
| closeOnClickOverlay | 是否在点击遮罩层后关闭 | _boolean_ | `true` |
| safeAreaInsetBottom | 适配底部安全区域 | _boolean_ | `true` |
| safeAreaInsetTop | 适配顶部安全区域 | _boolean_ | `true` |
| destroyOnClose | 关闭后是否销毁 | _boolean_ | `false` |
| closeable | 是否显示关闭图标 | _boolean_ | `false` |
| closeIcon | 关闭图标名称或图片链接，等同于 Icon 组件的 [name 属性](https://ext.dcloud.net.cn/plugin?id=14057) | _string_ | `cross` |
| bgColor | 背景色 | _string_ | `-` |
| iconColor | 图标色 | _string_ | `-` |
| lStyle | 自定义样式 | _string\|object_ | `-` |
| overlayStyle | 遮罩层自定义样式 | _string\|object_ | `-` |
| radius | 圆角，可以是字符，数值，数组 | _string\|number\|Array\<string\|number\>_ | `-` |
### Events
| 事件名 | 说明 | 回调参数 |
| ---------------- | -------------------------- | ------------------- |
| click-overlay | 点击遮罩层时触发 | - |
| click-close | 点击关闭图标时触发 | - |
| open | 打开弹出层时立即触发 | - |
| close | 关闭弹出层时立即触发 | - |
| opened | 打开弹出层且动画结束后触发 | - |
| closed | 关闭弹出层且动画结束后触发 | - |
### Slots
| 名称 | 说明 |
| --------------- | ------------ |
| default | 弹窗内容 |
| close-btn | 关闭按钮 |
## 主题定制
组件提供了下列 CSS 变量，可用于自定义样式。
| 名称 | 默认值 | 描述 |
| ------------------------------ | ------------------------------------ | ---- |
| `--l-popup-bg-color` | _#fff_ | 弹出层背景颜色 |
| `--l-popup-close-icon-color` | _rgba(0,0,0,0.6)_ | 关闭图标颜色 |
| `--l-popup-border-radius` | _$border-radius_ | 弹出层边框圆角 |
| `--l-overlay-bg-color` | `rgba(0, 0, 0, 0.6)` | 遮罩层的背景颜色和透明度 |
| `--l-overlay-blur` | `4px` | 遮罩层的模糊效果程度 |
## 支持与赞赏
如果你觉得本插件解决了你的问题，可以考虑支持作者：
| 支付宝赞助 | 微信赞助 |
|------------|------------|
| ![](https://testingcf.jsdelivr.net/gh/liangei/image@1.9/alipay.png) | ![](https://testingcf.jsdelivr.net/gh/liangei/image@1.9/wpay.png) |