fix: 提取滤镜,变换,动画方法到全局

This commit is contained in:
奔跑的面条
2022-05-03 16:29:53 +08:00
parent ef9e4c8ea4
commit cf50e77daf
4 changed files with 36 additions and 30 deletions
@@ -24,8 +24,8 @@
import { PropType, computed } from 'vue'
import { ChartEditStorageType } from '../../index.d'
import { chartColors } from '@/settings/chartThemes/index'
import { getSizeStyle, getFilterStyle, getTranstormStyle, getComponentAttrStyle, animationsClass } from '../../utils'
import { animationsClass, getFilterStyle, getTranstormStyle } from '@/utils'
import { getSizeStyle, getComponentAttrStyle } from '../../utils'
const props = defineProps({
localStorageInfo: {
+2 -1
View File
@@ -16,7 +16,8 @@
<script setup lang="ts">
import { computed } from 'vue'
import { PreviewRenderList } from './components/PreviewRenderList'
import { getEditCanvasConfigStyle, getFilterStyle, getSessionStorageInfo } from './utils'
import { getFilterStyle } from '@/utils'
import { getEditCanvasConfigStyle, getSessionStorageInfo } from './utils'
import { useComInstall } from './hooks/useComInstall.hook'
import { useScale } from './hooks/useScale.hook'
import { useStore } from './hooks/useStore.hook'
-26
View File
@@ -37,29 +37,3 @@ export const getEditCanvasConfigStyle = (canvas: EditCanvasConfigType) => {
...computedBackground
}
}
// 动画
export const animationsClass = (animations: string[]) => {
if (animations.length) {
return `animate__animated animate__${animations[0]}`
}
return ''
}
// 滤镜
export const getFilterStyle = (styles: StylesType | EditCanvasConfigType) => {
const { opacity, saturate, contrast, hueRotate, brightness } = styles
return {
// 透明度
opacity: opacity,
filter: `saturate(${saturate}) contrast(${contrast}) hue-rotate(${hueRotate}deg) brightness(${brightness})`,
}
}
// 变换
export const getTranstormStyle = (styles: StylesType) => {
const { rotateZ, rotateX, rotateY, skewX, skewY } = styles
return {
transform: `rotateZ(${rotateZ || 0}deg) rotateX(${rotateX || 0}deg) rotateY(${rotateY || 0}deg) skewX(${skewX || 0}deg) skewY(${skewY || 0}deg)`,
}
}