hxuanyu/obs-overlay-widget
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

删除时钟组件 ClockWidget-new.vue

Browse Source
This commit is contained in:
hxuanyu 2025-06-27 10:10:30 +08:00
parent 6a70eef0a2
commit c1dfe48a06
1 changed files with 0 additions and 120 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

120
src/widgets/ClockWidget-new.vue
View File

@ -1,120 +0,0 @@
<template>
<div class="clock-widget" :style="clockStyle">
{{ currentTime }}
</div>
</template>
<script setup lang="ts">
import { ref, computed, onMounted, onUnmounted, watch } from 'vue';
import dayjs from 'dayjs';
// Define props interface
interface ClockConfig {
format: string;
color: string;
fontSize: number;
fontWeight: string;
fontFamily: string;
textShadow: boolean;
shadowColor: string;
shadowBlur: number;
useGradient: boolean;
gradientColors: string[];
showSeconds: boolean;
}
// Define props with default values
const props = withDefaults(defineProps<{
config: Partial<ClockConfig>;
}>(), {
config: () => ({
format: 'HH:mm:ss',
color: '#ffffff',
fontSize: 48,
fontWeight: 'normal',
fontFamily: 'Arial',
textShadow: false,
shadowColor: 'rgba(0,0,0,0.5)',
shadowBlur: 4,
useGradient: false,
gradientColors: ['#ff0000', '#0000ff'],
showSeconds: true
})
});
// State for current time
const currentTime = ref('');
// Update time string based on format
const updateTime = () => {
const currentFormat = props.config.format || 'HH:mm:ss';
const format = props.config.showSeconds ? currentFormat : currentFormat.replace(':ss', '');
currentTime.value = dayjs().format(format);
};
// Interval for updating time
let timeInterval: number | null = null;
// Start the clock
onMounted(() => {
updateTime();
// Set interval based on whether seconds are shown
const intervalTime = props.config.showSeconds ? 1000 : 60000;
timeInterval = window.setInterval(updateTime, intervalTime);
});
// Clean up interval on component unmount
onUnmounted(() => {
if (timeInterval !== null) {
window.clearInterval(timeInterval);
}
});
// Update interval if showSeconds changes
watch(() => props.config.showSeconds, (newValue) => {
if (timeInterval !== null) {
window.clearInterval(timeInterval);
}
const intervalTime = newValue ? 1000 : 60000;
timeInterval = window.setInterval(updateTime, intervalTime);
updateTime();
});
// Computed styles for the clock
const clockStyle = computed(() => {
const style: Record<string, string> = {
fontSize: `${props.config.fontSize || 48}px`,
fontFamily: props.config.fontFamily || 'Arial',
fontWeight: props.config.fontWeight || 'normal'
};
// Apply gradient or solid color
if (props.config.useGradient && (props.config.gradientColors || []).length >= 2) {
const colors = props.config.gradientColors || ['#ff0000', '#0000ff'];
style.backgroundImage = `linear-gradient(to right, ${colors.join(', ')})`;
style.webkitBackgroundClip = 'text';
style.backgroundClip = 'text';
style.color = 'transparent';
} else {
style.color = props.config.color || '#ffffff';
}
// Apply text shadow if enabled
if (props.config.textShadow) {
style.textShadow = `0 0 ${props.config.shadowBlur || 4}px ${props.config.shadowColor || 'rgba(0,0,0,0.5)'}`;
}
return style;
});
</script>
<style scoped>
.clock-widget {
display: inline-block;
padding: 10px;
font-family: Arial, sans-serif;
user-select: none;
}
</style>