优化
This commit is contained in:
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@@ -31,7 +31,17 @@
|
|||||||
<cl-action-sheet ref="actionSheetRef3"> </cl-action-sheet>
|
<cl-action-sheet ref="actionSheetRef3"> </cl-action-sheet>
|
||||||
<cl-action-sheet ref="actionSheetRef4"> </cl-action-sheet>
|
<cl-action-sheet ref="actionSheetRef4"> </cl-action-sheet>
|
||||||
<cl-action-sheet ref="actionSheetRef5"> </cl-action-sheet>
|
<cl-action-sheet ref="actionSheetRef5"> </cl-action-sheet>
|
||||||
<cl-action-sheet ref="actionSheetRef6">
|
<cl-action-sheet
|
||||||
|
ref="actionSheetRef6"
|
||||||
|
:pt="{
|
||||||
|
list: {
|
||||||
|
className: 'flex-row mx-[-10rpx]'
|
||||||
|
},
|
||||||
|
item: {
|
||||||
|
className: 'flex-1 mx-[10rpx]'
|
||||||
|
}
|
||||||
|
}"
|
||||||
|
>
|
||||||
<template #prepend>
|
<template #prepend>
|
||||||
<view class="px-3 mb-3">
|
<view class="px-3 mb-3">
|
||||||
<cl-text>开通会员享受更多特权和服务,包括无广告体验、专属客服等</cl-text>
|
<cl-text>开通会员享受更多特权和服务,包括无广告体验、专属客服等</cl-text>
|
||||||
@@ -39,9 +49,16 @@
|
|||||||
</template>
|
</template>
|
||||||
<template #append>
|
<template #append>
|
||||||
<view class="pb-5 pt-2 px-3">
|
<view class="pb-5 pt-2 px-3">
|
||||||
<cl-checkbox v-model="agree">
|
<cl-checkbox v-model="agree"
|
||||||
请阅读并同意《会员服务协议》和《隐私政策》
|
>请阅读并同意《会员服务协议》和《隐私政策》</cl-checkbox
|
||||||
</cl-checkbox>
|
>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<template #item="{ item }">
|
||||||
|
<view class="flex flex-col justify-center items-center">
|
||||||
|
<cl-icon :name="item.icon" :size="46"></cl-icon>
|
||||||
|
<cl-text :pt="{ className: '!text-sm mt-1' }">{{ item.label }}</cl-text>
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
</cl-action-sheet>
|
</cl-action-sheet>
|
||||||
@@ -75,7 +92,7 @@ function openActionSheet2() {
|
|||||||
list: [
|
list: [
|
||||||
{
|
{
|
||||||
label: t("反馈"),
|
label: t("反馈"),
|
||||||
icon: "feedback-line"
|
icon: "error-warning-line"
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
} as ClActionSheetOptions);
|
} as ClActionSheetOptions);
|
||||||
|
|||||||
@@ -39,8 +39,8 @@
|
|||||||
v-model="checked"
|
v-model="checked"
|
||||||
:loading="isLoading"
|
:loading="isLoading"
|
||||||
:disabled="isDisabled"
|
:disabled="isDisabled"
|
||||||
:height="isSize ? 30 : 24"
|
:height="isSize ? 60 : 48"
|
||||||
:width="isSize ? 50 : 40"
|
:width="isSize ? 100 : 80"
|
||||||
:pt="{
|
:pt="{
|
||||||
track: {
|
track: {
|
||||||
className: parseClass([[isCustom, '!rounded-md']])
|
className: parseClass([[isCustom, '!rounded-md']])
|
||||||
|
|||||||
@@ -18,7 +18,7 @@
|
|||||||
<text class="text-surface-400 text-md">{{ config.description }}</text>
|
<text class="text-surface-400 text-md">{{ config.description }}</text>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<view class="cl-action-sheet__list">
|
<view class="cl-action-sheet__list" :class="[pt.list?.className]">
|
||||||
<view
|
<view
|
||||||
class="cl-action-sheet__item"
|
class="cl-action-sheet__item"
|
||||||
:class="[`${isDark ? '!bg-surface-800' : 'bg-white'}`, pt.item?.className]"
|
:class="[`${isDark ? '!bg-surface-800' : 'bg-white'}`, pt.item?.className]"
|
||||||
@@ -76,6 +76,7 @@ const props = defineProps({
|
|||||||
type PassThrough = {
|
type PassThrough = {
|
||||||
className?: string; // 根元素类名
|
className?: string; // 根元素类名
|
||||||
item?: PassThroughProps; // 列表项样式
|
item?: PassThroughProps; // 列表项样式
|
||||||
|
list?: PassThroughProps; // 列表样式
|
||||||
};
|
};
|
||||||
|
|
||||||
// 解析透传样式配置
|
// 解析透传样式配置
|
||||||
|
|||||||
@@ -3,6 +3,7 @@ import type { ClActionSheetItem, ClActionSheetOptions, PassThroughProps } from "
|
|||||||
export type ClActionSheetPassThrough = {
|
export type ClActionSheetPassThrough = {
|
||||||
className?: string;
|
className?: string;
|
||||||
item?: PassThroughProps;
|
item?: PassThroughProps;
|
||||||
|
list?: PassThroughProps;
|
||||||
};
|
};
|
||||||
|
|
||||||
export type ClActionSheetProps = {
|
export type ClActionSheetProps = {
|
||||||
|
|||||||
@@ -15,7 +15,4 @@ export type ClSignProps = {
|
|||||||
maxStrokeWidth?: number;
|
maxStrokeWidth?: number;
|
||||||
velocitySensitivity?: number;
|
velocitySensitivity?: number;
|
||||||
autoRotate?: boolean;
|
autoRotate?: boolean;
|
||||||
landscapeWidthRatio?: number;
|
|
||||||
landscapeHeightRatio?: number;
|
|
||||||
fullscreen?: boolean;
|
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -17,5 +17,6 @@ export type ClSliderProps = {
|
|||||||
step?: number;
|
step?: number;
|
||||||
disabled?: boolean;
|
disabled?: boolean;
|
||||||
blockSize?: number;
|
blockSize?: number;
|
||||||
|
trackHeight?: number;
|
||||||
showValue?: boolean;
|
showValue?: boolean;
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -37,7 +37,7 @@
|
|||||||
>
|
>
|
||||||
<cl-loading
|
<cl-loading
|
||||||
v-if="loading"
|
v-if="loading"
|
||||||
size="12px"
|
:size="24"
|
||||||
color="primary"
|
color="primary"
|
||||||
:pt="{
|
:pt="{
|
||||||
className: parseClass([pt.loading?.className])
|
className: parseClass([pt.loading?.className])
|
||||||
@@ -83,12 +83,12 @@ const props = defineProps({
|
|||||||
// 高度
|
// 高度
|
||||||
height: {
|
height: {
|
||||||
type: Number,
|
type: Number,
|
||||||
default: 24
|
default: 48
|
||||||
},
|
},
|
||||||
// 宽度
|
// 宽度
|
||||||
width: {
|
width: {
|
||||||
type: Number,
|
type: Number,
|
||||||
default: 40
|
default: 80
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
@@ -126,19 +126,19 @@ const rect = computed<Rect>(() => {
|
|||||||
const height = props.height;
|
const height = props.height;
|
||||||
// 获取开关轨道宽度
|
// 获取开关轨道宽度
|
||||||
const width = props.width;
|
const width = props.width;
|
||||||
// 计算圆形按钮尺寸,比轨道高度小4px
|
// 计算圆形按钮尺寸,比轨道高度小8rpx
|
||||||
const size = height - 4;
|
const size = height - 8;
|
||||||
// 设置圆形按钮初始位置,距离左侧2px
|
// 设置圆形按钮初始位置,距离左侧px
|
||||||
const left = 2;
|
const left = 4;
|
||||||
// 计算圆形按钮移动距离,为轨道宽度减去轨道高度
|
// 计算圆形按钮移动距离,为轨道宽度减去轨道高度
|
||||||
const translateX = width - height;
|
const translateX = width - height;
|
||||||
|
|
||||||
return {
|
return {
|
||||||
height: height + "px",
|
height: height + "rpx",
|
||||||
width: width + "px",
|
width: width + "rpx",
|
||||||
size: size + "px",
|
size: size + "rpx",
|
||||||
left: left + "px",
|
left: left + "rpx",
|
||||||
translateX: translateX + "px"
|
translateX: translateX + "rpx"
|
||||||
};
|
};
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user