Skip to content

Commit

Permalink
优化复制图片逻辑
Browse files Browse the repository at this point in the history
  • Loading branch information
@baiy
baiy committed Aug 18, 2023
1 parent 660959c commit c41724c
Show file tree
Hide file tree
Showing 7 changed files with 645 additions and 570 deletions.
73 changes: 40 additions & 33 deletions packages/ctool-core/src/Tool.vue
View file
Original file line number Diff line number Diff line change
@@ -1,64 +1,72 @@
<template>
<Suspense>
<div class="ctool-global">
<SimpleHeader v-if="storeSetting.items.layout === `simple`"/>
<ComplexHeader v-else/>
<Content/>
<SimpleBottom v-if="storeSetting.items.layout === `simple`"/>
<ComplexBottom v-else/>
<SimpleHeader v-if="storeSetting.items.layout === `simple`" />
<ComplexHeader v-else />
<Content />
<SimpleBottom v-if="storeSetting.items.layout === `simple`" />
<ComplexBottom v-else />
</div>
</Suspense>
</template>

<script setup lang="ts">
import Content from '@/block/Content.vue'
import Content from "@/block/Content.vue";
import Message from "@/helper/message";
import SimpleHeader from "@/block/layout/simple/Header.vue";
import SimpleBottom from "@/block/layout/simple/Bottom.vue";
import ComplexHeader from "@/block/layout/complex/Header.vue";
import ComplexBottom from "@/block/layout/complex/Bottom.vue";
import useSetting, {useTheme} from "@/store/setting";
import {nextTick, onErrorCaptured, watch} from "vue";
import {isObject} from "lodash";
import useSetting, { useTheme } from "@/store/setting";
import { nextTick, onErrorCaptured, watch } from "vue";
import { isObject } from "lodash";
// 初始化配置
const storeSetting = useSetting()
const storeSetting = useSetting();
// 初始化主题
useTheme()
watch(() => {
return {
layout: storeSetting.items.layout
}
}, async () => {
await nextTick()
window.dispatchEvent(new Event('resize'));
})
useTheme();
watch(
() => {
return {
layout: storeSetting.items.layout,
};
},
async () => {
await nextTick();
window.dispatchEvent(new Event("resize"));
},
);
// 全局错误提示
const globalErrorMessage = (err) => {
console.log("error:", err)
const message: string = (isObject(err) && "message" in err ? err.message : err).toString()
Message.closeAll()
const globalErrorMessage = err => {
console.log("error:", err);
const message: string = (isObject(err) && "message" in err ? err.message : err).toString();
Message.closeAll();
if (message.includes("\n")) {
Message.error(`${message}`, {duration: 0})
Message.error(`${message}`, { duration: 0 });
} else {
Message.error(message, {duration: 5000})
Message.error(message, { duration: 5000 });
}
}
};
// Uncaught Promise Error
window.addEventListener("unhandledrejection", function (event) {
event.preventDefault();
globalErrorMessage(event.reason)
globalErrorMessage(event.reason);
});
// Uncaught Error
window.addEventListener("error", event => {
event.preventDefault();
globalErrorMessage(event.error);
});
onErrorCaptured((err) => {
globalErrorMessage(err)
return false
})
onErrorCaptured(err => {
globalErrorMessage(err);
return false;
});
</script>
<style>
.ctool-global {
Expand All @@ -68,4 +76,3 @@ onErrorCaptured((err) => {
grid-template-rows: auto minmax(0px, 1fr) auto;
}
</style>

141 changes: 76 additions & 65 deletions packages/ctool-core/src/components/Display.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,21 +2,25 @@
<template v-if="is">
<div class="ctool-display" v-bind="$attrs">
<slot></slot>
<div :style="extraStyle" style="display:inline-flex;">
<div :style="extraStyle" style="display: inline-flex">
<span
ref="extra"
:class="[
`ctool-display-extra`,
`ctool-display-extra-${position}`,
position.includes('right') ? 'ctool-display-extra-right' : '',
position.includes('left') ? 'ctool-display-extra-left' : '',
`ctool-display-extra-${isShowExtra ? 'show' : 'hide'}`
`ctool-display-extra-${isShowExtra ? 'show' : 'hide'}`,
]"
>
<template v-if="isToggle && position.includes('right')">
<Tooltip :content="$t(isShowExtra ? 'component_display_fold_option' : 'component_display_expand_option')">
<Tooltip
:content="
$t(isShowExtra ? 'component_display_fold_option' : 'component_display_expand_option')
"
>
<div class="ctool-display-toggle" @click="extraToggle">
<Icon :size="10" :name="'toggle'" hover/>
<Icon :size="10" :name="'toggle'" hover />
</div>
</Tooltip>
</template>
Expand All @@ -26,9 +30,13 @@
</slot>
</template>
<template v-if="isToggle && position.includes('left')">
<Tooltip :content="$t(isShowExtra ? 'component_display_fold_option' : 'component_display_expand_option')">
<Tooltip
:content="
$t(isShowExtra ? 'component_display_fold_option' : 'component_display_expand_option')
"
>
<div class="ctool-display-toggle" @click="extraToggle">
<Icon :size="10" :name="'toggle'" hover/>
<Icon :size="10" :name="'toggle'" hover />
</div>
</Tooltip>
</template>
Expand All @@ -42,135 +50,135 @@
</template>
<script lang="ts">
export default {
inheritAttrs: false
}
inheritAttrs: false,
};
</script>
<script setup lang="ts">
// 悬浮显示组件
import {PropType, onUpdated, onMounted, StyleValue, useSlots} from "vue";
import {ButtonType, DisplayPosition} from "@/types"
import { PropType, onUpdated, onMounted, StyleValue, useSlots } from "vue";
import { ButtonType, DisplayPosition } from "@/types";
const slots = useSlots();
const props = defineProps({
position: {
type: String as PropType<DisplayPosition>,
default: "bottom-right"
default: "bottom-right",
},
toggle: {
type: Boolean,
default: false
default: false,
},
bottom: {
type: Number,
default: 5
default: 5,
},
left: {
type: Number,
default: 5
default: 5,
},
right: {
type: Number,
default: 5
default: 5,
},
top: {
type: Number,
default: 5
default: 5,
},
text: {
type: String,
default: ""
default: "",
},
enable: {
type: Boolean,
default: true
default: true,
},
type: {
type: String as PropType<ButtonType>,
default: "primary"
}
})
default: "primary",
},
});
const emit = defineEmits<{ (e: 'click'): void }>()
const emit = defineEmits<{ (e: "click"): void }>();
let extra = $ref<HTMLElement | null>(null)
let extraWidth = $ref(0)
let extraHeight = $ref(0)
let extra = $ref<HTMLElement | null>(null);
let extraWidth = $ref(0);
let extraHeight = $ref(0);
const updateExtraSize = () => {
if (extra) {
extraWidth = extra.offsetWidth
extraHeight = extra.offsetHeight
extraWidth = extra.offsetWidth;
extraHeight = extra.offsetHeight;
}
}
};
onUpdated(() => {
updateExtraSize()
})
updateExtraSize();
});
onMounted(() => {
updateExtraSize()
})
updateExtraSize();
});
const extraStyle = $computed(() => {
const css: StyleValue = {
position: "absolute",
backgroundColor: `var(--el-bg-color)`
}
backgroundColor: `var(--el-bg-color)`,
};
switch (props.position) {
case "bottom-left":
css.bottom = `${props.bottom}px`
css.left = `${props.left}px`
css.bottom = `${props.bottom}px`;
css.left = `${props.left}px`;
break;
case "bottom-center":
css.bottom = `${props.bottom}px`
css.left = `calc(50% - ${extraWidth / 2}px)`
css.bottom = `${props.bottom}px`;
css.left = `calc(50% - ${extraWidth / 2}px)`;
break;
case "top-right":
css.top = `${props.top}px`
css.right = `${props.right}px`
css.top = `${props.top}px`;
css.right = `${props.right}px`;
break;
case "top-left":
css.top = `${props.top}px`
css.left = `${props.left}px`
css.top = `${props.top}px`;
css.left = `${props.left}px`;
break;
case "top-center":
css.top = `${props.top}px`
css.left = `calc(50% - ${extraWidth / 2}px)`
css.top = `${props.top}px`;
css.left = `calc(50% - ${extraWidth / 2}px)`;
break;
case "left-center":
css.left = `${props.left}px`
css.top = `calc(50% - ${extraHeight / 2}px)`
css.left = `${props.left}px`;
css.top = `calc(50% - ${extraHeight / 2}px)`;
break;
case "right-center":
css.right = `${props.right}px`
css.top = `calc(50% - ${extraHeight / 2}px)`
css.right = `${props.right}px`;
css.top = `calc(50% - ${extraHeight / 2}px)`;
break;
case "center":
css.left = `calc(50% - ${extraWidth / 2}px)`
css.top = `calc(50% - ${extraHeight / 2}px)`
css.left = `calc(50% - ${extraWidth / 2}px)`;
css.top = `calc(50% - ${extraHeight / 2}px)`;
break;
default :
css.bottom = `${props.bottom}px`
css.right = `${props.right}px`
default:
css.bottom = `${props.bottom}px`;
css.right = `${props.right}px`;
}
return css
})
return css;
});
const click = () => {
emit("click");
}
};
const is = $computed(() => {
return props.enable && (props.text !== "" || !!slots.extra)
})
return props.enable && (props.text !== "" || !!slots.extra);
});
let isShowExtra = $ref(true)
let isShowExtra = $ref(true);
const extraToggle = () => {
isShowExtra = !isShowExtra
}
isShowExtra = !isShowExtra;
};
const isToggle = $computed(() => {
return props.toggle && is && extraWidth > 0
})
return props.toggle && is && extraWidth > 0;
});
</script>
<style>
.ctool-display {
Expand All @@ -181,7 +189,7 @@ const isToggle = $computed(() => {
.ctool-display .ctool-display-extra {
display: inline-flex;
align-items: center
align-items: center;
}
.ctool-display-toggle {
Expand All @@ -200,7 +208,10 @@ const isToggle = $computed(() => {
justify-content: left;
}
.ctool-display :is(.ctool-display-extra-hide.ctool-display-extra-right,.ctool-display-extra-show.ctool-display-extra-left) .ctool-display-toggle .ctool-icon {
.ctool-display
:is(.ctool-display-extra-hide.ctool-display-extra-right, .ctool-display-extra-show.ctool-display-extra-left)
.ctool-display-toggle
.ctool-icon {
transform: rotate(180deg);
}
Expand Down
Loading

0 comments on commit c41724c

Please sign in to comment.