44 lines
1.0 KiB
TypeScript
44 lines
1.0 KiB
TypeScript
import { defineStore } from 'pinia'
|
|
import { reactive, computed } from 'vue'
|
|
import { EditorFolder } from '@/const/editor'
|
|
|
|
// 定义哪些属性需要添加 px 单位
|
|
const PX_PROPERTIES = ['width', 'border-radius']
|
|
const TILT_PROPERTIES = ["border-radius"]
|
|
|
|
export const useEditorStore = defineStore('editor', () => {
|
|
// 存储表单数据
|
|
const formData = reactive<Record<string, any>>({})
|
|
|
|
// 初始化表单数据
|
|
function initializeFormData() {
|
|
EditorFolder.children.forEach((item: any) => {
|
|
if (!(item.label in formData)) {
|
|
formData[item.label] = item.value
|
|
}
|
|
})
|
|
}
|
|
|
|
|
|
// 获取动态样式对象
|
|
const imageStyle = computed(() => {
|
|
const style: Record<string, any> = {}
|
|
Object.entries(formData).forEach(([key, value]) => {
|
|
if (PX_PROPERTIES.includes(key) && typeof value === 'number') {
|
|
style[key] = `${value}px`
|
|
} else {
|
|
style[key] = value
|
|
}
|
|
})
|
|
return style
|
|
})
|
|
|
|
return {
|
|
formData,
|
|
imageStyle,
|
|
initializeFormData,
|
|
}
|
|
}, {
|
|
persist: false
|
|
})
|