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

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

@ -1,5 +1,12 @@
<template>
<div :style="getStyle(borderRadius)">
<div
:style="getStyle(borderRadius)"
@click="clickBtn"
@dblclick="dblclickBtn"
@contextmenu="rightclickBtn"
@mouseenter="mouseenterBtn"
@mouseleave="mouseleaveBtn"
>
<n-image
:object-fit="fit"
preview-disabled
@ -13,46 +20,100 @@
</template>
<script setup lang="ts">
import { PropType, shallowReactive, watch, toRefs } from 'vue'
import { requireErrorImg } from '@/utils'
import { useChartDataFetch } from '@/hooks'
import { CreateComponentType } from '@/packages/index.d'
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
import { PropType, shallowReactive, watch, toRefs, onMounted } from 'vue';
import { requireErrorImg } from '@/utils';
import { useChartDataFetch } from '@/hooks';
import { CreateComponentType } from '@/packages/index.d';
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore';
import { eventHandlerHook } from '@/hooks/eventHandler.hook';
import { EventBus } from '@/utils/eventBus';
const props = defineProps({
chartConfig: {
type: Object as PropType<CreateComponentType>,
required: true
}
})
const chartEditStore = useChartEditStore();
const props = defineProps({
chartConfig: {
type: Object as PropType<CreateComponentType>,
required: true,
},
});
const { w, h } = toRefs(props.chartConfig.attr)
const { dataset, fit, borderRadius } = toRefs(props.chartConfig.option)
const { w, h } = toRefs(props.chartConfig.attr);
const { dataset, fit, borderRadius } = toRefs(props.chartConfig.option);
const option = shallowReactive({
dataset: ''
})
const option = shallowReactive({
dataset: '',
});
const getStyle = (radius: number) => {
return {
borderRadius: `${radius}px`,
overflow: 'hidden'
}
}
const getStyle = (radius: number) => {
return {
borderRadius: `${radius}px`,
overflow: 'hidden',
cursor: 'pointer',
};
};
// 编辑更新
watch(
() => props.chartConfig.option.dataset,
(newData: any) => {
option.dataset = newData
},
{
immediate: true
}
)
// 编辑更新
watch(
() => props.chartConfig.option.dataset,
(newData: any) => {
option.dataset = newData;
},
{
immediate: true,
},
);
// 预览更新
useChartDataFetch(props.chartConfig, useChartEditStore, (newData: any) => {
option.dataset = newData
})
// 预览更新
useChartDataFetch(props.chartConfig, useChartEditStore, (newData: any) => {
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>

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

@ -1,6 +1,13 @@
<template>
<div class="go-text-box">
<div class="content">
<div
class="content"
@click="clickBtn"
@dblclick="dblclickBtn"
@contextmenu="rightclickBtn"
@mouseenter="mouseenterBtn"
@mouseleave="mouseleaveBtn"
>
<span>
{{ option.dataset }}
</span>
@ -9,94 +16,156 @@
</template>
<script setup lang="ts">
import { PropType, toRefs, shallowReactive, watch, computed, ref } from 'vue'
import { CreateComponentType } from '@/packages/index.d'
import { useChartDataFetch } from '@/hooks'
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
import { option as configOption } from './config'
import { values } from 'lodash'
import { PropType, toRefs, shallowReactive, watch, computed, ref, onMounted } from 'vue';
import { CreateComponentType } from '@/packages/index.d';
import { useChartDataFetch } from '@/hooks';
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore';
import { option as configOption } from './config';
import { values } from 'lodash';
import { eventHandlerHook } from '@/hooks/eventHandler.hook';
import { EventBus } from '@/utils/eventBus';
const props = defineProps({
chartConfig: {
type: Object as PropType<CreateComponentType & typeof option>,
required: true
}
})
const chartEditStore = useChartEditStore();
const props = defineProps({
chartConfig: {
type: Object as PropType<CreateComponentType & typeof option>,
required: true,
},
});
const { w } = toRefs(props.chartConfig.attr)
const { w } = toRefs(props.chartConfig.attr);
const { fontColor, fontSize, letterSpacing, fontWeight, animationTime, animationSpeed, boxShadow } = toRefs(
props.chartConfig.option
)
const {
fontColor,
fontSize,
letterSpacing,
fontWeight,
animationTime,
animationSpeed,
boxShadow,
} = toRefs(props.chartConfig.option);
const option = shallowReactive({
dataset: configOption.dataset
})
const option = shallowReactive({
dataset: configOption.dataset,
});
// 手动更新
watch(
() => props.chartConfig.option.dataset,
(newData: any) => {
option.dataset = newData
},
{
immediate: true,
deep: false
}
)
// 手动更新
watch(
() => props.chartConfig.option.dataset,
(newData: any) => {
option.dataset = newData;
},
{
immediate: true,
deep: false,
},
);
//阴影
watch(
props.chartConfig.option,
() => {
try {
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}`
} else {
boxShadow.value = 'none'
//阴影
watch(
props.chartConfig.option,
() => {
try {
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}`;
} else {
boxShadow.value = 'none';
}
} catch (error) {
console.log(error);
}
} catch (error) {
console.log(error)
}
},
{
immediate: true
}
)
},
{
immediate: true,
},
);
const transitionDuration = computed(() => {
return Math.floor((w.value as any) / (animationSpeed.value as any))
})
const transitionDuration = computed(() => {
return Math.floor((w.value as any) / (animationSpeed.value as any));
});
// 预览更新
useChartDataFetch(props.chartConfig, useChartEditStore, (newData: string) => {
option.dataset = newData
})
// 预览更新
useChartDataFetch(props.chartConfig, useChartEditStore, (newData: string) => {
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>
<style lang="scss" scoped>
@include go('text-box') {
display: flex;
align-items: center;
.content {
width: 100%;
color: v-bind('fontColor');
font-size: v-bind('fontSize + "px"');
letter-spacing: v-bind('letterSpacing + "px"');
font-weight: v-bind('fontWeight');
text-shadow: v-bind('boxShadow');
position: absolute;
animation: barrage v-bind('transitionDuration + "s"') linear v-bind('animationTime + "s"') infinite;
}
@keyframes barrage {
from {
left: 100%;
transform: translateX(0);
@include go('text-box') {
display: flex;
align-items: center;
.content {
cursor: pointer;
width: 100%;
color: v-bind('fontColor');
font-size: v-bind('fontSize + "px"');
letter-spacing: v-bind('letterSpacing + "px"');
font-weight: v-bind('fontWeight');
text-shadow: v-bind('boxShadow');
position: absolute;
animation: barrage v-bind('transitionDuration + "s"') linear v-bind('animationTime + "s"')
infinite;
}
to {
left: 0;
transform: translateX(-100%);
@keyframes barrage {
from {
left: 100%;
transform: translateX(0);
}
to {
left: 0;
transform: translateX(-100%);
}
}
}
}
</style>

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

@ -1,90 +1,155 @@
<template>
<div class="go-text-box">
<div class="content">
<span style="cursor: pointer; white-space: pre-wrap" v-if="link" @click="click">{{ option.dataset }}</span>
<span style="white-space: pre-wrap" v-else>{{ option.dataset }}</span>
<span style="cursor: pointer; white-space: pre-wrap" v-if="link" @click="click">{{
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>
</template>
<script setup lang="ts">
import { PropType, toRefs, shallowReactive, watch } from 'vue'
import { CreateComponentType } from '@/packages/index.d'
import { useChartDataFetch } from '@/hooks'
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
import { option as configOption } from './config'
import { PropType, toRefs, shallowReactive, watch, onMounted } from 'vue';
import { CreateComponentType } from '@/packages/index.d';
import { useChartDataFetch } from '@/hooks';
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore';
import { option as configOption } from './config';
import { eventHandlerHook } from '@/hooks/eventHandler.hook';
import { EventBus } from '@/utils/eventBus';
const props = defineProps({
chartConfig: {
type: Object as PropType<CreateComponentType & typeof option>,
required: true
}
})
const chartEditStore = useChartEditStore();
const props = defineProps({
chartConfig: {
type: Object as PropType<CreateComponentType & typeof option>,
required: true,
},
});
const {
linkHead,
link,
fontColor,
fontSize,
letterSpacing,
paddingY,
paddingX,
textAlign,
borderWidth,
borderColor,
borderRadius,
writingMode,
backgroundColor,
fontWeight
} = toRefs(props.chartConfig.option)
const {
linkHead,
link,
fontColor,
fontSize,
letterSpacing,
paddingY,
paddingX,
textAlign,
borderWidth,
borderColor,
borderRadius,
writingMode,
backgroundColor,
fontWeight,
} = toRefs(props.chartConfig.option);
const option = shallowReactive({
dataset: configOption.dataset
})
const option = shallowReactive({
dataset: configOption.dataset,
});
// 手动更新
watch(
() => props.chartConfig.option.dataset,
(newData: any) => {
option.dataset = newData
},
{
immediate: true,
deep: false
}
)
// 手动更新
watch(
() => props.chartConfig.option.dataset,
(newData: any) => {
option.dataset = newData;
},
{
immediate: true,
deep: false,
},
);
// 预览更新
useChartDataFetch(props.chartConfig, useChartEditStore, (newData: string) => {
option.dataset = newData
})
// 预览更新
useChartDataFetch(props.chartConfig, useChartEditStore, (newData: string) => {
option.dataset = newData;
});
//打开链接
const click = () => {
window.open(linkHead.value + link.value)
}
//打开链接
const click = () => {
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>
<style lang="scss" scoped>
@include go('text-box') {
display: flex;
align-items: center;
justify-content: v-bind('textAlign');
overflow: hidden;
@include go('text-box') {
display: flex;
align-items: center;
justify-content: v-bind('textAlign');
overflow: hidden;
.content {
color: v-bind('fontColor');
padding: v-bind('`${paddingY}px ${paddingX}px`');
font-size: v-bind('fontSize + "px"');
letter-spacing: v-bind('letterSpacing + "px"');
writing-mode: v-bind('writingMode');
font-weight: v-bind('fontWeight');
border-style: solid;
border-width: v-bind('borderWidth + "px"');
border-radius: v-bind('borderRadius + "px"');
border-color: v-bind('borderColor');
.content {
color: v-bind('fontColor');
padding: v-bind('`${paddingY}px ${paddingX}px`');
font-size: v-bind('fontSize + "px"');
letter-spacing: v-bind('letterSpacing + "px"');
writing-mode: v-bind('writingMode');
font-weight: v-bind('fontWeight');
border-style: solid;
border-width: v-bind('borderWidth + "px"');
border-radius: v-bind('borderRadius + "px"');
border-color: v-bind('borderColor');
background-color: v-bind('backgroundColor');
background-color: v-bind('backgroundColor');
}
}
}
</style>

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

@ -1,54 +1,116 @@
<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">
{{ option.dataset }}
</n-gradient-text>
</div>
</template>
<script setup lang="ts">
import { PropType, toRefs, shallowReactive, watch } from 'vue'
import { CreateComponentType } from '@/packages/index.d'
import { useChartDataFetch } from '@/hooks'
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
import { option as configOption } from './config'
import { PropType, toRefs, shallowReactive, watch, onMounted } from 'vue';
import { CreateComponentType } from '@/packages/index.d';
import { useChartDataFetch } from '@/hooks';
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore';
import { option as configOption } from './config';
import { eventHandlerHook } from '@/hooks/eventHandler.hook';
import { EventBus } from '@/utils/eventBus';
const props = defineProps({
chartConfig: {
type: Object as PropType<CreateComponentType>,
required: true
}
})
const chartEditStore = useChartEditStore();
const props = defineProps({
chartConfig: {
type: Object as PropType<CreateComponentType>,
required: true,
},
});
const option = shallowReactive({
dataset: configOption.dataset
})
const option = shallowReactive({
dataset: configOption.dataset,
});
const { w, h } = toRefs(props.chartConfig.attr)
const { size, gradient } = toRefs(props.chartConfig.option)
const { w, h } = toRefs(props.chartConfig.attr);
const { size, gradient } = toRefs(props.chartConfig.option);
watch(
() => props.chartConfig.option.dataset,
(newData: any) => {
option.dataset = newData
},
{
immediate: true,
deep: false
}
)
watch(
() => props.chartConfig.option.dataset,
(newData: any) => {
option.dataset = newData;
},
{
immediate: true,
deep: false,
},
);
useChartDataFetch(props.chartConfig, useChartEditStore, (newData: any) => {
option.dataset = newData
})
useChartDataFetch(props.chartConfig, useChartEditStore, (newData: any) => {
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>
<style lang="scss" scoped>
@include go('text-box') {
display: flex;
align-items: center;
justify-content: center;
.n-gradient-text {
white-space: initial;
@include go('text-box') {
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
.n-gradient-text {
white-space: initial;
}
}
}
</style>

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

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