NCZY/WAI_Project_UNIX
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

兼容 ios 样式

Browse Source
This commit is contained in:
icssoa
2025-09-03 19:03:39 +08:00
parent 0f2eea7b03
commit 7791c47483
18 changed files with 168 additions and 139 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
uni_modules/cool-ui/components/cl-action-sheet/cl-action-sheet.uvue
View File

@@ -30,7 +30,7 @@
v-for="(item, index) in config.list"
:key="index"
:hover-class="`${isDark ? '!bg-surface-900' : '!bg-surface-50'}`"
:hover-stay-time="100"
:hover-stay-time="250"
@tap="onItemTap(item)"
>
<slot name="item" :item="item">

2
uni_modules/cool-ui/components/cl-badge/cl-badge.uvue
View File

@@ -17,7 +17,7 @@
>
<cl-text
:pt="{
className: parseClass(['cl-badge__text !text-white !text-sm', pt.text?.className])
className: parseClass(['cl-badge__text !text-white !text-xs', pt.text?.className])
}"
v-if="!dot"
>

3
uni_modules/cool-ui/components/cl-col/cl-col.uvue
View File

@@ -74,8 +74,7 @@ const padding = computed(() => (parent == null ? "0" : parseRpx(parent.gutter /
@use "sass:math";
.cl-col {
@apply w-full;
overflow: visible;
@apply w-full overflow-visible;
}
@for $i from 1 through 24 {

15
uni_modules/cool-ui/components/cl-float-view/cl-float-view.uvue
View File

@@ -1,6 +1,9 @@
<template>
<view
class="cl-float-view"
:class="{
'no-dragging': !position.isDragging
}"
:style="viewStyle"
@touchstart="onTouchStart"
@touchmove.stop.prevent="onTouchMove"
@@ -126,11 +129,6 @@ const viewStyle = computed(() => {
// 设置高度
style["height"] = `${props.size}px`;
// 非拖拽状态下添加过渡动画，使移动更平滑
if (!position.isDragging) {
style["transition-duration"] = "300ms";
}
return style;
});
@@ -279,6 +277,11 @@ function onTouchEnd() {
<style lang="scss" scoped>
.cl-float-view {
@apply fixed;
@apply fixed transition-none;
&.no-dragging {
@apply duration-300;
transition-property: left, bottom;
}
}
</style>

4
uni_modules/cool-ui/components/cl-input-number/cl-input-number.uvue
View File

@@ -18,7 +18,7 @@
pt.op?.minus?.className
]"
hover-class="!bg-surface-200"
:hover-stay-time="50"
:hover-stay-time="250"
:style="{
height: parseRpx(size!),
width: parseRpx(size!)
@@ -66,7 +66,7 @@
pt.op?.plus?.className
]"
hover-class="!bg-primary-600"
:hover-stay-time="50"
:hover-stay-time="250"
:style="{
height: parseRpx(size!),
width: parseRpx(size!)

2
uni_modules/cool-ui/components/cl-keyboard-car/cl-keyboard-car.uvue
View File

@@ -64,7 +64,7 @@
marginRight: index == row.length - 1 ? '0' : '10rpx'
}"
hover-class="opacity-50"
:hover-stay-time="50"
:hover-stay-time="250"
@touchstart.stop="onCommand(item)"
>
<slot name="item" :item="item">

157
uni_modules/cool-ui/components/cl-keyboard-number/cl-keyboard-number.uvue
View File

@@ -42,49 +42,89 @@
<view class="cl-keyboard-number__list">
<cl-row :gutter="10">
<cl-col :span="6" v-for="item in list" :key="item">
<view
class="cl-keyboard-number__item"
:class="[
`is-keycode-${item}`,
{
'is-dark': isDark,
'is-empty': item == ''
},
pt.item?.className
]"
hover-class="opacity-50"
:hover-stay-time="50"
@touchstart.stop="onCommand(item)"
>
<slot name="item" :item="item">
<cl-col :span="18">
<cl-row :gutter="10">
<cl-col :span="8" v-for="item in list" :key="item">
<view
class="cl-keyboard-number__item"
:class="[
`is-keycode-${item}`,
{
'is-dark': isDark,
'is-empty': item == ''
},
pt.item?.className
]"
hover-class="opacity-50"
:hover-stay-time="250"
@touchstart.stop="onCommand(item)"
>
<slot name="item" :item="item">
<cl-icon
v-if="item == 'delete'"
name="delete-back-2-line"
:size="36"
></cl-icon>
<view
v-else-if="item == 'confirm'"
class="cl-keyboard-number__item-confirm"
>
<cl-text
color="white"
:pt="{
className: '!text-lg'
}"
>{{ confirmText }}</cl-text
>
</view>
<view v-else-if="item == '_confirm'"></view>
<cl-text
v-else
:pt="{
className: '!text-lg'
}"
>{{ item }}</cl-text
>
</slot>
</view>
</cl-col>
</cl-row>
</cl-col>
<cl-col :span="6">
<view class="cl-keyboard-number__op">
<view
v-for="item in opList"
:key="item"
class="cl-keyboard-number__item"
:class="[
{
'is-dark': isDark
},
`is-keycode-${item}`
]"
hover-class="opacity-50"
:hover-stay-time="250"
@touchstart.stop="onCommand(item)"
>
<cl-icon
v-if="item == 'delete'"
name="delete-back-2-line"
:size="36"
></cl-icon>
<view
v-else-if="item == 'confirm'"
class="cl-keyboard-number__item-confirm"
>
<cl-text
color="white"
:pt="{
className: '!text-lg'
}"
>{{ confirmText }}</cl-text
>
</view>
<cl-text
v-else
v-if="item == 'confirm'"
color="white"
:pt="{
className: '!text-lg'
}"
>{{ item }}</cl-text
>{{ confirmText }}</cl-text
>
</slot>
</view>
</view>
</cl-col>
</cl-row>
@@ -99,7 +139,7 @@ import type { PassThroughProps } from "../../types";
import type { ClPopupProps } from "../cl-popup/props";
import { ref, computed, watch, type PropType } from "vue";
import { $t, t } from "@/locale";
import { isDark, parseClass, parsePt } from "@/cool";
import { isAppIOS, isDark, parseClass, parsePt } from "@/cool";
import { vibrate } from "@/uni_modules/cool-vibrate";
defineOptions({
@@ -193,38 +233,26 @@ const maxlength = computed(() => {
// 数字键盘的按键列表，包含数字、删除、00和小数点
const list = computed(() => {
const arr = [
"1",
"2",
"3",
"delete",
"4",
"5",
"6",
"",
"7",
"8",
"9",
"",
"00",
"0",
"",
"confirm"
];
const arr = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "00", "0", ""];
// 数字键盘显示为小数点 "."
if (props.type == "digit") {
arr[14] = ".";
arr[11] = ".";
}
// 身份证键盘显示为 "X"
if (props.type == "idcard") {
arr[14] = "X";
arr[11] = "X";
}
return arr;
});
// 操作按钮列表
const opList = computed(() => {
return ["delete", "confirm"];
});
// 打开键盘弹窗
function open() {
visible.value = true;
@@ -238,10 +266,12 @@ function close() {
// 处理键盘按键点击事件
function onCommand(key: string) {
// 震动
vibrate(1);
try {
vibrate(1);
} catch (error) {}
// 确认按钮逻辑
if (key == "confirm") {
if (key == "confirm" || key == "_confirm") {
if (value.value == "") {
ui.showToast({
message: t("请输入内容")
@@ -364,14 +394,17 @@ defineExpose({
}
&__list {
@apply relative;
@apply relative overflow-visible;
}
&__op {
@apply flex flex-col h-full;
}
&__item {
@apply flex items-center justify-center rounded-xl bg-white;
@apply flex items-center justify-center rounded-xl bg-white overflow-visible;
height: 100rpx;
margin-top: 10rpx;
overflow: visible;
&.is-dark {
@apply bg-surface-800;
@@ -386,14 +419,8 @@ defineExpose({
}
&.is-keycode-confirm {
@apply bg-transparent relative;
}
&-confirm {
@apply flex flex-col items-center justify-center;
@apply bg-primary-500 absolute w-full rounded-xl;
height: 320rpx;
top: -220rpx;
@apply bg-primary-500 rounded-xl flex-1;
}
&.is-empty {

2
uni_modules/cool-ui/components/cl-keyboard-password/cl-keyboard-password.uvue
View File

@@ -63,7 +63,7 @@
marginRight: index == row.length - 1 ? '0' : '10rpx'
}"
hover-class="opacity-50"
:hover-stay-time="50"
:hover-stay-time="250"
@touchstart.stop="onCommand(item)"
>
<slot name="item" :item="item">

4
uni_modules/cool-ui/components/cl-list-item/cl-list-item.uvue
View File

@@ -109,7 +109,7 @@ import {
useSlots,
type PropType
} from "vue";
import { isDark, isHarmony, parseClass, parsePt } from "@/cool";
import { isAppIOS, isDark, isHarmony, parseClass, parsePt } from "@/cool";
import type { Justify, PassThroughProps } from "../../types";
import type { ClIconProps } from "../cl-icon/props";
@@ -388,7 +388,7 @@ onMounted(() => {
() => {
initSwipe();
},
isHarmony() ? 50 : 0
isHarmony() || isAppIOS() ? 50 : 0
);
});

6
uni_modules/cool-ui/components/cl-picker-view/cl-picker-view.uvue
View File

@@ -56,7 +56,7 @@
</template>
<script setup lang="ts">
import { forInObject, isDark, isEqual, isNull, parseClass, rpx2px } from "@/cool";
import { forInObject, isAppIOS, isDark, isEqual, isNull, parseClass, rpx2px } from "@/cool";
import type { ClSelectOption } from "../../types";
import { parseRpx } from "@/cool";
import { computed } from "vue";
@@ -107,6 +107,10 @@ const headers = computed(() => {
// 遮罩层样式
const maskStyle = computed(() => {
if (isDark.value) {
if(isAppIOS()) {
return `background-color: rgba(0, 0, 0, 0);`
}
return `background-image: linear-gradient(
180deg,
rgba(0, 0, 0, 0),

4
uni_modules/cool-ui/components/cl-qrcode/cl-qrcode.uvue
View File

@@ -24,7 +24,7 @@ import {
} from "vue";
import { drawQrcode, type QrcodeOptions } from "./draw";
import { canvasToPng, getPx, isHarmony, uuid } from "@/cool";
import { canvasToPng, getPx, isAppIOS, isHarmony, uuid } from "@/cool";
import type { ClQrcodeMode } from "../../types";
defineOptions({
@@ -168,7 +168,7 @@ onMounted(() => {
() => {
drawer();
},
isHarmony() ? 50 : 0
isHarmony() || isAppIOS() ? 50 : 0
);
});

2
uni_modules/cool-ui/components/cl-row/cl-row.uvue
View File

@@ -53,6 +53,6 @@ defineExpose({
<style lang="scss" scoped>
.cl-row {
@apply flex flex-row flex-wrap relative;
@apply flex flex-row flex-wrap relative overflow-visible;
}
</style>

20
uni_modules/cool-ui/components/cl-safe-area/cl-safe-area.uvue
View File

@@ -1,9 +1,9 @@
<template>
<view
class="cl-safe-area"
:class="[{ 'is-dark': isDark }, pt.className]"
:class="[pt.className]"
:style="{
height: height + 'px'
height
}"
>
<slot></slot>
@@ -11,7 +11,7 @@
</template>
<script setup lang="ts">
import { getSafeAreaHeight, isDark, parsePt } from "@/cool";
import { getSafeAreaHeight, parsePt } from "@/cool";
import { computed, type PropType } from "vue";
defineOptions({
@@ -26,6 +26,10 @@ const props = defineProps({
type: {
type: String as PropType<"top" | "bottom">,
default: "top"
},
transparent: {
type: Boolean,
default: false
}
});
@@ -40,13 +44,3 @@ const height = computed(() => {
return getSafeAreaHeight(props.type) + "px";
});
</script>
<style lang="scss" scoped>
.cl-safe-area {
@apply bg-white;
&.is-dark {
@apply bg-surface-900;
}
}
</style>

5
uni_modules/cool-ui/components/cl-sign/cl-sign.uvue
View File

@@ -317,14 +317,15 @@ function initCanvas() {
}
onMounted(() => {
initCanvas();
watch(
computed(() => [props.width, props.height]),
() => {
nextTick(() => {
initCanvas();
});
},
{
immediate: true
}
);
});

23
uni_modules/cool-ui/components/cl-slide-verify/cl-slide-verify.uvue
View File

@@ -45,7 +45,8 @@
:class="[
{
'cl-slide-verify__progress--success': isSuccess,
'cl-slide-verify__progress--fail': isFail
'cl-slide-verify__progress--fail': isFail,
'no-dragging': !isDragging
},
pt.progress?.className
]"
@@ -60,7 +61,8 @@
'cl-slide-verify__slider--active': isDragging,
'cl-slide-verify__slider--success': isSuccess,
'cl-slide-verify__slider--fail': isFail,
'cl-slide-verify__slider--dark': isDark
'cl-slide-verify__slider--dark': isDark,
'no-dragging': !isDragging
},
pt.slider?.className
]"
@@ -268,10 +270,6 @@ const progressStyle = computed(() => {
width += props.size / 2;
}
style["width"] = width + "px"; // 设置宽度
if (!isDragging.value) {
// 非拖动时添加过渡动画
style["transition-duration"] = "300ms";
}
return style; // 返回样式对象
});
@@ -282,10 +280,6 @@ const sliderStyle = computed(() => {
height: props.size + "px", // 滑块高度
width: props.size + "px" // 滑块宽度
};
if (!isDragging.value) {
// 非拖动时添加过渡动画
style["transition-duration"] = "300ms";
}
return style; // 返回样式对象
});
@@ -423,6 +417,11 @@ defineExpose({
.cl-slide-verify {
@apply relative rounded-lg w-full flex flex-col items-center justify-center;
.no-dragging {
@apply duration-300;
transition-property: left;
}
&__track {
@apply relative w-full h-full;
@apply bg-surface-100 rounded-lg;
@@ -445,7 +444,7 @@ defineExpose({
}
&__progress {
@apply absolute left-0 top-0 h-full;
@apply absolute left-0 top-0 h-full transition-none;
@apply bg-primary-100;
&--success {
@@ -458,7 +457,7 @@ defineExpose({
}
&__slider {
@apply absolute top-1/2 left-0 z-20;
@apply absolute top-1/2 left-0 z-20 transition-none;
@apply bg-white rounded-lg;
@apply flex items-center justify-center;
@apply border border-surface-200;

47
uni_modules/cool-ui/components/cl-slider/cl-slider.uvue
View File

@@ -26,30 +26,30 @@
:class="[pt.progress?.className]"
:style="progressStyle"
></view>
<!-- 单滑块模式 -->
<view
v-if="!range"
class="cl-slider__thumb"
:class="[pt.thumb?.className]"
:style="singleThumbStyle"
></view>
<!-- 双滑块模式 -->
<template v-if="range">
<view
class="cl-slider__thumb cl-slider__thumb--min"
:class="[pt.thumb?.className]"
:style="minThumbStyle"
></view>
<view
class="cl-slider__thumb cl-slider__thumb--max"
:class="[pt.thumb?.className]"
:style="maxThumbStyle"
></view>
</template>
</view>
<!-- 单滑块模式 -->
<view
v-if="!range"
class="cl-slider__thumb"
:class="[pt.thumb?.className]"
:style="singleThumbStyle"
></view>
<!-- 双滑块模式 -->
<template v-if="range">
<view
class="cl-slider__thumb cl-slider__thumb--min"
:class="[pt.thumb?.className]"
:style="minThumbStyle"
></view>
<view
class="cl-slider__thumb cl-slider__thumb--max"
:class="[pt.thumb?.className]"
:style="maxThumbStyle"
></view>
</template>
<view
class="cl-slider__picker"
:style="{
@@ -531,9 +531,8 @@ onMounted(() => {
}
&__thumb {
@apply absolute top-1/2 rounded-full border border-solid border-white;
@apply absolute rounded-full border border-solid border-white;
@apply bg-primary-500;
transform: translateY(-50%);
pointer-events: none;
z-index: 1;
border-width: 4rpx;

4
uni_modules/cool-ui/components/cl-switch/cl-switch.uvue
View File

@@ -50,7 +50,7 @@
<script lang="ts" setup>
import { computed, ref, watch } from "vue";
import { isDark, parseClass, parsePt, rpx2px } from "@/cool";
import { isAppIOS, isDark, parseClass, parsePt, rpx2px } from "@/cool";
import type { PassThroughProps } from "../../types";
import { vibrate } from "@/uni_modules/cool-vibrate";
import { useForm } from "../../hooks";
@@ -145,7 +145,7 @@ const rect = computed<Rect>(() => {
width: width + "rpx",
size: size + "rpx",
left: left + "rpx",
translateX: rpx2px(translateX) + "px"
translateX: isAppIOS() ? rpx2px(translateX) + "px" : `${translateX}rpx`
};
});

5
uni_modules/cool-ui/components/cl-tree-item/cl-tree-item.uvue
View File

@@ -6,7 +6,10 @@
{
'is-expand': hover,
'is-dark': isDark,
'is-checked': item.isChecked == true && ClTree?.checkable == true,
'is-checked':
item.isChecked == true &&
ClTree?.checkable == true &&
ClTree?.multiple == false,
'is-half-checked': item.isHalfChecked,
'is-disabled': item.disabled,
'is-multiple': ClTree?.multiple