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/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 ''
}