diff --git a/core/core-frontend/src/assets/svg/dv-style-scroll-speed.svg b/core/core-frontend/src/assets/svg/dv-style-scroll-speed.svg new file mode 100644 index 0000000000..e0634c53cb --- /dev/null +++ b/core/core-frontend/src/assets/svg/dv-style-scroll-speed.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/core/core-frontend/src/custom-component/common/CommonStyleSet.vue b/core/core-frontend/src/custom-component/common/CommonStyleSet.vue index b9e91abb43..ca3390a86b 100644 --- a/core/core-frontend/src/custom-component/common/CommonStyleSet.vue +++ b/core/core-frontend/src/custom-component/common/CommonStyleSet.vue @@ -84,7 +84,7 @@ @change="changeStyle" > @@ -266,12 +266,28 @@ const styleMounted = ref({ opacity: 1, fontSize: 22, activeFontSize: 22, + letterSpacing: 0, + scrollSpeed: 0, fontWeight: 'normal', fontStyle: 'normal', textAlign: 'center', color: '#000000' }) +const scrollSpeedList = [ + { name: '停止', value: 0 }, + { name: '1', value: 20 }, + { name: '2', value: 18 }, + { name: '3', value: 16 }, + { name: '4', value: 14 }, + { name: '5', value: 12 }, + { name: '6', value: 10 }, + { name: '7', value: 8 }, + { name: '8', value: 6 }, + { name: '9', value: 4 }, + { name: '10', value: 2 } +] + const opacitySizeList = [ { name: '0.1', value: 0.1 }, { name: '0.2', value: 0.2 }, @@ -310,6 +326,17 @@ const styleColorKeyArray = [ { value: 'backgroundColor', label: '背景色', width: 90, icon: 'dv-style-backgroundColor' } ] +const letterSpacingList = computed(() => { + const arr = [] + for (let i = 0; i <= 60; i = i + 1) { + arr.push({ + name: i + '', + value: i + }) + } + return arr +}) + const fontSizeList = computed(() => { const arr = [] for (let i = 10; i <= 60; i = i + 1) { @@ -351,6 +378,13 @@ const borderStyleList = [ //大小随画布缩放动态变化 const styleOptionMountedKeyArray = [ + { + value: 'letterSpacing', + label: '字间距', + customOption: letterSpacingList.value, + width: '90px', + icon: 'dv-style-letterSpacing' + }, { value: 'fontSize', label: '字体大小', @@ -369,6 +403,13 @@ const styleOptionMountedKeyArray = [ //大小不变 const styleOptionKeyArray = [ + { + value: 'scrollSpeed', + label: '滚动速度', + customOption: scrollSpeedList, + width: '90px', + icon: 'dv-style-scroll-speed' + }, { value: 'opacity', label: '不透明度', diff --git a/core/core-frontend/src/custom-component/component-group/TextGroup.vue b/core/core-frontend/src/custom-component/component-group/TextGroup.vue index 756ea10e08..04b099d5de 100644 --- a/core/core-frontend/src/custom-component/component-group/TextGroup.vue +++ b/core/core-frontend/src/custom-component/component-group/TextGroup.vue @@ -11,7 +11,7 @@ const props = defineProps({ }, dvModel: { type: String, - default: 'dv' + default: 'dataV' }, element: { type: Object, @@ -52,6 +52,7 @@ const newComponent = (componentName, innerType) => { v-on:click="newComponent('UserView', 'rich-text')" > import { keycodes } from '@/utils/DeShortcutKey.js' import eventBus from '@/utils/eventBus' -import { nextTick, onBeforeUnmount, ref } from 'vue' +import { computed, nextTick, onBeforeUnmount, ref } from 'vue' import { toRefs } from 'vue' import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain' import { storeToRefs } from 'pinia' @@ -112,17 +112,30 @@ const selectText = element => { onBeforeUnmount(() => { eventBus.off('componentClick', onComponentClick) }) + +const varStyle = computed(() => [{ '--scroll-speed': `${element.value.style.scrollSpeed}s` }]) + +const textStyle = computed(() => { + return { + verticalAlign: element.value['style'].verticalAlign + } +}) @@ -175,7 +184,7 @@ onBeforeUnmount(() => { .marquee-txt { display: inline-block; padding-left: 100%; /* 从右至左开始滚动 */ - animation: marqueeAnimation 10s linear infinite; + animation: marqueeAnimation var(--scroll-speed) linear infinite; } @keyframes marqueeAnimation { 0% { diff --git a/core/core-frontend/src/utils/changeComponentsSizeWithScale.ts b/core/core-frontend/src/utils/changeComponentsSizeWithScale.ts index 948711a7c2..950d8916ca 100644 --- a/core/core-frontend/src/utils/changeComponentsSizeWithScale.ts +++ b/core/core-frontend/src/utils/changeComponentsSizeWithScale.ts @@ -7,7 +7,7 @@ import { groupSizeStyleAdaptor } from '@/utils/style' const dvMainStore = dvMainStoreWithOut() const { componentData, curComponentIndex, canvasStyleData } = storeToRefs(dvMainStore) -const needToChangeAttrs = ['top', 'left', 'width', 'height', 'fontSize'] +const needToChangeAttrs = ['top', 'left', 'width', 'height', 'fontSize', 'letterSpacing'] export function changeSizeWithScale(scale) { return changeComponentsSizeWithScale(scale)