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