gitY
/
LinYeFangHuo
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

文本组件、弹幕文字、渐变文字、图片增加各种事件

main
刘妍 2025-03-03 10:53:17 +08:00
parent 6caaf21d3f
commit fc1442bfbf
5 changed files with 478 additions and 221 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

119
src/packages/components/Informations/Mores/Image/index.vue
View File

@ -1,5 +1,12 @@
<template> <template>
<div :style="getStyle(borderRadius)"> <div
:style="getStyle(borderRadius)"
@click="clickBtn"
@dblclick="dblclickBtn"
@contextmenu="rightclickBtn"
@mouseenter="mouseenterBtn"
@mouseleave="mouseleaveBtn"
>
<n-image <n-image
:object-fit="fit" :object-fit="fit"
preview-disabled preview-disabled
@ -13,46 +20,100 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { PropType, shallowReactive, watch, toRefs } from 'vue' import { PropType, shallowReactive, watch, toRefs, onMounted } from 'vue';
import { requireErrorImg } from '@/utils' import { requireErrorImg } from '@/utils';
import { useChartDataFetch } from '@/hooks' import { useChartDataFetch } from '@/hooks';
import { CreateComponentType } from '@/packages/index.d' import { CreateComponentType } from '@/packages/index.d';
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore' import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore';
import { eventHandlerHook } from '@/hooks/eventHandler.hook';
import { EventBus } from '@/utils/eventBus';
const props = defineProps({ const chartEditStore = useChartEditStore();
const props = defineProps({
chartConfig: { chartConfig: {
type: Object as PropType<CreateComponentType>, type: Object as PropType<CreateComponentType>,
required: true required: true,
} },
}) });
const { w, h } = toRefs(props.chartConfig.attr) const { w, h } = toRefs(props.chartConfig.attr);
const { dataset, fit, borderRadius } = toRefs(props.chartConfig.option) const { dataset, fit, borderRadius } = toRefs(props.chartConfig.option);
const option = shallowReactive({ const option = shallowReactive({
dataset: '' dataset: '',
}) });
const getStyle = (radius: number) => { const getStyle = (radius: number) => {
return { return {
borderRadius: `${radius}px`, borderRadius: `${radius}px`,
overflow: 'hidden' overflow: 'hidden',
} cursor: 'pointer',
} };
};
// 编辑更新 // 编辑更新
watch( watch(
() => props.chartConfig.option.dataset, () => props.chartConfig.option.dataset,
(newData: any) => { (newData: any) => {
option.dataset = newData option.dataset = newData;
}, },
{ {
immediate: true immediate: true,
} },
) );
// 预览更新 // 预览更新
useChartDataFetch(props.chartConfig, useChartEditStore, (newData: any) => { useChartDataFetch(props.chartConfig, useChartEditStore, (newData: any) => {
option.dataset = newData option.dataset = newData;
}) });
const clickBtn = (val) => {
eventHandlerHook(
chartEditStore.getComponentList,
props.chartConfig.events.interactConfigEvents,
'click',
val,
);
};
const dblclickBtn = (val) => {
eventHandlerHook(
chartEditStore.getComponentList,
props.chartConfig.events.interactConfigEvents,
'dblclick',
val,
);
};
const rightclickBtn = (event) => {
event.preventDefault(); // 阻止默认的右键菜单
eventHandlerHook(
chartEditStore.getComponentList,
props.chartConfig.events.interactConfigEvents,
'rightclick',
);
};
const mouseenterBtn = (val) => {
eventHandlerHook(
chartEditStore.getComponentList,
props.chartConfig.events.interactConfigEvents,
'mousein',
val,
);
};
const mouseleaveBtn = (val) => {
eventHandlerHook(
chartEditStore.getComponentList,
props.chartConfig.events.interactConfigEvents,
'mouseout',
val,
);
};
onMounted(() => {
// 获取eventBus传过来的值
EventBus.on(props.chartConfig.id + 'dataupdate', (data) => {
console.log('data', data);
});
// websocket传过来的值
EventBus.on(props.chartConfig.id + 'websocket', (data) => {
console.log('data', data);
});
});
</script> </script>

153
src/packages/components/Informations/Texts/TextBarrage/index.vue
View File

@ -1,6 +1,13 @@
<template> <template>
<div class="go-text-box"> <div class="go-text-box">
<div class="content"> <div
class="content"
@click="clickBtn"
@dblclick="dblclickBtn"
@contextmenu="rightclickBtn"
@mouseenter="mouseenterBtn"
@mouseleave="mouseleaveBtn"
>
<span> <span>
{{ option.dataset }} {{ option.dataset }}
</span> </span>
@ -9,76 +16,137 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { PropType, toRefs, shallowReactive, watch, computed, ref } from 'vue' import { PropType, toRefs, shallowReactive, watch, computed, ref, onMounted } from 'vue';
import { CreateComponentType } from '@/packages/index.d' import { CreateComponentType } from '@/packages/index.d';
import { useChartDataFetch } from '@/hooks' import { useChartDataFetch } from '@/hooks';
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore' import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore';
import { option as configOption } from './config' import { option as configOption } from './config';
import { values } from 'lodash' import { values } from 'lodash';
import { eventHandlerHook } from '@/hooks/eventHandler.hook';
import { EventBus } from '@/utils/eventBus';
const props = defineProps({ const chartEditStore = useChartEditStore();
const props = defineProps({
chartConfig: { chartConfig: {
type: Object as PropType<CreateComponentType & typeof option>, type: Object as PropType<CreateComponentType & typeof option>,
required: true required: true,
} },
}) });
const { w } = toRefs(props.chartConfig.attr) const { w } = toRefs(props.chartConfig.attr);
const { fontColor, fontSize, letterSpacing, fontWeight, animationTime, animationSpeed, boxShadow } = toRefs( const {
props.chartConfig.option fontColor,
) fontSize,
letterSpacing,
fontWeight,
animationTime,
animationSpeed,
boxShadow,
} = toRefs(props.chartConfig.option);
const option = shallowReactive({ const option = shallowReactive({
dataset: configOption.dataset dataset: configOption.dataset,
}) });
// 手动更新 // 手动更新
watch( watch(
() => props.chartConfig.option.dataset, () => props.chartConfig.option.dataset,
(newData: any) => { (newData: any) => {
option.dataset = newData option.dataset = newData;
}, },
{ {
immediate: true, immediate: true,
deep: false deep: false,
} },
) );
//阴影 //阴影
watch( watch(
props.chartConfig.option, props.chartConfig.option,
() => { () => {
try { try {
if (props.chartConfig.option.showShadow) { if (props.chartConfig.option.showShadow) {
boxShadow.value = `${props.chartConfig.option.hShadow}px ${props.chartConfig.option.vShadow}px ${props.chartConfig.option.blurShadow}px ${props.chartConfig.option.colorShadow}` boxShadow.value = `${props.chartConfig.option.hShadow}px ${props.chartConfig.option.vShadow}px ${props.chartConfig.option.blurShadow}px ${props.chartConfig.option.colorShadow}`;
} else { } else {
boxShadow.value = 'none' boxShadow.value = 'none';
} }
} catch (error) { } catch (error) {
console.log(error) console.log(error);
} }
}, },
{ {
immediate: true immediate: true,
} },
) );
const transitionDuration = computed(() => { const transitionDuration = computed(() => {
return Math.floor((w.value as any) / (animationSpeed.value as any)) return Math.floor((w.value as any) / (animationSpeed.value as any));
}) });
// 预览更新 // 预览更新
useChartDataFetch(props.chartConfig, useChartEditStore, (newData: string) => { useChartDataFetch(props.chartConfig, useChartEditStore, (newData: string) => {
option.dataset = newData option.dataset = newData;
}) });
const clickBtn = (val) => {
eventHandlerHook(
chartEditStore.getComponentList,
props.chartConfig.events.interactConfigEvents,
'click',
val,
);
};
const dblclickBtn = (val) => {
eventHandlerHook(
chartEditStore.getComponentList,
props.chartConfig.events.interactConfigEvents,
'dblclick',
val,
);
};
const rightclickBtn = (event) => {
event.preventDefault(); // 阻止默认的右键菜单
eventHandlerHook(
chartEditStore.getComponentList,
props.chartConfig.events.interactConfigEvents,
'rightclick',
);
};
const mouseenterBtn = (val) => {
eventHandlerHook(
chartEditStore.getComponentList,
props.chartConfig.events.interactConfigEvents,
'mousein',
val,
);
};
const mouseleaveBtn = (val) => {
eventHandlerHook(
chartEditStore.getComponentList,
props.chartConfig.events.interactConfigEvents,
'mouseout',
val,
);
};
onMounted(() => {
// 获取eventBus传过来的值
EventBus.on(props.chartConfig.id + 'dataupdate', (data) => {
console.log('data', data);
});
// websocket传过来的值
EventBus.on(props.chartConfig.id + 'websocket', (data) => {
console.log('data', data);
});
});
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@include go('text-box') { @include go('text-box') {
display: flex; display: flex;
align-items: center; align-items: center;
.content { .content {
cursor: pointer;
width: 100%; width: 100%;
color: v-bind('fontColor'); color: v-bind('fontColor');
font-size: v-bind('fontSize + "px"'); font-size: v-bind('fontSize + "px"');
@ -86,7 +154,8 @@ useChartDataFetch(props.chartConfig, useChartEditStore, (newData: string) => {
font-weight: v-bind('fontWeight'); font-weight: v-bind('fontWeight');
text-shadow: v-bind('boxShadow'); text-shadow: v-bind('boxShadow');
position: absolute; position: absolute;
animation: barrage v-bind('transitionDuration + "s"') linear v-bind('animationTime + "s"') infinite; animation: barrage v-bind('transitionDuration + "s"') linear v-bind('animationTime + "s"')
infinite;
} }
@keyframes barrage { @keyframes barrage {
from { from {
@ -98,5 +167,5 @@ useChartDataFetch(props.chartConfig, useChartEditStore, (newData: string) => {
transform: translateX(-100%); transform: translateX(-100%);
} }
} }
} }
</style> </style>

131
src/packages/components/Informations/Texts/TextCommon/index.vue
View File

@ -1,27 +1,41 @@
<template> <template>
<div class="go-text-box"> <div class="go-text-box">
<div class="content"> <div class="content">
<span style="cursor: pointer; white-space: pre-wrap" v-if="link" @click="click">{{ option.dataset }}</span> <span style="cursor: pointer; white-space: pre-wrap" v-if="link" @click="click">{{
<span style="white-space: pre-wrap" v-else>{{ option.dataset }}</span> option.dataset
}}</span>
<span
style="white-space: pre-wrap; cursor: pointer"
v-else
@click="clickBtn"
@dblclick="dblclickBtn"
@contextmenu="rightclickBtn"
@mouseenter="mouseenterBtn"
@mouseleave="mouseleaveBtn"
>{{ option.dataset }}</span
>
</div> </div>
</div> </div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { PropType, toRefs, shallowReactive, watch } from 'vue' import { PropType, toRefs, shallowReactive, watch, onMounted } from 'vue';
import { CreateComponentType } from '@/packages/index.d' import { CreateComponentType } from '@/packages/index.d';
import { useChartDataFetch } from '@/hooks' import { useChartDataFetch } from '@/hooks';
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore' import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore';
import { option as configOption } from './config' import { option as configOption } from './config';
import { eventHandlerHook } from '@/hooks/eventHandler.hook';
import { EventBus } from '@/utils/eventBus';
const props = defineProps({ const chartEditStore = useChartEditStore();
const props = defineProps({
chartConfig: { chartConfig: {
type: Object as PropType<CreateComponentType & typeof option>, type: Object as PropType<CreateComponentType & typeof option>,
required: true required: true,
} },
}) });
const { const {
linkHead, linkHead,
link, link,
fontColor, fontColor,
@ -35,38 +49,89 @@ const {
borderRadius, borderRadius,
writingMode, writingMode,
backgroundColor, backgroundColor,
fontWeight fontWeight,
} = toRefs(props.chartConfig.option) } = toRefs(props.chartConfig.option);
const option = shallowReactive({ const option = shallowReactive({
dataset: configOption.dataset dataset: configOption.dataset,
}) });
// 手动更新 // 手动更新
watch( watch(
() => props.chartConfig.option.dataset, () => props.chartConfig.option.dataset,
(newData: any) => { (newData: any) => {
option.dataset = newData option.dataset = newData;
}, },
{ {
immediate: true, immediate: true,
deep: false deep: false,
} },
) );
// 预览更新 // 预览更新
useChartDataFetch(props.chartConfig, useChartEditStore, (newData: string) => { useChartDataFetch(props.chartConfig, useChartEditStore, (newData: string) => {
option.dataset = newData option.dataset = newData;
}) });
//打开链接 //打开链接
const click = () => { const click = () => {
window.open(linkHead.value + link.value) window.open(linkHead.value + link.value);
} };
const clickBtn = (val) => {
eventHandlerHook(
chartEditStore.getComponentList,
props.chartConfig.events.interactConfigEvents,
'click',
val,
);
};
const dblclickBtn = (val) => {
eventHandlerHook(
chartEditStore.getComponentList,
props.chartConfig.events.interactConfigEvents,
'dblclick',
val,
);
};
const rightclickBtn = (event) => {
event.preventDefault(); // 阻止默认的右键菜单
eventHandlerHook(
chartEditStore.getComponentList,
props.chartConfig.events.interactConfigEvents,
'rightclick',
);
};
const mouseenterBtn = (val) => {
eventHandlerHook(
chartEditStore.getComponentList,
props.chartConfig.events.interactConfigEvents,
'mousein',
val,
);
};
const mouseleaveBtn = (val) => {
eventHandlerHook(
chartEditStore.getComponentList,
props.chartConfig.events.interactConfigEvents,
'mouseout',
val,
);
};
onMounted(() => {
// 获取eventBus传过来的值
EventBus.on(props.chartConfig.id + 'dataupdate', (data) => {
console.log('data', data);
});
// websocket传过来的值
EventBus.on(props.chartConfig.id + 'websocket', (data) => {
console.log('data', data);
});
});
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@include go('text-box') { @include go('text-box') {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: v-bind('textAlign'); justify-content: v-bind('textAlign');
@ -86,5 +151,5 @@ const click = () => {
background-color: v-bind('backgroundColor'); background-color: v-bind('backgroundColor');
} }
} }
</style> </style>

112
src/packages/components/Informations/Texts/TextGradient/index.vue
View File

@ -1,54 +1,116 @@
<template> <template>
<div class="go-text-box"> <div
class="go-text-box"
@click="clickBtn"
@dblclick="dblclickBtn"
@contextmenu="rightclickBtn"
@mouseenter="mouseenterBtn"
@mouseleave="mouseleaveBtn"
>
<n-gradient-text :size="size" :gradient="gradient"> <n-gradient-text :size="size" :gradient="gradient">
{{ option.dataset }} {{ option.dataset }}
</n-gradient-text> </n-gradient-text>
</div> </div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { PropType, toRefs, shallowReactive, watch } from 'vue' import { PropType, toRefs, shallowReactive, watch, onMounted } from 'vue';
import { CreateComponentType } from '@/packages/index.d' import { CreateComponentType } from '@/packages/index.d';
import { useChartDataFetch } from '@/hooks' import { useChartDataFetch } from '@/hooks';
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore' import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore';
import { option as configOption } from './config' import { option as configOption } from './config';
import { eventHandlerHook } from '@/hooks/eventHandler.hook';
import { EventBus } from '@/utils/eventBus';
const props = defineProps({ const chartEditStore = useChartEditStore();
const props = defineProps({
chartConfig: { chartConfig: {
type: Object as PropType<CreateComponentType>, type: Object as PropType<CreateComponentType>,
required: true required: true,
} },
}) });
const option = shallowReactive({ const option = shallowReactive({
dataset: configOption.dataset dataset: configOption.dataset,
}) });
const { w, h } = toRefs(props.chartConfig.attr) const { w, h } = toRefs(props.chartConfig.attr);
const { size, gradient } = toRefs(props.chartConfig.option) const { size, gradient } = toRefs(props.chartConfig.option);
watch( watch(
() => props.chartConfig.option.dataset, () => props.chartConfig.option.dataset,
(newData: any) => { (newData: any) => {
option.dataset = newData option.dataset = newData;
}, },
{ {
immediate: true, immediate: true,
deep: false deep: false,
} },
) );
useChartDataFetch(props.chartConfig, useChartEditStore, (newData: any) => { useChartDataFetch(props.chartConfig, useChartEditStore, (newData: any) => {
option.dataset = newData option.dataset = newData;
}) });
const clickBtn = (val) => {
eventHandlerHook(
chartEditStore.getComponentList,
props.chartConfig.events.interactConfigEvents,
'click',
val,
);
};
const dblclickBtn = (val) => {
eventHandlerHook(
chartEditStore.getComponentList,
props.chartConfig.events.interactConfigEvents,
'dblclick',
val,
);
};
const rightclickBtn = (event) => {
event.preventDefault(); // 阻止默认的右键菜单
eventHandlerHook(
chartEditStore.getComponentList,
props.chartConfig.events.interactConfigEvents,
'rightclick',
);
};
const mouseenterBtn = (val) => {
eventHandlerHook(
chartEditStore.getComponentList,
props.chartConfig.events.interactConfigEvents,
'mousein',
val,
);
};
const mouseleaveBtn = (val) => {
eventHandlerHook(
chartEditStore.getComponentList,
props.chartConfig.events.interactConfigEvents,
'mouseout',
val,
);
};
onMounted(() => {
// 获取eventBus传过来的值
EventBus.on(props.chartConfig.id + 'dataupdate', (data) => {
console.log('data', data);
});
// websocket传过来的值
EventBus.on(props.chartConfig.id + 'websocket', (data) => {
console.log('data', data);
});
});
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@include go('text-box') { @include go('text-box') {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
cursor: pointer;
.n-gradient-text { .n-gradient-text {
white-space: initial; white-space: initial;
} }
} }
</style> </style>

4
src/views/preview/components/PreviewRenderList/index.vue
View File

@ -12,7 +12,7 @@
...getPreviewConfigStyle(item.preview), ...getPreviewConfigStyle(item.preview),
...(getBlendModeStyle(item.styles) as any), ...(getBlendModeStyle(item.styles) as any),
...getSizeStyle(item.attr), ...getSizeStyle(item.attr),
...setMouseEventClose(item.option) ...setMouseEventClose(item.option),
}" }"
> >
<!-- 分组 --> <!-- 分组 -->
@ -24,7 +24,7 @@
:themeColor="themeColor" :themeColor="themeColor"
/> />
<!-- 单组件 --> <!-- 单组件 preview-->
<component <component
v-else v-else
:is="item.chartConfig.chartKey" :is="item.chartConfig.chartKey"