This commit is contained in:
icssoa
2025-07-29 22:30:23 +08:00
parent bb4caddc0b
commit c0b5305daa
8 changed files with 46 additions and 42 deletions

View File

@@ -409,10 +409,10 @@ const loadingIcon = computed<ClLoadingProps>(() => {
// 按钮样式
const buttonStyle = computed(() => {
const style = new Map<string, string>();
const style = {};
if (props.color != "") {
style.set("border-color", props.color);
style["border-color"] = props.color;
}
return style;

View File

@@ -104,7 +104,7 @@ const dragState = reactive<DragState>({
* 根据当前位置和拖拽状态计算组件的CSS样式
*/
const viewStyle = computed(() => {
const style = new Map<string, any>();
const style = {};
// 额外的底部偏移
let bottomOffset = 0;
@@ -115,19 +115,19 @@ const viewStyle = computed(() => {
}
// 设置水平位置
style.set("left", `${position.x}px`);
style["left"] = `${position.x}px`;
// 设置垂直位置(从底部计算)
style.set("bottom", `${bottomOffset + position.y}px`);
style["bottom"] = `${bottomOffset + position.y}px`;
// 设置z-index
style.set("z-index", props.zIndex);
style["z-index"] = props.zIndex;
// 设置尺寸
style.set("width", `${props.size}px`);
style["width"] = `${props.size}px`;
// 设置高度
style.set("height", `${props.size}px`);
style["height"] = `${props.size}px`;
// 非拖拽状态下添加过渡动画,使移动更平滑
if (!position.isDragging) {
style.set("transition-duration", "300ms");
style["transition-duration"] = "300ms";
}
return style;

View File

@@ -120,17 +120,17 @@ const icon = computed<Icon>(() => {
// 图标样式
const iconStyle = computed(() => {
const style = new Map<string, string>();
const style = {};
if (props.color != "") {
style.set("color", props.color);
style["color"] = props.color;
}
style.set("fontFamily", icon.value.font);
style.set("fontSize", parseRpx(props.size!));
style.set("height", parseRpx(props.height ?? props.size!));
style.set("width", parseRpx(props.width ?? props.size!));
style.set("lineHeight", parseRpx(props.size!));
style["fontFamily"] = icon.value.font;
style["fontSize"] = parseRpx(props.size!);
style["height"] = parseRpx(props.height ?? props.size!);
style["width"] = parseRpx(props.width ?? props.size!);
style["lineHeight"] = parseRpx(props.size!);
return style;
});

View File

@@ -123,14 +123,14 @@ const list = computed<string[]>(() => {
// 滚动容器样式,动态计算滚动动画相关样式
const scrollerStyle = computed(() => {
const style = new Map<string, string>();
const style = {};
if (props.direction == "horizontal") {
style.set("left", `${scroll.left}px`);
style.set("transform", `translateX(-${scroll.translateX}px)`);
style.set("transition-duration", `${scroll.duration}ms`);
style["left"] = `${scroll.left}px`;
style["transform"] = `translateX(-${scroll.translateX}px)`;
style["transition-duration"] = `${scroll.duration}ms`;
} else {
style.set("transform", `translateY(${scroll.top}px)`);
style["transform"] = `translateY(${scroll.top}px)`;
}
return style;

View File

@@ -408,14 +408,15 @@ function onTouchEnd() {
* 根据滑动状态动态设置transform属性实现位移动画
*/
const popupStyle = computed(() => {
const style = new Map<string, string>();
const style = {};
// 基础样式
style.set("height", height.value);
style.set("width", width.value);
style["height"] = height.value;
style["width"] = width.value;
// 处于触摸状态时添加位移效果
if (swipe.isTouch) {
style.set("transform", `translateY(${swipe.offsetY}px)`);
style["transform"] = `translateY(${swipe.offsetY}px)`;
}
return style;

View File

@@ -94,12 +94,12 @@ const width = ref(0);
// 外层样式
const outerStyle = computed(() => {
const style = new Map<string, string>();
const style = {};
style.set("height", parseRpx(props.strokeWidth));
style["height"] = parseRpx(props.strokeWidth);
if (props.unColor != null) {
style.set("backgroundColor", props.unColor!);
style["backgroundColor"] = props.unColor!;
}
return style;
@@ -107,11 +107,12 @@ const outerStyle = computed(() => {
// 内层样式
const innerStyle = computed(() => {
const style = new Map<string, string>();
style.set("width", `${(value.value / 100) * width.value}px`);
const style = {};
style["width"] = `${(value.value / 100) * width.value}px`;
if (props.color != null) {
style.set("backgroundColor", props.color!);
style["backgroundColor"] = props.color!;
}
return style;

View File

@@ -253,13 +253,14 @@ const itemRects = ref<ItemRect[]>([]);
// 计算下划线样式
const lineStyle = computed(() => {
const style = new Map<string, string>();
style.set("transform", `translateX(${lineLeft.value}px)`);
const style = {};
style["transform"] = `translateX(${lineLeft.value}px)`;
// 获取选中颜色
const bgColor = getColor(true);
if (bgColor != null) {
style.set("backgroundColor", bgColor);
style["backgroundColor"] = bgColor;
}
return style;
@@ -267,14 +268,15 @@ const lineStyle = computed(() => {
// 计算滑块样式
const sliderStyle = computed(() => {
const style = new Map<string, string>();
style.set("transform", `translateX(${sliderLeft.value}px)`);
style.set("width", sliderWidth.value + "px");
const style = {};
style["transform"] = `translateX(${sliderLeft.value}px)`;
style["width"] = sliderWidth.value + "px";
// 获取选中颜色
const bgColor = getColor(true);
if (bgColor != null) {
style.set("backgroundColor", bgColor);
style["backgroundColor"] = bgColor;
}
return style;
@@ -282,12 +284,12 @@ const sliderStyle = computed(() => {
// 获取文本样式
function getTextStyle(item: Item) {
const style = new Map<string, string>();
const style = {};
// 获取选中颜色
const color = getColor(item.isActive);
if (color != null) {
style.set("color", color);
style["color"] = color;
}
return style;

View File

@@ -156,10 +156,10 @@ const pt = computed(() => parsePt<PassThrough>(props.pt));
// 文本样式
const textStyle = computed(() => {
const style = new Map<string, string>();
const style = {};
if (props.color != "") {
style.set("color", props.color);
style["color"] = props.color;
}
return style;