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

24
scoring/uni_modules/lime-overlay/changelog.md Normal file
View File

@@ -0,0 +1,24 @@
## 0.1.3（2025-10-15）
- fix: 去掉版本判断
## 0.1.2（2025-08-13）
- fix: 修复uniappx type 类型问题
## 0.1.1（2025-08-13）
- fix: 修复uniapp type 类型问题
## 0.1.0（2025-04-22）
- feat: 兼容uniappx 鸿蒙next
## 0.0.8（2025-01-13）
- feat: 增加阻止事件冒泡
## 0.0.7（2025-01-13）
- fix: uniapp x ios 不显示问题
## 0.0.6（2024-11-26）
- feat: z-index改到998
## 0.0.5（2024-11-14）
- fix: css transition-duration问题
## 0.0.4（2024-11-13）
- chore: 更新文档
## 0.0.3（2024-11-03）
- feat: z-index降到887
## 0.0.2（2024-10-24）
- chore: 兼容vue2
## 0.0.1（2024-10-24）
- init

40
scoring/uni_modules/lime-overlay/components/l-overlay/index.scss Normal file
View File

@@ -0,0 +1,40 @@
@import '~@/uni_modules/lime-style/index.scss';
$use-css-var: true;
$overlay: #{$prefix}-overlay;
$overlay-bg-color: create-var(overlay-bg-color, $bg-color-mask);
$overlay-z-index: create-var(overlay-z-index, 998);
$overlay-transition-duration: create-var(overlay-transition-duration, 300ms);
/* #ifndef UNI-APP-X && APP */
$overlay-blur: blur(create-var(overlay-blur, 4px));
/* #endif */
.#{$overlay}{
position: fixed;
top: 0;
left: 0;
width: 100%;
bottom: 0;
background-color: $overlay-bg-color;
transition-property: opacity;
transition-timing-function: ease;
z-index: $overlay-z-index;
opacity: 1; // uniapp x ios 必须要设置
/* #ifndef UNI-APP-X && APP */
backdrop-filter: $overlay-blur;
transition-duration: $overlay-transition-duration;
/* #endif */
/* #ifdef UNI-APP-X && APP */
transition-duration: 300ms;//$overlay-transition-duration;
/* #endif */
}
.l-fade-enter {
opacity: 0;
}
.l-fade-leave-to {
opacity: 0;
}

103
scoring/uni_modules/lime-overlay/components/l-overlay/l-overlay.uvue Normal file
View File

@@ -0,0 +1,103 @@
<template>
<view v-if="inited"
class="l-overlay"
ref="overlayRef"
:class="[lClass, classes]"
:style="[styles, lStyle]"
@click.stop="onClick"
@touchmove.stop="noop"
@transitionend="finished"
:aria-role="ariaRole"
:aria-label="ariaLabel">
<slot></slot>
</view>
</template>
<script lang="uts" setup>
/**
* Overlay 遮罩层组件
* @description 用于创建模态遮罩层，通常配合弹窗、对话框等组件使用
* <br>插件类型：LOverlayComponentPublicInstance
* @tutorial https://ext.dcloud.net.cn/plugin?name=lime-overlay
*
* @property {string} ariaLabel 无障碍访问标签（需语义化描述作用）
* @property {string} ariaRole ARIA角色属性（默认：'presentation'）
* @property {string} lClass 自定义类名（会覆盖默认样式）
* @property {string} bgColor 背景颜色（默认：'rgba(0, 0, 0, 0.7)'）
* @property {string} lStyle 自定义样式（最高优先级，支持CSS字符串）
* @property {number} duration 背景过渡动画时长（单位：ms，默认：300）
* @property {boolean} preventScrollThrough 阻止滚动穿透（默认：true）
* @property {boolean} visible 是否显示遮罩层（支持v-model）
* @property {number} zIndex 层级（默认：1000）
* @event {Function} click 点击遮罩层时触发（常用于关闭操作）
* @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 { OverlayProps } from './type';
// defineOptions({
// name:'l-overlay'
// })
const props = withDefaults(defineProps<OverlayProps>(), {
ariaLabel: '关闭',
ariaRole: 'button',
preventScrollThrough: true,
zIndex: 998,
visible: false,
duration: 300,
})
const emit = defineEmits(['click', 'before-enter', 'enter', 'after-enter', 'before-leave', 'leave', 'after-leave'])
const {inited, display, classes, finished} = useTransition({
defaultName: 'fade',
appear: props.visible,
emits: (name:TransitionEmitStatus) => { emit(name) },
visible: (): boolean => props.visible,
duration: props.duration,
} as UseTransitionOptions)
const styles = computed<Map<string,any>>(():Map<string,any> => {
const style = new Map<string,any>();
if (props.bgColor != null) {
style.set("background-color", props.bgColor!)
}
if (props.zIndex > 0) {
style.set("z-index", props.zIndex)
}
// #ifndef APP || WEB
style.set('transition-duration', props.duration + 'ms')
if (!display.value) {
style.set("display", "none")
}
// #endif
return style
})
const noop = () => {}
const onClick = (event: UniPointerEvent) =>{
// event.stopPropagation()
emit('click', !props.visible)
}
// #ifdef APP || WEB
const overlayRef = ref<UniElement|null>(null)
watchEffect(()=>{
overlayRef.value?.style.setProperty('transition-duration', `${props.duration}ms`)
if(!display.value){
overlayRef.value?.style.setProperty('display', "none")
} else {
overlayRef.value?.style.setProperty('display', "flex")
}
})
// #endif
</script>
<style lang="scss">
@import './index';
</style>

94
scoring/uni_modules/lime-overlay/components/l-overlay/l-overlay.vue Normal file
View File

@@ -0,0 +1,94 @@
<template>
<view
v-if="inited"
class="l-overlay"
:class="[lClass, classes]"
:style="[styles, lStyle]"
@click.stop="onClick"
@touchmove.stop="noop"
@transitionend="finished"
:aria-role="ariaRole || 'button'"
:aria-label="ariaLabel || '关闭'">
<slot></slot>
</view>
</template>
<script lang="ts">
// @ts-nocheck
/**
* Overlay 遮罩层组件
* @description 用于创建模态遮罩层，通常配合弹窗、对话框等组件使用
* <br>插件类型：LOverlayComponentPublicInstance
* @tutorial https://ext.dcloud.net.cn/plugin?name=lime-overlay
*
* @property {string} ariaLabel 无障碍访问标签（需语义化描述作用）
* @property {string} ariaRole ARIA角色属性（默认：'presentation'）
* @property {string} lClass 自定义类名（会覆盖默认样式）
* @property {string} bgColor 背景颜色（默认：'rgba(0, 0, 0, 0.7)'）
* @property {string} lStyle 自定义样式（最高优先级，支持CSS字符串）
* @property {number} duration 背景过渡动画时长（单位：ms，默认：300）
* @property {boolean} preventScrollThrough 阻止滚动穿透（默认：true）
* @property {boolean} visible 是否显示遮罩层（支持v-model）
* @property {number} zIndex 层级（默认：1000）
* @event {Function} click 点击遮罩层时触发（常用于关闭操作）
* @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 overlayProps from './props';
export default defineComponent({
props: overlayProps,
emits: ['click', 'before-enter', 'enter', 'after-enter', 'before-leave', 'leave', 'after-leave'],
options: {
addGlobalClass: true,
virtualHost: true,
externalClasses: true,
},
externalClasses: ['l-class'],
setup(props, { emit }) {
const {inited, display, classes, finished} = useTransition({
defaultName: 'fade',
appear: props.visible,
emits: (name:TransitionEmitStatus) => { emit(name) },
visible: (): boolean => props.visible,
duration: props.duration,
} as UseTransitionOptions)
const styles = computed(() => ({
'transition-duration': props.duration + 'ms',
'background': props.bgColor,
'z-index': props.zIndex,
'display': !display.value ? 'none' : '',
}))
const onClick = () => {
emit('click', !props.visible)
}
const noop = (e) => {
e?.preventDefault();
return
}
return {
inited,
styles,
classes,
noop,
onClick,
finished
}
}
})
</script>
<style lang="scss">
@import './index';
</style>

20
scoring/uni_modules/lime-overlay/components/l-overlay/props.ts Normal file
View File

@@ -0,0 +1,20 @@
export default {
visible: Boolean,
zIndex: {
type: Number,
default: 998,
},
duration: {
type: Number,
default: 300
},
preventScrollThrough: {
type: Boolean,
default: true
},
bgColor: String,
lStyle: [String, Object],
lClass: String,
ariaLabel: String,
ariaRole: String,
}

30
scoring/uni_modules/lime-overlay/components/l-overlay/type.ts Normal file
View File

@@ -0,0 +1,30 @@
// @ts-nocheck
export interface OverlayProps {
ariaLabel: string;
ariaRole: string;
lClass?: string;
/**
* 遮罩层的背景色
*/
bgColor ?: string;
/**
* 遮罩层自定义样式。优先级低于其他属性
*/
lStyle ?: string|UTSJSONObject;
/**
* 背景色过渡时间，单位毫秒
*/
duration : number;
/**
* 防止滚动穿透，即不允许点击和滚动
*/
preventScrollThrough : boolean;
/**
* 是否展示
*/
visible : boolean;
/**
* 遮罩的层级
*/
zIndex : number;
}

94
scoring/uni_modules/lime-overlay/components/lime-overlay/lime-overlay.uvue Normal file
View File

@@ -0,0 +1,94 @@
<template>
<view class="demo-block">
<text class="demo-block__title-text ultra">遮罩层</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 @click="onClick">显示</button>
<l-overlay :visible="show" @click="onClick"></l-overlay>
</view>
</view>
<view class="demo-block">
<text class="demo-block__title-text">嵌入内容</text>
<view class="demo-block__body">
<button @click="show2 = true">显示</button>
<l-overlay :visible="show2" @click="show2 = !show2">
<view class="wrapper">
<view class="block" />
</view>
</l-overlay>
</view>
</view>
</view>
</view>
</template>
<script lang="uts" setup>
const show = ref(false);
const show2 = ref(false);
const onClick = () => {
show.value = !show.value
}
</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);
.wrapper {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
}
.block {
width: 120px;
height: 120px;
background-color: $card-bg-color;
}
.demo-block {
margin: 32px 20px 0;
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>

98
scoring/uni_modules/lime-overlay/components/lime-overlay/lime-overlay.vue Normal file
View File

@@ -0,0 +1,98 @@
<template>
<view class="demo-block">
<text class="demo-block__title-text ultra">遮罩层</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 @click="onClick">显示</button>
<l-overlay :visible="show" @click="onClick"></l-overlay>
</view>
</view>
<view class="demo-block">
<text class="demo-block__title-text">嵌入内容</text>
<view class="demo-block__body">
<button @click="show2 = true">显示</button>
<l-overlay :visible="show2" @click="show2 = !show2">
<view class="wrapper">
<view class="block" />
</view>
</l-overlay>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
show: false,
show2: false,
}
},
methods:{
onClick(){
this.show = !this.show
console.log(`show`, this.show)
}
}
}
</script>
<style lang="scss">
.wrapper {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
}
.block {
width: 120px;
height: 120px;
background-color: #fff;
}
.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>

109
scoring/uni_modules/lime-overlay/package.json Normal file
View File

@@ -0,0 +1,109 @@
{
"id": "lime-overlay",
"displayName": "lime-overlay 遮罩层",
"version": "0.1.3",
"description": "lime-overlay 通过遮罩层，可以强调部分内容,兼容uniapp/uniappx",
"keywords": [
"lime-overlay",
"overlay",
"遮罩层"
],
"repository": "",
"engines": {
"HBuilderX": "^4.28",
"uni-app": "^4.52",
"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-transition"
],
"encrypt": [],
"platforms": {
"cloud": {
"tcb": "x",
"aliyun": "x",
"alipay": "x"
},
"client": {
"uni-app": {
"vue": {
"vue2": "√",
"vue3": "√"
},
"web": {
"safari": "√",
"chrome": "√"
},
"app": {
"vue": "√",
"nvue": "-",
"android": {
"extVersion": "",
"minVersion": "21"
},
"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": "21"
},
"ios": "√",
"harmony": "√"
},
"mp": {
"weixin": "√"
}
}
}
}
}
}

109
scoring/uni_modules/lime-overlay/readme - 副本.md Normal file
View File

@@ -0,0 +1,109 @@
# lime-overlay 遮罩层
- 通过遮罩层，可以强调部分内容
- 插件依赖`lime-style`,`lime-shared`,`lime-transition`,不喜勿下
> 插件依赖：`lime-style`、`lime-shared`、`lime-transition`
[overlay【站点1】](https://limex.qcoon.cn/components/overlay.html)
[overlay【站点2】](https://limeui.netlify.app/components/overlay.html)
[overlay【站点3】](https://limeui.familyzone.top/components/overlay.html)
## 安装
在插件市场导入即可，首次安装可能需要重新编译
## 代码演示
### 基础用法
```html
<button @click="onClick">显示</button>
<l-overlay :visible="show" @click="onClick"></l-overlay>
```
```js
const show = refl(lflalse);
const onClick = () => {
show.value = !show.value
}
```
### 嵌入内容
通过默认插槽可以在遮罩层上嵌入任意内容。
```html
<button @click="onClick">显示</button>
<l-overlay :visible="show" @click="onClick">
<view class="wrapper">
<view class="block" />
</view>
</l-overlay>
```
```js
const show = ref(false);
const onClick = () => {
show.value = !show.value
}
```
### 查看示例
- 导入后直接使用这个标签查看演示效果
```html
<!-- // 代码位于 uni_modules/lime-overlay/compoents/lime-overlay -->
<lime-overlay />
```
### 插件标签
- 默认 l-overlay 为 component
- 默认 lime-overlay 为 demo
### Vue2使用
- 插件使用了`composition-api`, 如果你希望在vue2中使用请按官方的教程[vue-composition-api](https://uniapp.dcloud.net.cn/tutorial/vue-composition-api.html)配置
- 关键代码是: 在main.js中 在vue2部分加上这一段即可
```js
// vue2
import Vue from 'vue'
import VueCompositionAPI from '@vue/composition-api'
Vue.use(VueCompositionAPI)
```
## API
### Props
| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| visible | 是否展示遮罩层 | _boolean_ | `false` |
| z-index | z-index 层级 | _number_ | `1000` |
| duration | 动画时长，单位ms，设置为 0 可以禁用动画 | _number_ | `300` |
| lStyle | 样式 | _string_ | `` |
| destoryOnClose | 隐藏时是否销毁 | _boolean_ | `false` |
### Events
| 事件名 | 说明 | 回调参数 |
| ------ | ---------- | ------------------- |
| click | 点击时触发 | _-_ |
### Slots
| 名称 | 说明 |
| ------- | ---------------------------------- |
| default | 默认插槽，用于在遮罩层上方嵌入内容 |
## 主题定制
### 样式变量
组件提供了下列 CSS 变量，可用于自定义样式，uvue app无效。
| 名称 | 默认值 | 描述 |
| ------------------------ | -------------------- | ---- |
| --l-overlay-z-index | _1000_ | - |
| --l-overlay-background | _rgba(0, 0, 0, 0.6)_ | - |
## 打赏
如果你觉得本插件，解决了你的问题，赠人玫瑰，手留余香。
![](https://testingcf.jsdelivr.net/gh/liangei/image@1.9/alipay.png)
![](https://testingcf.jsdelivr.net/gh/liangei/image@1.9/wpay.png)

110
scoring/uni_modules/lime-overlay/readme.md Normal file
View File

@@ -0,0 +1,110 @@
# lime-overlay 遮罩层
一个遮罩层组件，通过遮罩层可以强调部分内容，支持自定义内容和样式。
> 插件依赖：`lime-style`、`lime-shared`、`lime-transition`
## 文档链接
📚 组件详细文档请访问以下站点：
- [遮罩层文档 - 站点1](https://limex.qcoon.cn/components/overlay.html)
- [遮罩层文档 - 站点2](https://limeui.netlify.app/components/overlay.html)
- [遮罩层文档 - 站点3](https://limeui.familyzone.top/components/overlay.html)
## 安装方法
1. 在uni-app插件市场中搜索并导入`lime-overlay`
2. 首次导入可能需要重新编译
3. 在页面使用`l-overlay`(组件)
## 代码演示
### 基础用法
```html
<button @click="onClick">显示</button>
<l-overlay :visible="show" @click="onClick"></l-overlay>
```
```js
const show = refl(lflalse);
const onClick = () => {
show.value = !show.value
}
```
### 嵌入内容
通过默认插槽可以在遮罩层上嵌入任意内容。
```html
<button @click="onClick">显示</button>
<l-overlay :visible="show" @click="onClick">
<view class="wrapper">
<view class="block" />
</view>
</l-overlay>
```
```js
const show = ref(false);
const onClick = () => {
show.value = !show.value
}
```
## Vue2使用说明
在main.js中添加：
```js
// main.js
import Vue from 'vue'
import VueCompositionAPI from '@vue/composition-api'
Vue.use(VueCompositionAPI)
```
详细配置请参考官方文档：[Vue Composition API](https://uniapp.dcloud.net.cn/tutorial/vue-composition-api.html)
## 快速预览
导入插件后，可以直接使用以下标签查看演示效果：
```html
<!-- 代码位于 uni_modules/lime-overlay/components/lime-overlay -->
<lime-overlay />
```
## 插件标签说明
- `l-overlay`：遮罩层组件
- `lime-overlay`：演示标签
## API文档
### Props
| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| visible | 是否展示遮罩层 | boolean | `false` |
| z-index | z-index 层级 | number | `1000` |
| duration | 动画时长，单位ms，设置为 0 可以禁用动画 | number | `300` |
| lStyle | 自定义样式 | string | - |
| destoryOnClose | 隐藏时是否销毁 | boolean | `false` |
### Events
| 事件名 | 说明 | 回调参数 |
| --- | --- | --- |
| click | 点击遮罩层时触发 | - |
### Slots
| 名称 | 说明 |
| --- | --- |
| default | 默认插槽，用于在遮罩层上方嵌入内容 |
## 主题定制
组件提供了下列CSS变量，可用于自定义样式。
| 名称 | 默认值 | 描述 |
|------|--------|------|
| `--l-overlay-z-index` | `998` | 遮罩层的层级，控制显示在页面中的层级高度 |
| `--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) |