github/go-view
4
0
Fork 0
mirror of https://gitee.com/dromara/go-view.git synced 2026-04-23 00:00:12 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: 新增动画功能

Browse Source
This commit is contained in:
MTrun
2022-03-09 09:21:47 +08:00
parent b96c2f0d3e
commit a6e5dec2c0
10 changed files with 157 additions and 79 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/views/preview/components/RenderList/index.vue
+3 -3
View File
@@ -1,9 +1,10 @@
<template>
<div
class="chart-item"
:class="animationsClass(item.styles.animations)"
v-for="(item, index) in localStorageInfo.componentList"
:key="item.id"
:style="{ ...useComponentStyle(item.attr, index), ...useSizeStyle(item.attr) }"
:style="{ ...useComponentAttrStyle(item.attr, index), ...useSizeStyle(item.attr) }"
>
<component
:is="item.key"
@@ -18,7 +19,7 @@
import { PropType, computed } from 'vue'
import { ChartEditStorageType } from '../../index.d'
import { chartColors } from '@/settings/chartThemes/index'
import { useSizeStyle, useComponentStyle } from '../../utils'
import { useSizeStyle, useComponentAttrStyle, animationsClass } from '../../utils'
const props = defineProps({
localStorageInfo: {
@@ -27,7 +28,6 @@ const props = defineProps({
}
})
// 主题色
const themeSetting = computed(() => {
const chartThemeSetting = props.localStorageInfo.editCanvasConfig.chartThemeSetting
src/views/preview/utils/style.ts
+14 -3
View File
@@ -2,8 +2,9 @@ import { PickCreateComponentType } from '@/packages/index.d'
import { EditCanvasConfigType } from '@/store/modules/chartEditStore/chartEditStore.d'
type AttrType = PickCreateComponentType<'attr'>
type StylesType = PickCreateComponentType<'styles'>
export const useComponentStyle = (attr: AttrType, index: number) => {
export const useComponentAttrStyle = (attr: AttrType, index: number) => {
const componentStyle = {
zIndex: index + 1,
left: `${attr.x}px`,
@@ -15,7 +16,7 @@ export const useComponentStyle = (attr: AttrType, index: number) => {
export const useSizeStyle = (attr: AttrType, scale?: number) => {
const sizeStyle = {
width: `${scale ? scale * attr.w : attr.w}px`,
height: `${scale ? scale * attr.h : attr.h}px`,
height: `${scale ? scale * attr.h : attr.h}px`
}
return sizeStyle
}
@@ -24,7 +25,9 @@ export const useEditCanvasConfigStyle = (canvas: EditCanvasConfigType) => {
// 背景
const computedBackground = canvas.selectColor
? { background: canvas.background }
: { background: `url(${canvas.backgroundImage}) no-repeat center/100% !important` }
: {
background: `url(${canvas.backgroundImage}) no-repeat center/100% !important`
}
return {
position: 'relative',
width: canvas.width ? `${canvas.width || 100}px` : '100%',
@@ -32,3 +35,11 @@ export const useEditCanvasConfigStyle = (canvas: EditCanvasConfigType) => {
...computedBackground
}
}
// 动画
export const animationsClass = (animations: string[]) => {
if (animations.length) {
return `animate__animated animate__${animations[0]}`
}
return ''
}