-
-
+
diff --git a/src/custom-component/LineShape/Attr.vue b/src/custom-component/LineShape/Attr.vue
index 87e19d3..d359227 100644
--- a/src/custom-component/LineShape/Attr.vue
+++ b/src/custom-component/LineShape/Attr.vue
@@ -1,13 +1,13 @@
-
-
+
+
diff --git a/src/custom-component/LineShape/Component.vue b/src/custom-component/LineShape/Component.vue
index 4ae2007..496092d 100644
--- a/src/custom-component/LineShape/Component.vue
+++ b/src/custom-component/LineShape/Component.vue
@@ -1,19 +1,19 @@
-
+
diff --git a/src/custom-component/Picture/Attr.vue b/src/custom-component/Picture/Attr.vue
index 1c4068b..251dc63 100644
--- a/src/custom-component/Picture/Attr.vue
+++ b/src/custom-component/Picture/Attr.vue
@@ -1,26 +1,26 @@
-
-
-
-
-
- 水平翻转
- 垂直翻转
-
-
-
-
+
+
+
+
+ 水平翻转
+ 垂直翻转
+
+
+
+
diff --git a/src/custom-component/Picture/Component.vue b/src/custom-component/Picture/Component.vue
index b7255b8..e056e7c 100644
--- a/src/custom-component/Picture/Component.vue
+++ b/src/custom-component/Picture/Component.vue
@@ -1,88 +1,88 @@
-
-
+
+
diff --git a/src/custom-component/RectShape/Attr.vue b/src/custom-component/RectShape/Attr.vue
index a908d4a..ce7e502 100644
--- a/src/custom-component/RectShape/Attr.vue
+++ b/src/custom-component/RectShape/Attr.vue
@@ -1,23 +1,23 @@
-
-
-
-
-
-
+
+
+
+
+
+
diff --git a/src/custom-component/RectShape/Component.vue b/src/custom-component/RectShape/Component.vue
index f0074d6..54a0cf3 100644
--- a/src/custom-component/RectShape/Component.vue
+++ b/src/custom-component/RectShape/Component.vue
@@ -1,32 +1,32 @@
-
-
+
+
diff --git a/src/custom-component/VButton/Attr.vue b/src/custom-component/VButton/Attr.vue
index a908d4a..ce7e502 100644
--- a/src/custom-component/VButton/Attr.vue
+++ b/src/custom-component/VButton/Attr.vue
@@ -1,23 +1,23 @@
-
-
-
-
-
-
+
+
+
+
+
+
diff --git a/src/custom-component/VButton/Component.vue b/src/custom-component/VButton/Component.vue
index 7d72ea2..e86393b 100644
--- a/src/custom-component/VButton/Component.vue
+++ b/src/custom-component/VButton/Component.vue
@@ -1,54 +1,54 @@
- {{ propValue }}
+ {{ propValue }}
diff --git a/src/custom-component/VChart/Attr.vue b/src/custom-component/VChart/Attr.vue
index a27291c..efd81b4 100644
--- a/src/custom-component/VChart/Attr.vue
+++ b/src/custom-component/VChart/Attr.vue
@@ -1,68 +1,42 @@
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- 更换图表类型
-
-
- {{ chart.name }}
-
-
-
-
-
- 修改数据
-
-
-
-
-
-
diff --git a/src/custom-component/VChart/Component.vue b/src/custom-component/VChart/Component.vue
index a396792..fa39ff6 100644
--- a/src/custom-component/VChart/Component.vue
+++ b/src/custom-component/VChart/Component.vue
@@ -1,10 +1,5 @@
-
diff --git a/src/custom-component/VTable/Attr.vue b/src/custom-component/VTable/Attr.vue
index b709666..b14ed8f 100644
--- a/src/custom-component/VTable/Attr.vue
+++ b/src/custom-component/VTable/Attr.vue
@@ -1,16 +1,16 @@
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
diff --git a/src/custom-component/VTable/Component.vue b/src/custom-component/VTable/Component.vue
index b728f6f..4e97aa8 100644
--- a/src/custom-component/VTable/Component.vue
+++ b/src/custom-component/VTable/Component.vue
@@ -1,18 +1,18 @@
-
+
diff --git a/src/custom-component/VTable/EditTable.vue b/src/custom-component/VTable/EditTable.vue
index 5f0880f..4f0a970 100644
--- a/src/custom-component/VTable/EditTable.vue
+++ b/src/custom-component/VTable/EditTable.vue
@@ -1,163 +1,162 @@
-
-
-
-
-
- {{ e }}
-
-
-
-
-
- 添加新行
- 添加新列
- 删除行
- 删除列
-
+
+
+
+
+
+ {{ e }}
+
+
+
+
+
+ 添加新行
+ 添加新列
+ 删除行
+ 删除列
+
diff --git a/src/custom-component/VText/Attr.vue b/src/custom-component/VText/Attr.vue
index a908d4a..ce7e502 100644
--- a/src/custom-component/VText/Attr.vue
+++ b/src/custom-component/VText/Attr.vue
@@ -1,23 +1,23 @@
-
-
-
-
-
-
+
+
+
+
+
+
diff --git a/src/custom-component/VText/Component.vue b/src/custom-component/VText/Component.vue
index c95d522..7e84349 100644
--- a/src/custom-component/VText/Component.vue
+++ b/src/custom-component/VText/Component.vue
@@ -1,29 +1,27 @@
+
+
-
+ ref="text"
+ :contenteditable="canEdit"
+ :class="{ 'can-edit': canEdit }"
+ tabindex="0"
+ :style="{ verticalAlign: element.style.verticalAlign, padding: element.style.padding + 'px' }"
+ @dblclick="setEdit"
+ @paste="clearStyle"
+ @mousedown="handleMousedown"
+ @blur="handleBlur"
+ @input="handleInput"
+ v-html="element.propValue"
+ >
diff --git a/src/custom-component/common/CommonAttr.vue b/src/custom-component/common/CommonAttr.vue
index 517ae70..5a7d1f9 100644
--- a/src/custom-component/common/CommonAttr.vue
+++ b/src/custom-component/common/CommonAttr.vue
@@ -1,107 +1,110 @@
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/custom-component/common/Linkage.vue b/src/custom-component/common/Linkage.vue
index c3db491..d68b0c5 100644
--- a/src/custom-component/common/Linkage.vue
+++ b/src/custom-component/common/Linkage.vue
@@ -1,182 +1,172 @@
-
-
-
-
-
-
-
- {{ component.label }}
-
-
-
-
-
事件触发时，当前组件要修改的属性
-
-
-
-
-
-
-
添加属性
-
添加组件
- 过渡时间（秒）
-
-
+
+
+
+
+
+
+
+ {{ component.label }}
+
+
+
+
+
事件触发时，当前组件要修改的属性
+
+
+
+
+
+
+
添加属性
+
添加组件
+ 过渡时间（秒）
+
+
diff --git a/src/custom-component/common/OnEvent.vue b/src/custom-component/common/OnEvent.vue
index 480c58f..1fa681d 100644
--- a/src/custom-component/common/OnEvent.vue
+++ b/src/custom-component/common/OnEvent.vue
@@ -2,54 +2,54 @@
import eventBus from '@/utils/eventBus'
export default {
- props: {
- linkage: {
- type: Object,
- default: () => {},
- },
- element: {
- type: Object,
- default: () => {},
- },
+ props: {
+ linkage: {
+ type: Object,
+ default: () => {},
},
- created() {
- if (this.linkage?.data?.length) {
- eventBus.$on('v-click', this.onClick)
- eventBus.$on('v-hover', this.onHover)
- }
+ element: {
+ type: Object,
+ default: () => {},
},
- mounted() {
- const { data, duration } = this.linkage || {}
- if (data?.length) {
- this.$el.style.transition = `all ${duration}s`
- }
+ },
+ created() {
+ if (this.linkage?.data?.length) {
+ eventBus.$on('v-click', this.onClick)
+ eventBus.$on('v-hover', this.onHover)
+ }
+ },
+ mounted() {
+ const { data, duration } = this.linkage || {}
+ if (data?.length) {
+ this.$el.style.transition = `all ${duration}s`
+ }
+ },
+ beforeDestroy() {
+ if (this.linkage?.data?.length) {
+ eventBus.$off('v-click', this.onClick)
+ eventBus.$off('v-hover', this.onHover)
+ }
+ },
+ methods: {
+ changeStyle(data = []) {
+ data.forEach((item) => {
+ item.style.forEach((e) => {
+ if (e.key) {
+ this.element.style[e.key] = e.value
+ }
+ })
+ })
},
- beforeDestroy() {
- if (this.linkage?.data?.length) {
- eventBus.$off('v-click', this.onClick)
- eventBus.$off('v-hover', this.onHover)
- }
- },
- methods: {
- changeStyle(data = []) {
- data.forEach(item => {
- item.style.forEach(e => {
- if (e.key) {
- this.element.style[e.key] = e.value
- }
- })
- })
- },
- onClick(componentId) {
- const data = this.linkage.data.filter(item => item.id === componentId && item.event === 'v-click')
- this.changeStyle(data)
- },
+ onClick(componentId) {
+ const data = this.linkage.data.filter((item) => item.id === componentId && item.event === 'v-click')
+ this.changeStyle(data)
+ },
- onHover(componentId) {
- const data = this.linkage.data.filter(item => item.id === componentId && item.event === 'v-hover')
- this.changeStyle(data)
- },
+ onHover(componentId) {
+ const data = this.linkage.data.filter((item) => item.id === componentId && item.event === 'v-hover')
+ this.changeStyle(data)
},
+ },
}
diff --git a/src/custom-component/common/Request.vue b/src/custom-component/common/Request.vue
index b2504ef..77c3ef4 100644
--- a/src/custom-component/common/Request.vue
+++ b/src/custom-component/common/Request.vue
@@ -1,163 +1,139 @@
-
-
-
-
- HTTPS://
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
数据项
-
-
+
+
+
+
+ HTTPS://
+
+
+
+
+
+
+
+
+
+
+
+
-
-
-
-
- 触发间隔（毫秒）
- 触发次数（0 为无限）
-
-
-
-
+
添加
+
+
+
+ 触发间隔（毫秒）
+ 触发次数（0 为无限）
+
+
+
+
diff --git a/src/custom-component/component-list.js b/src/custom-component/component-list.js
index 353168f..1245c34 100644
--- a/src/custom-component/component-list.js
+++ b/src/custom-component/component-list.js
@@ -1,265 +1,266 @@
// 公共样式
export const commonStyle = {
- rotate: 0,
- opacity: 1,
+ rotate: 0,
+ opacity: 1,
}
export const commonAttr = {
- animations: [],
- events: {},
- groupStyle: {}, // 当一个组件成为 Group 的子组件时使用
- isLock: false, // 是否锁定组件
- collapseName: 'style', // 编辑组件时记录当前使用的是哪个折叠面板，再次回来时恢复上次打开的折叠面板，优化用户体验
- linkage: {
- duration: 0, // 过渡持续时间
- data: [ // 组件联动
- {
- id: '', // 联动的组件 id
- label: '', // 联动的组件名称
- event: '', // 监听事件
- style: [{ key: '', value: '' }], // 监听的事件触发时，需要改变的属性
- },
- ],
- },
+ animations: [],
+ events: {},
+ groupStyle: {}, // 当一个组件成为 Group 的子组件时使用
+ isLock: false, // 是否锁定组件
+ collapseName: 'style', // 编辑组件时记录当前使用的是哪个折叠面板，再次回来时恢复上次打开的折叠面板，优化用户体验
+ linkage: {
+ duration: 0, // 过渡持续时间
+ data: [
+ // 组件联动
+ {
+ id: '', // 联动的组件 id
+ label: '', // 联动的组件名称
+ event: '', // 监听事件
+ style: [{ key: '', value: '' }], // 监听的事件触发时，需要改变的属性
+ },
+ ],
+ },
}
// 编辑器左侧组件列表
const list = [
- {
- component: 'VText',
- label: '文字',
- propValue: '双击编辑文字',
- icon: 'wenben',
- request: {
- method: 'GET',
- data: [],
- url: '',
- series: false, // 是否定时发送请求
- time: 1000, // 定时更新时间
- paramType: '', // string object array
- requestCount: 0, // 请求次数限制，0 为无限
- },
- style: {
- width: 200,
- height: 28,
- fontSize: 14,
- fontWeight: 400,
- lineHeight: '',
- letterSpacing: 0,
- textAlign: '',
- color: '',
- padding: 4,
- },
+ {
+ component: 'VText',
+ label: '文字',
+ propValue: '双击编辑文字',
+ icon: 'wenben',
+ request: {
+ method: 'GET',
+ data: [],
+ url: '',
+ series: false, // 是否定时发送请求
+ time: 1000, // 定时更新时间
+ paramType: '', // string object array
+ requestCount: 0, // 请求次数限制，0 为无限
},
- {
- component: 'VButton',
- label: '按钮',
- propValue: '按钮',
- icon: 'button',
- style: {
- width: 100,
- height: 34,
- borderWidth: 1,
- borderColor: '',
- borderRadius: '',
- fontSize: 14,
- fontWeight: 400,
- lineHeight: '',
- letterSpacing: 0,
- textAlign: '',
- color: '',
- backgroundColor: '',
- },
+ style: {
+ width: 200,
+ height: 28,
+ fontSize: 14,
+ fontWeight: 400,
+ lineHeight: '',
+ letterSpacing: 0,
+ textAlign: '',
+ color: '',
+ padding: 4,
},
- {
- component: 'Picture',
- label: '图片',
- icon: 'tupian',
- propValue: {
- url: require('@/assets/title.jpg'),
- flip: {
- horizontal: false,
- vertical: false,
- },
- },
- style: {
- width: 300,
- height: 200,
- borderRadius: '',
- },
+ },
+ {
+ component: 'VButton',
+ label: '按钮',
+ propValue: '按钮',
+ icon: 'button',
+ style: {
+ width: 100,
+ height: 34,
+ borderWidth: 1,
+ borderColor: '',
+ borderRadius: '',
+ fontSize: 14,
+ fontWeight: 400,
+ lineHeight: '',
+ letterSpacing: 0,
+ textAlign: '',
+ color: '',
+ backgroundColor: '',
},
- {
- component: 'RectShape',
- label: '矩形',
- propValue: ' ',
- icon: 'juxing',
- style: {
- width: 200,
- height: 200,
- fontSize: 14,
- fontWeight: 400,
- lineHeight: '',
- letterSpacing: 0,
- textAlign: 'center',
- color: '',
- borderColor: '#000',
- borderWidth: 1,
- backgroundColor: '',
- borderStyle: 'solid',
- borderRadius: '',
- verticalAlign: 'middle',
- },
+ },
+ {
+ component: 'Picture',
+ label: '图片',
+ icon: 'tupian',
+ propValue: {
+ url: require('@/assets/title.jpg'),
+ flip: {
+ horizontal: false,
+ vertical: false,
+ },
},
- {
- component: 'LineShape',
- label: '直线',
- propValue: '',
- icon: 'zhixian',
- style: {
- width: 200,
- height: 2,
- backgroundColor: '#000',
- },
+ style: {
+ width: 300,
+ height: 200,
+ borderRadius: '',
},
- {
- component: 'CircleShape',
- label: '圆形',
- propValue: ' ',
- icon: '24gl-circle',
- style: {
- width: 200,
- height: 200,
- fontSize: 14,
- fontWeight: 400,
- lineHeight: '',
- letterSpacing: 0,
- textAlign: 'center',
- color: '',
- borderColor: '#000',
- borderWidth: 1,
- backgroundColor: '',
- borderStyle: 'solid',
- borderRadius: '',
- verticalAlign: 'middle',
- },
+ },
+ {
+ component: 'RectShape',
+ label: '矩形',
+ propValue: ' ',
+ icon: 'juxing',
+ style: {
+ width: 200,
+ height: 200,
+ fontSize: 14,
+ fontWeight: 400,
+ lineHeight: '',
+ letterSpacing: 0,
+ textAlign: 'center',
+ color: '',
+ borderColor: '#000',
+ borderWidth: 1,
+ backgroundColor: '',
+ borderStyle: 'solid',
+ borderRadius: '',
+ verticalAlign: 'middle',
},
- {
- component: 'SVGStar',
- label: '星形',
- icon: 'kongwujiaoxing',
- propValue: '',
- style: {
- width: 80,
- height: 80,
- fontSize: 14,
- fontWeight: 400,
- lineHeight: '',
- letterSpacing: 0,
- textAlign: 'center',
- color: '',
- borderColor: '#000',
- backgroundColor: 'rgba(255, 255, 255, 1)',
- },
+ },
+ {
+ component: 'LineShape',
+ label: '直线',
+ propValue: '',
+ icon: 'zhixian',
+ style: {
+ width: 200,
+ height: 2,
+ backgroundColor: '#000',
},
- {
- component: 'SVGTriangle',
- label: '三角形',
- icon: 'xingzhuang-sanjiaoxing',
- propValue: '',
- style: {
- width: 80,
- height: 80,
- fontSize: 14,
- fontWeight: 400,
- lineHeight: '',
- letterSpacing: 0,
- textAlign: 'center',
- color: '',
- borderColor: '#000',
- backgroundColor: 'rgba(255, 255, 255, 1)',
- },
+ },
+ {
+ component: 'CircleShape',
+ label: '圆形',
+ propValue: ' ',
+ icon: '24gl-circle',
+ style: {
+ width: 200,
+ height: 200,
+ fontSize: 14,
+ fontWeight: 400,
+ lineHeight: '',
+ letterSpacing: 0,
+ textAlign: 'center',
+ color: '',
+ borderColor: '#000',
+ borderWidth: 1,
+ backgroundColor: '',
+ borderStyle: 'solid',
+ borderRadius: '',
+ verticalAlign: 'middle',
+ },
+ },
+ {
+ component: 'SVGStar',
+ label: '星形',
+ icon: 'kongwujiaoxing',
+ propValue: '',
+ style: {
+ width: 80,
+ height: 80,
+ fontSize: 14,
+ fontWeight: 400,
+ lineHeight: '',
+ letterSpacing: 0,
+ textAlign: 'center',
+ color: '',
+ borderColor: '#000',
+ backgroundColor: 'rgba(255, 255, 255, 1)',
+ },
+ },
+ {
+ component: 'SVGTriangle',
+ label: '三角形',
+ icon: 'xingzhuang-sanjiaoxing',
+ propValue: '',
+ style: {
+ width: 80,
+ height: 80,
+ fontSize: 14,
+ fontWeight: 400,
+ lineHeight: '',
+ letterSpacing: 0,
+ textAlign: 'center',
+ color: '',
+ borderColor: '#000',
+ backgroundColor: 'rgba(255, 255, 255, 1)',
+ },
+ },
+ {
+ component: 'VTable',
+ label: '表格',
+ icon: 'biaoge',
+ propValue: {
+ data: [
+ ['表头1', '表头2', '表头3'],
+ ['内容1', '内容2', '内容3'],
+ ],
+ stripe: true,
+ thBold: true,
},
- {
- component: 'VTable',
- label: '表格',
- icon: 'biaoge',
- propValue: {
- data: [
- ['表头1', '表头2', '表头3'],
- ['内容1', '内容2', '内容3'],
- ],
- stripe: true,
- thBold: true,
+ request: {
+ method: 'GET',
+ data: [],
+ url: '',
+ series: false,
+ time: 1000,
+ paramType: '', // string object array
+ requestCount: 0, // 请求次数限制，0 为无限
+ },
+ style: {
+ width: 600,
+ height: 200,
+ fontSize: 14,
+ fontWeight: 400,
+ textAlign: 'center',
+ color: '',
+ backgroundColor: 'rgba(255, 255, 255, 1)',
+ },
+ },
+ {
+ component: 'VChart',
+ label: '图表',
+ icon: 'el-icon-data-analysis',
+ propValue: {
+ chart: 'VChart',
+ option: {
+ title: {
+ text: '柱状图',
+ show: true,
},
- request: {
- method: 'GET',
- data: [],
- url: '',
- series: false,
- time: 1000,
- paramType: '', // string object array
- requestCount: 0, // 请求次数限制，0 为无限
+ legend: {
+ show: true,
},
- style: {
- width: 600,
- height: 200,
- fontSize: 14,
- fontWeight: 400,
- textAlign: 'center',
- color: '',
- backgroundColor: 'rgba(255, 255, 255, 1)',
+ tooltip: {
+ show: true,
+ trigger: 'item',
},
- },
- {
- component: 'VChart',
- label: '图表',
- icon: 'el-icon-data-analysis',
- propValue: {
- chart: 'VChart',
- option: {
- title: {
- text: '柱状图',
- show: true,
- },
- legend: {
- show: true,
- },
- tooltip: {
- show: true,
- trigger: 'item',
- },
- xAxis: {
- show: true,
- data: ['A', 'B', 'C', 'D', 'E'],
- },
- yAxis: {},
- series: {
- type: 'bar',
- name: '销量',
- data: [23, 61, 35, 77, 35],
- itemStyle: {
- barBorderRadius: 5,
- borderWidth: 1,
- borderType: 'solid',
- borderColor: '#73c0de',
- shadowColor: '#5470c6',
- shadowBlur: 3,
- },
- },
- },
+ xAxis: {
+ show: true,
+ data: ['A', 'B', 'C', 'D', 'E'],
},
- style: {
- width: 800,
- height: 500,
- borderRadius: '',
+ yAxis: {},
+ series: {
+ type: 'bar',
+ name: '销量',
+ data: [23, 61, 35, 77, 35],
+ itemStyle: {
+ barBorderRadius: 5,
+ borderWidth: 1,
+ borderType: 'solid',
+ borderColor: '#73c0de',
+ shadowColor: '#5470c6',
+ shadowBlur: 3,
+ },
},
+ },
+ },
+ style: {
+ width: 800,
+ height: 500,
+ borderRadius: '',
},
+ },
]
for (let i = 0, len = list.length; i < len; i++) {
- const item = list[i]
- item.style = { ...commonStyle, ...item.style }
- list[i] = { ...commonAttr, ...item }
+ const item = list[i]
+ item.style = { ...commonStyle, ...item.style }
+ list[i] = { ...commonAttr, ...item }
}
export default list
diff --git a/src/custom-component/index.js b/src/custom-component/index.js
index 97136e9..7c9e8f0 100644
--- a/src/custom-component/index.js
+++ b/src/custom-component/index.js
@@ -1,28 +1,15 @@
import Vue from 'vue'
-const components = [
- 'CircleShape',
- 'Picture',
- 'VText',
- 'VButton',
- 'Group',
- 'RectShape',
- 'LineShape',
- 'VTable',
- 'VChart',
-]
+const components = ['CircleShape', 'Picture', 'VText', 'VButton', 'Group', 'RectShape', 'LineShape', 'VTable', 'VChart']
-components.forEach(key => {
- Vue.component(key, () => import(`@/custom-component/${key}/Component`))
- Vue.component(key + 'Attr', () => import(`@/custom-component/${key}/Attr`))
+components.forEach((key) => {
+ Vue.component(key, () => import(`@/custom-component/${key}/Component`))
+ Vue.component(`${key}Attr`, () => import(`@/custom-component/${key}/Attr`))
})
-const svgs = [
- 'SVGStar',
- 'SVGTriangle',
-]
+const svgs = ['SVGStar', 'SVGTriangle']
-svgs.forEach(key => {
- Vue.component(key, () => import(`@/custom-component/svgs/${key}/Component`))
- Vue.component(key + 'Attr', () => import(`@/custom-component/svgs/${key}/Attr`))
+svgs.forEach((key) => {
+ Vue.component(key, () => import(`@/custom-component/svgs/${key}/Component`))
+ Vue.component(`${key}Attr`, () => import(`@/custom-component/svgs/${key}/Attr`))
})
diff --git a/src/custom-component/svgs/SVGStar/Attr.vue b/src/custom-component/svgs/SVGStar/Attr.vue
index a908d4a..ce7e502 100644
--- a/src/custom-component/svgs/SVGStar/Attr.vue
+++ b/src/custom-component/svgs/SVGStar/Attr.vue
@@ -1,23 +1,23 @@
-
-
-
-
-
-
+
+
+
+
+
+
diff --git a/src/custom-component/svgs/SVGStar/Component.vue b/src/custom-component/svgs/SVGStar/Component.vue
index a8aa0f0..bad7899 100644
--- a/src/custom-component/svgs/SVGStar/Component.vue
+++ b/src/custom-component/svgs/SVGStar/Component.vue
@@ -1,99 +1,95 @@
-
+
diff --git a/src/custom-component/svgs/SVGTriangle/Attr.vue b/src/custom-component/svgs/SVGTriangle/Attr.vue
index a908d4a..ce7e502 100644
--- a/src/custom-component/svgs/SVGTriangle/Attr.vue
+++ b/src/custom-component/svgs/SVGTriangle/Attr.vue
@@ -1,23 +1,23 @@
-
-
-
-
-
-
+
+
+
+
+
+
diff --git a/src/custom-component/svgs/SVGTriangle/Component.vue b/src/custom-component/svgs/SVGTriangle/Component.vue
index 0cb0eca..aa20346 100644
--- a/src/custom-component/svgs/SVGTriangle/Component.vue
+++ b/src/custom-component/svgs/SVGTriangle/Component.vue
@@ -1,92 +1,88 @@
-
+
diff --git a/src/main.js b/src/main.js
index 4ba2643..ee777df 100644
--- a/src/main.js
+++ b/src/main.js
@@ -16,8 +16,8 @@ Vue.use(ElementUI, { size: 'small' })
Vue.config.productionTip = false
new Vue({
- el: '#app',
- router,
- store,
- render: h => h(App),
+ el: '#app',
+ router,
+ store,
+ render: (h) => h(App),
})
diff --git a/src/router/index.js b/src/router/index.js
index b7db6fb..fd2eeca 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -4,15 +4,15 @@ import Router from 'vue-router'
Vue.use(Router)
const routes = [
- {
- path: '/',
- name: 'Home',
- component: () => import('@/views/Home'),
- },
+ {
+ path: '/',
+ name: 'Home',
+ component: () => import('@/views/Home'),
+ },
]
export default new Router({
- mode: 'history',
- base: process.env.BASE_URL,
- routes,
+ mode: 'history',
+ base: process.env.BASE_URL,
+ routes,
})
diff --git a/src/store/align.js b/src/store/align.js
index 073aa7b..e583698 100644
--- a/src/store/align.js
+++ b/src/store/align.js
@@ -1,199 +1,207 @@
import { getComponentRotatedStyle } from '@/utils/style'
export default {
- mutations: {
- leftAlign(state) {
- // 左对齐
- if (state.areaData.components.length > 1) {
- // 找到所有组件旋转后最左的边界
- let minLeft = Math.min(
- ...state.areaData.components.map(component => {
- let rotatedStyle = getComponentRotatedStyle(component.style)
- return rotatedStyle.left
- }),
- )
+ mutations: {
+ leftAlign(state) {
+ // 左对齐
+ if (state.areaData.components.length > 1) {
+ // 找到所有组件旋转后最左的边界
+ let minLeft = Math.min(
+ ...state.areaData.components.map((component) => {
+ let rotatedStyle = getComponentRotatedStyle(component.style)
+ return rotatedStyle.left
+ }),
+ )
- // 将所有组件的left值设置为minLeft，进行左对齐
- state.areaData.components.forEach(component => {
- let rotatedStyle = getComponentRotatedStyle(component.style)
- let diffX = rotatedStyle.left - minLeft
- changeAlign(component, { left: component.style.left - diffX })
- })
- } else {
- let rotateLeft = getComponentRotatedStyle(state.curComponent.style)
- let newLeft = state.curComponent.style.left - rotateLeft.left
- changeAlign(state.curComponent, { left: newLeft })
- }
- },
- rightAlign(state) {
- if (state.areaData.components.length > 1) {
- // 找到所有组件旋转后最右的边界
- let maxRight = Math.max(
- ...state.areaData.components.map(component => {
- let rotatedStyle = getComponentRotatedStyle(component.style)
- return rotatedStyle.right
- }),
- )
-
- // 将所有组件的right值设置为maxRight，进行右对齐
- state.areaData.components.forEach(component => {
- let rotatedStyle = getComponentRotatedStyle(component.style)
- let diffX = maxRight - rotatedStyle.right
- changeAlign(component, { left: component.style.left + diffX })
- })
- } else {
- let rotatedStyle = getComponentRotatedStyle(state.curComponent.style)
- let newLeft = state.curComponent.style.left - rotatedStyle.left
- let right = state.canvasStyleData.width + newLeft - rotatedStyle.width
- changeAlign(state.curComponent, { left: right })
- }
- },
- centerAlign(state) {
- if (state.areaData.components.length > 1) {
- // 找到所有组件旋转后最左和最右的边界
- let minLeft = Math.min(...state.areaData.components.map(component => getComponentRotatedStyle(component.style).left))
- let maxRight = Math.max(...state.areaData.components.map(component => getComponentRotatedStyle(component.style).right))
- let centerX = (minLeft + maxRight) / 2
-
- // 将所有组件水平居中对齐
- state.areaData.components.forEach(component => {
- let rotatedStyle = getComponentRotatedStyle(component.style)
- let componentCenterX = (rotatedStyle.left + rotatedStyle.right) / 2
- let diffX = centerX - componentCenterX
- changeAlign(component, { left: component.style.left + diffX })
- })
- } else {
- let rotatedStyle = getComponentRotatedStyle(state.curComponent.style)
- let canvasCenterX = state.canvasStyleData.width / 2
- let componentCenterX = (rotatedStyle.left + rotatedStyle.right) / 2
- let newLeft = state.curComponent.style.left + (canvasCenterX - componentCenterX)
- changeAlign(state.curComponent, { left: newLeft })
- }
- },
- topAlign(state) {
- if (state.areaData.components.length > 1) {
- // 找到所有组件旋转后最顶的边界
- let minTop = Math.min(
- ...state.areaData.components.map(component => {
- let rotatedStyle = getComponentRotatedStyle(component.style)
- return rotatedStyle.top
- }),
- )
- // 将所有组件的top值设置为minTop，进行顶部对齐
- state.areaData.components.forEach(component => {
- let rotatedStyle = getComponentRotatedStyle(component.style)
- let diffY = rotatedStyle.top - minTop
- changeAlign(component, { top: component.style.top - diffY })
- })
- } else {
- let rotatedStyle = getComponentRotatedStyle(state.curComponent.style)
- let newTop = state.curComponent.style.top - rotatedStyle.top
- changeAlign(state.curComponent, { top: newTop })
- }
- },
- bottomAlign(state) {
- if (state.areaData.components.length > 1) {
- // 找到所有组件旋转后最底的边界
- let maxBottom = Math.max(
- ...state.areaData.components.map(component => {
- let rotatedStyle = getComponentRotatedStyle(component.style)
- return rotatedStyle.bottom
- }),
- )
-
- // 将所有组件的top值调整，使其底部对齐到maxBottom
- state.areaData.components.forEach(component => {
- let rotatedStyle = getComponentRotatedStyle(component.style)
- let diffY = maxBottom - rotatedStyle.bottom
- changeAlign(component, { top: component.style.top + diffY })
- })
- } else {
- let rotatedStyle = getComponentRotatedStyle(state.curComponent.style)
- let newTop = state.curComponent.style.top - rotatedStyle.top
- let top = state.canvasStyleData.height + newTop - rotatedStyle.height
- changeAlign(state.curComponent, { top })
- }
- },
- middleAlign(state) {
- if (state.areaData.components.length > 1) {
- // 找到所有组件旋转后最顶和最底的边界
- let minTop = Math.min(...state.areaData.components.map(component => getComponentRotatedStyle(component.style).top))
- let maxBottom = Math.max(...state.areaData.components.map(component => getComponentRotatedStyle(component.style).bottom))
- let centerY = (minTop + maxBottom) / 2
-
- // 将所有组件垂直居中对齐
- state.areaData.components.forEach(component => {
- let rotatedStyle = getComponentRotatedStyle(component.style)
- let componentCenterY = (rotatedStyle.top + rotatedStyle.bottom) / 2
- let diffY = centerY - componentCenterY
- changeAlign(component, { top: component.style.top + diffY })
- })
- } else {
- let rotatedStyle = getComponentRotatedStyle(state.curComponent.style)
- let canvasCenterY = state.canvasStyleData.height / 2
- let componentCenterY = (rotatedStyle.top + rotatedStyle.bottom) / 2
- let newTop = state.curComponent.style.top + (canvasCenterY - componentCenterY)
- changeAlign(state.curComponent, { top: newTop })
- }
- },
- verticalSpacing(state) {
- const { components } = state.areaData
- if (components.length > 2) {
- // 获取最上面的组件的 top 值和最下面的组件的 bottom 值
- let totalHeight = 0
- components.forEach((component, index) => {
- let rotatedStyle = getComponentRotatedStyle(component.style)
- totalHeight += rotatedStyle.height
- }) // 获取所有组件的高度总和
+ // 将所有组件的left值设置为minLeft，进行左对齐
+ state.areaData.components.forEach((component) => {
+ let rotatedStyle = getComponentRotatedStyle(component.style)
+ let diffX = rotatedStyle.left - minLeft
+ changeAlign(component, { left: component.style.left - diffX })
+ })
+ } else {
+ let rotateLeft = getComponentRotatedStyle(state.curComponent.style)
+ let newLeft = state.curComponent.style.left - rotateLeft.left
+ changeAlign(state.curComponent, { left: newLeft })
+ }
+ },
+ rightAlign(state) {
+ if (state.areaData.components.length > 1) {
+ // 找到所有组件旋转后最右的边界
+ let maxRight = Math.max(
+ ...state.areaData.components.map((component) => {
+ let rotatedStyle = getComponentRotatedStyle(component.style)
+ return rotatedStyle.right
+ }),
+ )
+
+ // 将所有组件的right值设置为maxRight，进行右对齐
+ state.areaData.components.forEach((component) => {
+ let rotatedStyle = getComponentRotatedStyle(component.style)
+ let diffX = maxRight - rotatedStyle.right
+ changeAlign(component, { left: component.style.left + diffX })
+ })
+ } else {
+ let rotatedStyle = getComponentRotatedStyle(state.curComponent.style)
+ let newLeft = state.curComponent.style.left - rotatedStyle.left
+ let right = state.canvasStyleData.width + newLeft - rotatedStyle.width
+ changeAlign(state.curComponent, { left: right })
+ }
+ },
+ centerAlign(state) {
+ if (state.areaData.components.length > 1) {
+ // 找到所有组件旋转后最左和最右的边界
+ let minLeft = Math.min(
+ ...state.areaData.components.map((component) => getComponentRotatedStyle(component.style).left),
+ )
+ let maxRight = Math.max(
+ ...state.areaData.components.map((component) => getComponentRotatedStyle(component.style).right),
+ )
+ let centerX = (minLeft + maxRight) / 2
+
+ // 将所有组件水平居中对齐
+ state.areaData.components.forEach((component) => {
+ let rotatedStyle = getComponentRotatedStyle(component.style)
+ let componentCenterX = (rotatedStyle.left + rotatedStyle.right) / 2
+ let diffX = centerX - componentCenterX
+ changeAlign(component, { left: component.style.left + diffX })
+ })
+ } else {
+ let rotatedStyle = getComponentRotatedStyle(state.curComponent.style)
+ let canvasCenterX = state.canvasStyleData.width / 2
+ let componentCenterX = (rotatedStyle.left + rotatedStyle.right) / 2
+ let newLeft = state.curComponent.style.left + (canvasCenterX - componentCenterX)
+ changeAlign(state.curComponent, { left: newLeft })
+ }
+ },
+ topAlign(state) {
+ if (state.areaData.components.length > 1) {
+ // 找到所有组件旋转后最顶的边界
+ let minTop = Math.min(
+ ...state.areaData.components.map((component) => {
+ let rotatedStyle = getComponentRotatedStyle(component.style)
+ return rotatedStyle.top
+ }),
+ )
+ // 将所有组件的top值设置为minTop，进行顶部对齐
+ state.areaData.components.forEach((component) => {
+ let rotatedStyle = getComponentRotatedStyle(component.style)
+ let diffY = rotatedStyle.top - minTop
+ changeAlign(component, { top: component.style.top - diffY })
+ })
+ } else {
+ let rotatedStyle = getComponentRotatedStyle(state.curComponent.style)
+ let newTop = state.curComponent.style.top - rotatedStyle.top
+ changeAlign(state.curComponent, { top: newTop })
+ }
+ },
+ bottomAlign(state) {
+ if (state.areaData.components.length > 1) {
+ // 找到所有组件旋转后最底的边界
+ let maxBottom = Math.max(
+ ...state.areaData.components.map((component) => {
+ let rotatedStyle = getComponentRotatedStyle(component.style)
+ return rotatedStyle.bottom
+ }),
+ )
+
+ // 将所有组件的top值调整，使其底部对齐到maxBottom
+ state.areaData.components.forEach((component) => {
+ let rotatedStyle = getComponentRotatedStyle(component.style)
+ let diffY = maxBottom - rotatedStyle.bottom
+ changeAlign(component, { top: component.style.top + diffY })
+ })
+ } else {
+ let rotatedStyle = getComponentRotatedStyle(state.curComponent.style)
+ let newTop = state.curComponent.style.top - rotatedStyle.top
+ let top = state.canvasStyleData.height + newTop - rotatedStyle.height
+ changeAlign(state.curComponent, { top })
+ }
+ },
+ middleAlign(state) {
+ if (state.areaData.components.length > 1) {
+ // 找到所有组件旋转后最顶和最底的边界
+ let minTop = Math.min(
+ ...state.areaData.components.map((component) => getComponentRotatedStyle(component.style).top),
+ )
+ let maxBottom = Math.max(
+ ...state.areaData.components.map((component) => getComponentRotatedStyle(component.style).bottom),
+ )
+ let centerY = (minTop + maxBottom) / 2
+
+ // 将所有组件垂直居中对齐
+ state.areaData.components.forEach((component) => {
+ let rotatedStyle = getComponentRotatedStyle(component.style)
+ let componentCenterY = (rotatedStyle.top + rotatedStyle.bottom) / 2
+ let diffY = centerY - componentCenterY
+ changeAlign(component, { top: component.style.top + diffY })
+ })
+ } else {
+ let rotatedStyle = getComponentRotatedStyle(state.curComponent.style)
+ let canvasCenterY = state.canvasStyleData.height / 2
+ let componentCenterY = (rotatedStyle.top + rotatedStyle.bottom) / 2
+ let newTop = state.curComponent.style.top + (canvasCenterY - componentCenterY)
+ changeAlign(state.curComponent, { top: newTop })
+ }
+ },
+ verticalSpacing(state) {
+ const { components } = state.areaData
+ if (components.length > 2) {
+ // 获取最上面的组件的 top 值和最下面的组件的 bottom 值
+ let totalHeight = 0
+ components.forEach((component) => {
+ let rotatedStyle = getComponentRotatedStyle(component.style)
+ totalHeight += rotatedStyle.height
+ }) // 获取所有组件的高度总和
+
+ const containerHeight = state.areaData.style.height // 获取容器高度
+ const availableSpace = containerHeight - totalHeight // 获取可用高度
+ const spacing = Math.floor(availableSpace / (components.length - 1)) // 去除小数点后取整
+
+ components.sort((a, b) => getComponentRotatedStyle(a.style).top - getComponentRotatedStyle(b.style).top) // 按照 top 值排序
- const containerHeight = state.areaData.style.height // 获取容器高度
- const availableSpace = containerHeight - totalHeight // 获取可用高度
- const spacing = Math.floor(availableSpace / (components.length - 1)) // 去除小数点后取整
+ let currentTop = 0
+ components.forEach((component) => {
+ changeAlign(component, { top: state.areaData.style.top + currentTop })
+ currentTop += spacing + getComponentRotatedStyle(component.style).height
+ })
+ }
+ },
+ horizontalSpacing(state) {
+ const { components } = state.areaData
+ if (components.length > 2) {
+ // 获取所有组件的宽度总和
+ let totalWidth = 0
+ components.forEach((component) => {
+ let rotatedStyle = getComponentRotatedStyle(component.style)
+ totalWidth += rotatedStyle.width
+ })
- components.sort((a, b) => getComponentRotatedStyle(a.style).top - getComponentRotatedStyle(b.style).top) // 按照 top 值排序
+ const containerWidth = state.areaData.style.width // 获取容器宽度
+ const availableSpace = containerWidth - totalWidth // 获取可用宽度
+ const spacing = Math.floor(availableSpace / (components.length - 1)) // 去除小数点后取整
+ components.sort((a, b) => getComponentRotatedStyle(a.style).left - getComponentRotatedStyle(b.style).left) // 按照 left 值排序
- let currentTop = 0
- components.forEach(component => {
- changeAlign(component, { top: state.areaData.style.top + currentTop })
- currentTop += spacing + getComponentRotatedStyle(component.style).height
- })
- }
- },
- horizontalSpacing(state) {
- const { components } = state.areaData
- if (components.length > 2) {
- // 获取所有组件的宽度总和
- let totalWidth = 0
- components.forEach(component => {
- let rotatedStyle = getComponentRotatedStyle(component.style)
- totalWidth += rotatedStyle.width
- })
-
- const containerWidth = state.areaData.style.width // 获取容器宽度
- const availableSpace = containerWidth - totalWidth // 获取可用宽度
- const spacing = Math.floor(availableSpace / (components.length - 1)) // 去除小数点后取整
- components.sort((a, b) => getComponentRotatedStyle(a.style).left - getComponentRotatedStyle(b.style).left) // 按照 left 值排序
-
- let currentLeft = 0
- components.forEach(component => {
- component.style.left = state.areaData.style.left + currentLeft
- currentLeft += spacing + getComponentRotatedStyle(component.style).width
- })
- }
- },
+ let currentLeft = 0
+ components.forEach((component) => {
+ component.style.left = state.areaData.style.left + currentLeft
+ currentLeft += spacing + getComponentRotatedStyle(component.style).width
+ })
+ }
},
+ },
}
function changeAlign(componentData, Align) {
- if (Array.isArray(componentData)) {
- componentData.forEach((item) => {
- changeAlign(item, Align)
- })
- return
- }
- for (let key in Align) {
- if (Align.hasOwnProperty(key)) {
- componentData.style[key] = Align[key]
- }
+ if (Array.isArray(componentData)) {
+ componentData.forEach((item) => {
+ changeAlign(item, Align)
+ })
+ return
+ }
+ for (let key in Align) {
+ if (Align.hasOwnProperty(key)) {
+ componentData.style[key] = Align[key]
}
+ }
}
diff --git a/src/store/animation.js b/src/store/animation.js
index 94375a1..5c9c2c5 100644
--- a/src/store/animation.js
+++ b/src/store/animation.js
@@ -1,18 +1,18 @@
export default {
- mutations: {
- addAnimation({ curComponent }, animation) {
- curComponent.animations.push(animation)
- },
+ mutations: {
+ addAnimation({ curComponent }, animation) {
+ curComponent.animations.push(animation)
+ },
- removeAnimation({ curComponent }, index) {
- curComponent.animations.splice(index, 1)
- },
+ removeAnimation({ curComponent }, index) {
+ curComponent.animations.splice(index, 1)
+ },
- alterAnimation({ curComponent }, { index, data = {} }) {
- if (typeof index === 'number') {
- const original = curComponent.animations[index]
- curComponent.animations[index] = { ...original, ...data }
- }
- },
+ alterAnimation({ curComponent }, { index, data = {} }) {
+ if (typeof index === 'number') {
+ const original = curComponent.animations[index]
+ curComponent.animations[index] = { ...original, ...data }
+ }
},
-}
\ No newline at end of file
+ },
+}
diff --git a/src/store/compose.js b/src/store/compose.js
index b11c2e8..66a5e74 100644
--- a/src/store/compose.js
+++ b/src/store/compose.js
@@ -7,98 +7,99 @@ import { commonStyle, commonAttr } from '@/custom-component/component-list'
import { createGroupStyle } from '@/utils/style'
export default {
- state: {
- areaData: { // 选中区域包含的组件以及区域位移信息
- style: {
- top: 0,
- left: 0,
- width: 0,
- height: 0,
- },
- components: [],
- },
- editor: null,
+ state: {
+ areaData: {
+ // 选中区域包含的组件以及区域位移信息
+ style: {
+ top: 0,
+ left: 0,
+ width: 0,
+ height: 0,
+ },
+ components: [],
+ },
+ editor: null,
+ },
+ mutations: {
+ getEditor(state) {
+ state.editor = $('#editor')
},
- mutations: {
- getEditor(state) {
- state.editor = $('#editor')
- },
- setAreaData(state, data) {
- state.areaData = data
- },
+ setAreaData(state, data) {
+ state.areaData = data
+ },
- compose({ componentData, areaData, editor }) {
- const components = []
- areaData.components.forEach(component => {
- if (component.component != 'Group') {
- components.push(component)
- } else {
- // 如果要组合的组件中，已经存在组合数据，则需要提前拆分
- const parentStyle = { ...component.style }
- const subComponents = component.propValue
- const editorRect = editor.getBoundingClientRect()
+ compose({ componentData, areaData, editor }) {
+ const components = []
+ areaData.components.forEach((component) => {
+ if (component.component != 'Group') {
+ components.push(component)
+ } else {
+ // 如果要组合的组件中，已经存在组合数据，则需要提前拆分
+ const parentStyle = { ...component.style }
+ const subComponents = component.propValue
+ const editorRect = editor.getBoundingClientRect()
- subComponents.forEach(component => {
- decomposeComponent(component, editorRect, parentStyle)
- })
+ subComponents.forEach((component) => {
+ decomposeComponent(component, editorRect, parentStyle)
+ })
- components.push(...component.propValue)
- }
- })
+ components.push(...component.propValue)
+ }
+ })
- const groupComponent = {
- id: generateID(),
- component: 'Group',
- label: '组合',
- icon: 'zuhe',
- ...commonAttr,
- style: {
- ...commonStyle,
- ...areaData.style,
- },
- propValue: components,
- }
+ const groupComponent = {
+ id: generateID(),
+ component: 'Group',
+ label: '组合',
+ icon: 'zuhe',
+ ...commonAttr,
+ style: {
+ ...commonStyle,
+ ...areaData.style,
+ },
+ propValue: components,
+ }
- createGroupStyle(groupComponent)
+ createGroupStyle(groupComponent)
- store.commit('addComponent', {
- component: groupComponent,
- })
+ store.commit('addComponent', {
+ component: groupComponent,
+ })
- eventBus.$emit('hideArea')
+ eventBus.$emit('hideArea')
- store.commit('batchDeleteComponent', areaData.components)
- store.commit('setCurComponent', {
- component: componentData[componentData.length - 1],
- index: componentData.length - 1,
- })
+ store.commit('batchDeleteComponent', areaData.components)
+ store.commit('setCurComponent', {
+ component: componentData[componentData.length - 1],
+ index: componentData.length - 1,
+ })
- areaData.components = []
- },
+ areaData.components = []
+ },
- // 将已经放到 Group 组件数据删除，也就是在 componentData 中删除，因为它们已经从 componentData 挪到 Group 组件中了
- batchDeleteComponent({ componentData }, deleteData) {
- deleteData.forEach(component => {
- for (let i = 0, len = componentData.length; i < len; i++) {
- if (component.id == componentData[i].id) {
- componentData.splice(i, 1)
- break
- }
- }
- })
- },
+ // 将已经放到 Group 组件数据删除，也就是在 componentData 中删除，因为它们已经从 componentData 挪到 Group 组件中了
+ batchDeleteComponent({ componentData }, deleteData) {
+ deleteData.forEach((component) => {
+ for (let i = 0, len = componentData.length; i < len; i++) {
+ if (component.id == componentData[i].id) {
+ componentData.splice(i, 1)
+ break
+ }
+ }
+ })
+ },
- decompose({ curComponent, editor }) {
- const parentStyle = { ...curComponent.style }
- const components = curComponent.propValue
- const editorRect = editor.getBoundingClientRect()
+ decompose({ curComponent, editor }) {
+ const parentStyle = { ...curComponent.style }
+ const components = curComponent.propValue
+ const editorRect = editor.getBoundingClientRect()
- store.commit('deleteComponent')
- components.forEach(component => {
- decomposeComponent(component, editorRect, parentStyle)
- store.commit('addComponent', { component })
- })
- },
+ store.commit('deleteComponent')
+ components.forEach((component) => {
+ decomposeComponent(component, editorRect, parentStyle)
+ store.commit('addComponent', { component })
+ })
},
+ },
}
diff --git a/src/store/contextmenu.js b/src/store/contextmenu.js
index c54729a..86acdc4 100644
--- a/src/store/contextmenu.js
+++ b/src/store/contextmenu.js
@@ -1,18 +1,18 @@
export default {
- state: {
- menuTop: 0, // 右击菜单数据
- menuLeft: 0,
- menuShow: false,
+ state: {
+ menuTop: 0, // 右击菜单数据
+ menuLeft: 0,
+ menuShow: false,
+ },
+ mutations: {
+ showContextMenu(state, { top, left }) {
+ state.menuShow = true
+ state.menuTop = top
+ state.menuLeft = left
},
- mutations: {
- showContextMenu(state, { top, left }) {
- state.menuShow = true
- state.menuTop = top
- state.menuLeft = left
- },
- hideContextMenu(state) {
- state.menuShow = false
- },
+ hideContextMenu(state) {
+ state.menuShow = false
},
-}
\ No newline at end of file
+ },
+}
diff --git a/src/store/copy.js b/src/store/copy.js
index d4697f3..7a705f2 100644
--- a/src/store/copy.js
+++ b/src/store/copy.js
@@ -4,90 +4,90 @@ import generateID from '@/utils/generateID'
import { deepCopy } from '@/utils/utils'
export default {
- state: {
- copyData: null, // 复制粘贴剪切
- isCut: false,
- },
- mutations: {
- copy(state) {
- if (!state.curComponent) {
- toast('请选择组件')
- return
- }
+ state: {
+ copyData: null, // 复制粘贴剪切
+ isCut: false,
+ },
+ mutations: {
+ copy(state) {
+ if (!state.curComponent) {
+ toast('请选择组件')
+ return
+ }
- // 如果有剪切的数据，需要先还原
- restorePreCutData(state)
- copyData(state)
+ // 如果有剪切的数据，需要先还原
+ restorePreCutData(state)
+ copyData(state)
- state.isCut = false
- },
+ state.isCut = false
+ },
- paste(state, isMouse) {
- if (!state.copyData) {
- toast('请选择组件')
- return
- }
+ paste(state, isMouse) {
+ if (!state.copyData) {
+ toast('请选择组件')
+ return
+ }
- const data = state.copyData.data
+ const data = state.copyData.data
- if (isMouse) {
- data.style.top = state.menuTop
- data.style.left = state.menuLeft
- } else {
- data.style.top += 10
- data.style.left += 10
- }
+ if (isMouse) {
+ data.style.top = state.menuTop
+ data.style.left = state.menuLeft
+ } else {
+ data.style.top += 10
+ data.style.left += 10
+ }
- store.commit('addComponent', { component: deepCopyHelper(data) })
- if (state.isCut) {
- state.copyData = null
- }
- },
+ store.commit('addComponent', { component: deepCopyHelper(data) })
+ if (state.isCut) {
+ state.copyData = null
+ }
+ },
- cut(state) {
- if (!state.curComponent) {
- toast('请选择组件')
- return
- }
+ cut(state) {
+ if (!state.curComponent) {
+ toast('请选择组件')
+ return
+ }
- // 如果重复剪切，需要恢复上一次剪切的数据
- restorePreCutData(state)
- copyData(state)
+ // 如果重复剪切，需要恢复上一次剪切的数据
+ restorePreCutData(state)
+ copyData(state)
- store.commit('deleteComponent')
- state.isCut = true
- },
+ store.commit('deleteComponent')
+ state.isCut = true
},
+ },
}
// 恢复上一次剪切的数据
function restorePreCutData(state) {
- if (state.isCut && state.copyData) {
- const data = deepCopy(state.copyData.data)
- const index = state.copyData.index
- store.commit('addComponent', { component: data, index })
- if (state.curComponentIndex >= index) {
- // 如果当前组件索引大于等于插入索引，需要加一，因为当前组件往后移了一位
- state.curComponentIndex++
- }
+ if (state.isCut && state.copyData) {
+ const data = deepCopy(state.copyData.data)
+ const index = state.copyData.index
+ store.commit('addComponent', { component: data, index })
+ if (state.curComponentIndex >= index) {
+ // 如果当前组件索引大于等于插入索引，需要加一，因为当前组件往后移了一位
+ state.curComponentIndex++
}
+ }
}
function copyData(state) {
- state.copyData = {
- data: deepCopy(state.curComponent),
- index: state.curComponentIndex,
- }
+ state.copyData = {
+ data: deepCopy(state.curComponent),
+ index: state.curComponentIndex,
+ }
}
function deepCopyHelper(data) {
- const result = deepCopy(data)
- result.id = generateID()
- if (result.component === 'Group') {
- result.propValue.forEach((component, i) => {
- result.propValue[i] = deepCopyHelper(component)
- })
- }
+ const result = deepCopy(data)
+ result.id = generateID()
+ if (result.component === 'Group') {
+ result.propValue.forEach((component, i) => {
+ result.propValue[i] = deepCopyHelper(component)
+ })
+ }
- return result
+ return result
}
diff --git a/src/store/event.js b/src/store/event.js
index d6556b3..1599031 100644
--- a/src/store/event.js
+++ b/src/store/event.js
@@ -1,13 +1,13 @@
import Vue from 'vue'
export default {
- mutations: {
- addEvent({ curComponent }, { event, param }) {
- curComponent.events[event] = param
- },
+ mutations: {
+ addEvent({ curComponent }, { event, param }) {
+ curComponent.events[event] = param
+ },
- removeEvent({ curComponent }, event) {
- Vue.delete(curComponent.events, event)
- },
+ removeEvent({ curComponent }, event) {
+ Vue.delete(curComponent.events, event)
},
-}
\ No newline at end of file
+ },
+}
diff --git a/src/store/index.js b/src/store/index.js
index 5a878bf..34f3e6d 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -13,134 +13,135 @@ import align from './align'
Vue.use(Vuex)
const data = {
- state: {
- ...animation.state,
- ...compose.state,
- ...contextmenu.state,
- ...copy.state,
- ...event.state,
- ...layer.state,
- ...snapshot.state,
- ...lock.state,
- lastScale: 100, // 记录快照上次的缩放比例，用于判断是否需要更新快照
- editMode: 'edit', // 编辑器模式 edit preview
- canvasStyleData: { // 页面全局数据
- width: 1200,
- height: 740,
- scale: 100,
- color: '#000',
- opacity: 1,
- background: '#fff',
- fontSize: 14,
- },
- isInEdiotr: false, // 是否在编辑器中，用于判断复制、粘贴组件时是否生效，如果在编辑器外，则无视这些操作
- componentData: [], // 画布组件数据
- curComponent: null,
- curComponentIndex: null,
- // 点击画布时是否点中组件，主要用于取消选中组件用。
- // 如果没点中组件，并且在画布空白处弹起鼠标，则取消当前组件的选中状态
- isClickComponent: false,
- rightList: true,
- isDarkMode: false,
- },
- mutations: {
- ...animation.mutations,
- ...compose.mutations,
- ...contextmenu.mutations,
- ...copy.mutations,
- ...event.mutations,
- ...layer.mutations,
- ...snapshot.mutations,
- ...lock.mutations,
- ...align.mutations,
- aceSetCanvasData(state, value) {
- state.canvasStyleData = value
- },
- setLastScale(state, value) {
- state.lastScale = value
- },
- // 通过json设置组件
- aceSetcurComponent(state, value) {
- for (let i = 0; i < state.componentData.length; i++) {
- if (state.componentData[i].id === value.id) {
- state.componentData.splice(i, 1)
- }
- }
- state.componentData.push(value)
- state.curComponent = value
- },
-
- setClickComponentStatus(state, status) {
- state.isClickComponent = status
- },
-
- isShowRightList(state) {
- state.rightList = !state.rightList
- },
-
- toggleDarkMode(state, sateus) {
- state.isDarkMode = sateus
- state.canvasStyleData.background = sateus ? '#817f7f' : '#fff'
- localStorage.setItem('isDarkMode', JSON.stringify(state.isDarkMode))
- },
-
- setEditMode(state, mode) {
- state.editMode = mode
- },
-
- setInEditorStatus(state, status) {
- state.isInEdiotr = status
- },
-
- setCanvasStyle(state, style) {
- state.canvasStyleData = style
- },
-
- setCurComponent(state, { component, index }) {
- state.curComponent = component
- state.curComponentIndex = index
- },
-
- setShapeStyle({ curComponent }, { top, left, width, height, rotate, padding }) {
- if (top !== undefined) curComponent.style.top = Math.round(top)
- if (left !== undefined) curComponent.style.left = Math.round(left)
- if (width) curComponent.style.width = Math.round(width)
- if (padding) curComponent.style.padding = Math.round(padding)
- if (height) curComponent.style.height = Math.round(height)
- if (rotate) curComponent.style.rotate = Math.round(rotate)
- },
-
- setShapeSingleStyle({ curComponent }, { key, value }) {
- curComponent.style[key] = value
- },
-
- setComponentData(state, componentData = []) {
- Vue.set(state, 'componentData', componentData)
- },
-
- addComponent(state, { component, index }) {
- if (index !== undefined) {
- state.componentData.splice(index, 0, component)
- } else {
- state.componentData.push(component)
- }
- },
-
- deleteComponent(state, index) {
- if (index === undefined) {
- index = state.curComponentIndex
- }
-
- if (index == state.curComponentIndex) {
- state.curComponentIndex = null
- state.curComponent = null
- }
-
- if (/\d/.test(index)) {
- state.componentData.splice(index, 1)
- }
- },
+ state: {
+ ...animation.state,
+ ...compose.state,
+ ...contextmenu.state,
+ ...copy.state,
+ ...event.state,
+ ...layer.state,
+ ...snapshot.state,
+ ...lock.state,
+ lastScale: 100, // 记录快照上次的缩放比例，用于判断是否需要更新快照
+ editMode: 'edit', // 编辑器模式 edit preview
+ canvasStyleData: {
+ // 页面全局数据
+ width: 1200,
+ height: 740,
+ scale: 100,
+ color: '#000',
+ opacity: 1,
+ background: '#fff',
+ fontSize: 14,
},
+ isInEdiotr: false, // 是否在编辑器中，用于判断复制、粘贴组件时是否生效，如果在编辑器外，则无视这些操作
+ componentData: [], // 画布组件数据
+ curComponent: null,
+ curComponentIndex: null,
+ // 点击画布时是否点中组件，主要用于取消选中组件用。
+ // 如果没点中组件，并且在画布空白处弹起鼠标，则取消当前组件的选中状态
+ isClickComponent: false,
+ rightList: true,
+ isDarkMode: false,
+ },
+ mutations: {
+ ...animation.mutations,
+ ...compose.mutations,
+ ...contextmenu.mutations,
+ ...copy.mutations,
+ ...event.mutations,
+ ...layer.mutations,
+ ...snapshot.mutations,
+ ...lock.mutations,
+ ...align.mutations,
+ aceSetCanvasData(state, value) {
+ state.canvasStyleData = value
+ },
+ setLastScale(state, value) {
+ state.lastScale = value
+ },
+ // 通过json设置组件
+ aceSetcurComponent(state, value) {
+ for (let i = 0; i < state.componentData.length; i++) {
+ if (state.componentData[i].id === value.id) {
+ state.componentData.splice(i, 1)
+ }
+ }
+ state.componentData.push(value)
+ state.curComponent = value
+ },
+
+ setClickComponentStatus(state, status) {
+ state.isClickComponent = status
+ },
+
+ isShowRightList(state) {
+ state.rightList = !state.rightList
+ },
+
+ toggleDarkMode(state, sateus) {
+ state.isDarkMode = sateus
+ state.canvasStyleData.background = sateus ? '#817f7f' : '#fff'
+ localStorage.setItem('isDarkMode', JSON.stringify(state.isDarkMode))
+ },
+
+ setEditMode(state, mode) {
+ state.editMode = mode
+ },
+
+ setInEditorStatus(state, status) {
+ state.isInEdiotr = status
+ },
+
+ setCanvasStyle(state, style) {
+ state.canvasStyleData = style
+ },
+
+ setCurComponent(state, { component, index }) {
+ state.curComponent = component
+ state.curComponentIndex = index
+ },
+
+ setShapeStyle({ curComponent }, { top, left, width, height, rotate, padding }) {
+ if (top !== undefined) curComponent.style.top = Math.round(top)
+ if (left !== undefined) curComponent.style.left = Math.round(left)
+ if (width) curComponent.style.width = Math.round(width)
+ if (padding) curComponent.style.padding = Math.round(padding)
+ if (height) curComponent.style.height = Math.round(height)
+ if (rotate) curComponent.style.rotate = Math.round(rotate)
+ },
+
+ setShapeSingleStyle({ curComponent }, { key, value }) {
+ curComponent.style[key] = value
+ },
+
+ setComponentData(state, componentData = []) {
+ Vue.set(state, 'componentData', componentData)
+ },
+
+ addComponent(state, { component, index }) {
+ if (index !== undefined) {
+ state.componentData.splice(index, 0, component)
+ } else {
+ state.componentData.push(component)
+ }
+ },
+
+ deleteComponent(state, index) {
+ if (index === undefined) {
+ index = state.curComponentIndex
+ }
+
+ if (index == state.curComponentIndex) {
+ state.curComponentIndex = null
+ state.curComponent = null
+ }
+
+ if (/\d/.test(index)) {
+ state.componentData.splice(index, 1)
+ }
+ },
+ },
}
export default new Vuex.Store(data)
diff --git a/src/store/layer.js b/src/store/layer.js
index 9c0161c..761ac29 100644
--- a/src/store/layer.js
+++ b/src/store/layer.js
@@ -2,51 +2,51 @@ import { swap } from '@/utils/utils'
import toast from '@/utils/toast'
export default {
- mutations: {
- upComponent(state) {
- const { componentData, curComponentIndex } = state
- // 上移图层 index，表示元素在数组中越往后
- if (curComponentIndex < componentData.length - 1) {
- swap(componentData, curComponentIndex, curComponentIndex + 1)
- state.curComponentIndex = curComponentIndex + 1
- } else {
- toast('已经到顶了')
- }
- },
+ mutations: {
+ upComponent(state) {
+ const { componentData, curComponentIndex } = state
+ // 上移图层 index，表示元素在数组中越往后
+ if (curComponentIndex < componentData.length - 1) {
+ swap(componentData, curComponentIndex, curComponentIndex + 1)
+ state.curComponentIndex = curComponentIndex + 1
+ } else {
+ toast('已经到顶了')
+ }
+ },
- downComponent(state) {
- const { componentData, curComponentIndex } = state
- // 下移图层 index，表示元素在数组中越往前
- if (curComponentIndex > 0) {
- swap(componentData, curComponentIndex, curComponentIndex - 1)
- state.curComponentIndex = curComponentIndex - 1
- } else {
- toast('已经到底了')
- }
- },
+ downComponent(state) {
+ const { componentData, curComponentIndex } = state
+ // 下移图层 index，表示元素在数组中越往前
+ if (curComponentIndex > 0) {
+ swap(componentData, curComponentIndex, curComponentIndex - 1)
+ state.curComponentIndex = curComponentIndex - 1
+ } else {
+ toast('已经到底了')
+ }
+ },
- topComponent(state) {
- const { componentData, curComponentIndex, curComponent } = state
- // 置顶
- if (curComponentIndex < componentData.length - 1) {
- componentData.splice(curComponentIndex, 1)
- componentData.push(curComponent)
- state.curComponentIndex = componentData.length - 1
- } else {
- toast('已经到顶了')
- }
- },
+ topComponent(state) {
+ const { componentData, curComponentIndex, curComponent } = state
+ // 置顶
+ if (curComponentIndex < componentData.length - 1) {
+ componentData.splice(curComponentIndex, 1)
+ componentData.push(curComponent)
+ state.curComponentIndex = componentData.length - 1
+ } else {
+ toast('已经到顶了')
+ }
+ },
- bottomComponent(state) {
- const { componentData, curComponentIndex, curComponent } = state
- // 置底
- if (curComponentIndex > 0) {
- componentData.splice(curComponentIndex, 1)
- componentData.unshift(curComponent)
- state.curComponentIndex = 0
- } else {
- toast('已经到底了')
- }
- },
+ bottomComponent(state) {
+ const { componentData, curComponentIndex, curComponent } = state
+ // 置底
+ if (curComponentIndex > 0) {
+ componentData.splice(curComponentIndex, 1)
+ componentData.unshift(curComponent)
+ state.curComponentIndex = 0
+ } else {
+ toast('已经到底了')
+ }
},
+ },
}
diff --git a/src/store/lock.js b/src/store/lock.js
index ed0c17b..bbf1ae0 100644
--- a/src/store/lock.js
+++ b/src/store/lock.js
@@ -1,11 +1,11 @@
export default {
- mutations: {
- lock({ curComponent }) {
- curComponent.isLock = true
- },
+ mutations: {
+ lock({ curComponent }) {
+ curComponent.isLock = true
+ },
- unlock({ curComponent }) {
- curComponent.isLock = false
- },
+ unlock({ curComponent }) {
+ curComponent.isLock = false
},
-}
\ No newline at end of file
+ },
+}
diff --git a/src/store/snapshot.js b/src/store/snapshot.js
index 785d84a..db35e93 100644
--- a/src/store/snapshot.js
+++ b/src/store/snapshot.js
@@ -5,56 +5,59 @@ import changeComponentsSizeWithScale from '@/utils/changeComponentsSizeWithScale
// 设置画布默认数据 https://github.com/woai3c/visual-drag-demo/issues/92
let defaultcomponentData = []
function getDefaultcomponentData() {
- return JSON.parse(JSON.stringify(defaultcomponentData))
+ return JSON.parse(JSON.stringify(defaultcomponentData))
}
export function setDefaultcomponentData(data = []) {
- defaultcomponentData = data
+ defaultcomponentData = data
}
export default {
- state: {
- snapshotData: [], // 编辑器快照数据
- snapshotIndex: -1, // 快照索引
- },
- mutations: {
- undo(state) {
- if (state.snapshotIndex >= 0) {
- state.snapshotIndex--
- let componentData = deepCopy(state.snapshotData[state.snapshotIndex]) || getDefaultcomponentData()
- if (state.curComponent) {
- // 如果当前组件不在 componentData 中，则置空
- const needClean = !componentData.find(component => state.curComponent.id === component.id)
+ state: {
+ snapshotData: [], // 编辑器快照数据
+ snapshotIndex: -1, // 快照索引
+ },
+ mutations: {
+ undo(state) {
+ if (state.snapshotIndex >= 0) {
+ state.snapshotIndex--
+ let componentData = deepCopy(state.snapshotData[state.snapshotIndex]) || getDefaultcomponentData()
+ if (state.curComponent) {
+ // 如果当前组件不在 componentData 中，则置空
+ const needClean = !componentData.find((component) => state.curComponent.id === component.id)
- if (needClean) {
- store.commit('setCurComponent', {
- component: null,
- index: null,
- })
- }
- }
- componentData = changeComponentsSizeWithScale(state.lastScale, componentData)
- store.commit('setComponentData', componentData)
- }
- },
+ if (needClean) {
+ store.commit('setCurComponent', {
+ component: null,
+ index: null,
+ })
+ }
+ }
+ componentData = changeComponentsSizeWithScale(state.lastScale, componentData)
+ store.commit('setComponentData', componentData)
+ }
+ },
- redo(state) {
- if (state.snapshotIndex < state.snapshotData.length - 1) {
- state.snapshotIndex++
- let componentData = changeComponentsSizeWithScale(state.lastScale, deepCopy(state.snapshotData[state.snapshotIndex]))
- store.commit('setComponentData', componentData)
- }
- },
+ redo(state) {
+ if (state.snapshotIndex < state.snapshotData.length - 1) {
+ state.snapshotIndex++
+ let componentData = changeComponentsSizeWithScale(
+ state.lastScale,
+ deepCopy(state.snapshotData[state.snapshotIndex]),
+ )
+ store.commit('setComponentData', componentData)
+ }
+ },
- recordSnapshot(state) {
- // 添加新的快照
- let copyData = deepCopy(state.componentData)
- copyData.forEach(v => v.lastScale = state.lastScale)
- state.snapshotData[++state.snapshotIndex] = copyData
- // 在 undo 过程中，添加新的快照时，要将它后面的快照清理掉
- if (state.snapshotIndex < state.snapshotData.length - 1) {
- state.snapshotData = state.snapshotData.slice(0, state.snapshotIndex + 1)
- }
- },
+ recordSnapshot(state) {
+ // 添加新的快照
+ let copyData = deepCopy(state.componentData)
+ copyData.forEach((v) => (v.lastScale = state.lastScale))
+ state.snapshotData[++state.snapshotIndex] = copyData
+ // 在 undo 过程中，添加新的快照时，要将它后面的快照清理掉
+ if (state.snapshotIndex < state.snapshotData.length - 1) {
+ state.snapshotData = state.snapshotData.slice(0, state.snapshotIndex + 1)
+ }
},
+ },
}
diff --git a/src/styles/animate.scss b/src/styles/animate.scss
index 1ec0589..393e117 100644
--- a/src/styles/animate.scss
+++ b/src/styles/animate.scss
@@ -16,23 +16,23 @@
53%,
80%,
to {
- -webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1);
- animation-timing-function: cubic-bezier(.215, .61, .355, 1);
+ -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+ animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
40%,
43% {
- -webkit-animation-timing-function: cubic-bezier(.755, .05, .855, .06);
- animation-timing-function: cubic-bezier(.755, .05, .855, .06);
+ -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
+ animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
-webkit-transform: translate3d(0, -30px, 0);
transform: translate3d(0, -30px, 0);
}
70% {
- -webkit-animation-timing-function: cubic-bezier(.755, .05, .855, .06);
- animation-timing-function: cubic-bezier(.755, .05, .855, .06);
+ -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
+ animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
-webkit-transform: translate3d(0, -15px, 0);
transform: translate3d(0, -15px, 0);
}
@@ -49,23 +49,23 @@
53%,
80%,
to {
- -webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1);
- animation-timing-function: cubic-bezier(.215, .61, .355, 1);
+ -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+ animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
40%,
43% {
- -webkit-animation-timing-function: cubic-bezier(.755, .05, .855, .06);
- animation-timing-function: cubic-bezier(.755, .05, .855, .06);
+ -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
+ animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
-webkit-transform: translate3d(0, -30px, 0);
transform: translate3d(0, -30px, 0);
}
70% {
- -webkit-animation-timing-function: cubic-bezier(.755, .05, .855, .06);
- animation-timing-function: cubic-bezier(.755, .05, .855, .06);
+ -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
+ animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
-webkit-transform: translate3d(0, -15px, 0);
transform: translate3d(0, -15px, 0);
}
@@ -162,28 +162,28 @@
}
30% {
- -webkit-transform: scale3d(1.25, .75, 1);
- transform: scale3d(1.25, .75, 1);
+ -webkit-transform: scale3d(1.25, 0.75, 1);
+ transform: scale3d(1.25, 0.75, 1);
}
40% {
- -webkit-transform: scale3d(.75, 1.25, 1);
- transform: scale3d(.75, 1.25, 1);
+ -webkit-transform: scale3d(0.75, 1.25, 1);
+ transform: scale3d(0.75, 1.25, 1);
}
50% {
- -webkit-transform: scale3d(1.15, .85, 1);
- transform: scale3d(1.15, .85, 1);
+ -webkit-transform: scale3d(1.15, 0.85, 1);
+ transform: scale3d(1.15, 0.85, 1);
}
65% {
- -webkit-transform: scale3d(.95, 1.05, 1);
- transform: scale3d(.95, 1.05, 1);
+ -webkit-transform: scale3d(0.95, 1.05, 1);
+ transform: scale3d(0.95, 1.05, 1);
}
75% {
- -webkit-transform: scale3d(1.05, .95, 1);
- transform: scale3d(1.05, .95, 1);
+ -webkit-transform: scale3d(1.05, 0.95, 1);
+ transform: scale3d(1.05, 0.95, 1);
}
to {
@@ -199,28 +199,28 @@
}
30% {
- -webkit-transform: scale3d(1.25, .75, 1);
- transform: scale3d(1.25, .75, 1);
+ -webkit-transform: scale3d(1.25, 0.75, 1);
+ transform: scale3d(1.25, 0.75, 1);
}
40% {
- -webkit-transform: scale3d(.75, 1.25, 1);
- transform: scale3d(.75, 1.25, 1);
+ -webkit-transform: scale3d(0.75, 1.25, 1);
+ transform: scale3d(0.75, 1.25, 1);
}
50% {
- -webkit-transform: scale3d(1.15, .85, 1);
- transform: scale3d(1.15, .85, 1);
+ -webkit-transform: scale3d(1.15, 0.85, 1);
+ transform: scale3d(1.15, 0.85, 1);
}
65% {
- -webkit-transform: scale3d(.95, 1.05, 1);
- transform: scale3d(.95, 1.05, 1);
+ -webkit-transform: scale3d(0.95, 1.05, 1);
+ transform: scale3d(0.95, 1.05, 1);
}
75% {
- -webkit-transform: scale3d(1.05, .95, 1);
- transform: scale3d(1.05, .95, 1);
+ -webkit-transform: scale3d(1.05, 0.95, 1);
+ transform: scale3d(1.05, 0.95, 1);
}
to {
@@ -429,8 +429,8 @@
10%,
20% {
- -webkit-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
- transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
+ -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
+ transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
}
30%,
@@ -462,8 +462,8 @@
10%,
20% {
- -webkit-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
- transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
+ -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
+ transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
}
30%,
@@ -602,18 +602,18 @@
}
66.6% {
- -webkit-transform: skewX(-.78125deg) skewY(-.78125deg);
- transform: skewX(-.78125deg) skewY(-.78125deg);
+ -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg);
+ transform: skewX(-0.78125deg) skewY(-0.78125deg);
}
77.7% {
- -webkit-transform: skewX(.390625deg) skewY(.390625deg);
- transform: skewX(.390625deg) skewY(.390625deg);
+ -webkit-transform: skewX(0.390625deg) skewY(0.390625deg);
+ transform: skewX(0.390625deg) skewY(0.390625deg);
}
88.8% {
- -webkit-transform: skewX(-.1953125deg) skewY(-.1953125deg);
- transform: skewX(-.1953125deg) skewY(-.1953125deg);
+ -webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
+ transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
}
}
@@ -646,18 +646,18 @@
}
66.6% {
- -webkit-transform: skewX(-.78125deg) skewY(-.78125deg);
- transform: skewX(-.78125deg) skewY(-.78125deg);
+ -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg);
+ transform: skewX(-0.78125deg) skewY(-0.78125deg);
}
77.7% {
- -webkit-transform: skewX(.390625deg) skewY(.390625deg);
- transform: skewX(.390625deg) skewY(.390625deg);
+ -webkit-transform: skewX(0.390625deg) skewY(0.390625deg);
+ transform: skewX(0.390625deg) skewY(0.390625deg);
}
88.8% {
- -webkit-transform: skewX(-.1953125deg) skewY(-.1953125deg);
- transform: skewX(-.1953125deg) skewY(-.1953125deg);
+ -webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
+ transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
}
}
@@ -738,14 +738,14 @@
60%,
80%,
to {
- -webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1);
- animation-timing-function: cubic-bezier(.215, .61, .355, 1);
+ -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+ animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}
0% {
opacity: 0;
- -webkit-transform: scale3d(.3, .3, .3);
- transform: scale3d(.3, .3, .3);
+ -webkit-transform: scale3d(0.3, 0.3, 0.3);
+ transform: scale3d(0.3, 0.3, 0.3);
}
20% {
@@ -754,8 +754,8 @@
}
40% {
- -webkit-transform: scale3d(.9, .9, .9);
- transform: scale3d(.9, .9, .9);
+ -webkit-transform: scale3d(0.9, 0.9, 0.9);
+ transform: scale3d(0.9, 0.9, 0.9);
}
60% {
@@ -765,8 +765,8 @@
}
80% {
- -webkit-transform: scale3d(.97, .97, .97);
- transform: scale3d(.97, .97, .97);
+ -webkit-transform: scale3d(0.97, 0.97, 0.97);
+ transform: scale3d(0.97, 0.97, 0.97);
}
to {
@@ -783,14 +783,14 @@
60%,
80%,
to {
- -webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1);
- animation-timing-function: cubic-bezier(.215, .61, .355, 1);
+ -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+ animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}
0% {
opacity: 0;
- -webkit-transform: scale3d(.3, .3, .3);
- transform: scale3d(.3, .3, .3);
+ -webkit-transform: scale3d(0.3, 0.3, 0.3);
+ transform: scale3d(0.3, 0.3, 0.3);
}
20% {
@@ -799,8 +799,8 @@
}
40% {
- -webkit-transform: scale3d(.9, .9, .9);
- transform: scale3d(.9, .9, .9);
+ -webkit-transform: scale3d(0.9, 0.9, 0.9);
+ transform: scale3d(0.9, 0.9, 0.9);
}
60% {
@@ -810,8 +810,8 @@
}
80% {
- -webkit-transform: scale3d(.97, .97, .97);
- transform: scale3d(.97, .97, .97);
+ -webkit-transform: scale3d(0.97, 0.97, 0.97);
+ transform: scale3d(0.97, 0.97, 0.97);
}
to {
@@ -822,8 +822,8 @@
}
.bounceIn {
- -webkit-animation-duration: .75s;
- animation-duration: .75s;
+ -webkit-animation-duration: 0.75s;
+ animation-duration: 0.75s;
-webkit-animation-name: bouncein;
animation-name: bounceIn;
}
@@ -834,8 +834,8 @@
75%,
90%,
to {
- -webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1);
- animation-timing-function: cubic-bezier(.215, .61, .355, 1);
+ -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+ animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}
0% {
@@ -872,8 +872,8 @@
75%,
90%,
to {
- -webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1);
- animation-timing-function: cubic-bezier(.215, .61, .355, 1);
+ -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+ animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}
0% {
@@ -915,8 +915,8 @@
75%,
90%,
to {
- -webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1);
- animation-timing-function: cubic-bezier(.215, .61, .355, 1);
+ -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+ animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}
0% {
@@ -953,8 +953,8 @@
75%,
90%,
to {
- -webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1);
- animation-timing-function: cubic-bezier(.215, .61, .355, 1);
+ -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+ animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}
0% {
@@ -996,8 +996,8 @@
75%,
90%,
to {
- -webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1);
- animation-timing-function: cubic-bezier(.215, .61, .355, 1);
+ -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+ animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}
from {
@@ -1034,8 +1034,8 @@
75%,
90%,
to {
- -webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1);
- animation-timing-function: cubic-bezier(.215, .61, .355, 1);
+ -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+ animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}
from {
@@ -1077,8 +1077,8 @@
75%,
90%,
to {
- -webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1);
- animation-timing-function: cubic-bezier(.215, .61, .355, 1);
+ -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+ animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}
from {
@@ -1115,8 +1115,8 @@
75%,
90%,
to {
- -webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1);
- animation-timing-function: cubic-bezier(.215, .61, .355, 1);
+ -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+ animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}
from {
@@ -1154,8 +1154,8 @@
@-webkit-keyframes bounceOut {
20% {
- -webkit-transform: scale3d(.9, .9, .9);
- transform: scale3d(.9, .9, .9);
+ -webkit-transform: scale3d(0.9, 0.9, 0.9);
+ transform: scale3d(0.9, 0.9, 0.9);
}
50%,
@@ -1167,15 +1167,15 @@
to {
opacity: 0;
- -webkit-transform: scale3d(.3, .3, .3);
- transform: scale3d(.3, .3, .3);
+ -webkit-transform: scale3d(0.3, 0.3, 0.3);
+ transform: scale3d(0.3, 0.3, 0.3);
}
}
@keyframes bounceOut {
20% {
- -webkit-transform: scale3d(.9, .9, .9);
- transform: scale3d(.9, .9, .9);
+ -webkit-transform: scale3d(0.9, 0.9, 0.9);
+ transform: scale3d(0.9, 0.9, 0.9);
}
50%,
@@ -1187,14 +1187,14 @@
to {
opacity: 0;
- -webkit-transform: scale3d(.3, .3, .3);
- transform: scale3d(.3, .3, .3);
+ -webkit-transform: scale3d(0.3, 0.3, 0.3);
+ transform: scale3d(0.3, 0.3, 0.3);
}
}
.bounceOut {
- -webkit-animation-duration: .75s;
- animation-duration: .75s;
+ -webkit-animation-duration: 0.75s;
+ animation-duration: 0.75s;
-webkit-animation-name: bounceout;
animation-name: bounceOut;
}
@@ -1903,51 +1903,35 @@
@-webkit-keyframes flip {
from {
- -webkit-transform:
- perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0)
- rotate3d(0, 1, 0, -360deg);
+ -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, -360deg);
transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, -360deg);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
40% {
- -webkit-transform:
- perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
- rotate3d(0, 1, 0, -190deg);
- transform:
- perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
- rotate3d(0, 1, 0, -190deg);
+ -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
+ transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
50% {
- -webkit-transform:
- perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
- rotate3d(0, 1, 0, -170deg);
- transform:
- perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
- rotate3d(0, 1, 0, -170deg);
+ -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
+ transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
80% {
- -webkit-transform:
- perspective(400px) scale3d(.95, .95, .95) translate3d(0, 0, 0)
- rotate3d(0, 1, 0, 0deg);
- transform:
- perspective(400px) scale3d(.95, .95, .95) translate3d(0, 0, 0)
- rotate3d(0, 1, 0, 0deg);
+ -webkit-transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg);
+ transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
to {
- -webkit-transform:
- perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0)
- rotate3d(0, 1, 0, 0deg);
+ -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg);
transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
@@ -1956,51 +1940,35 @@
@keyframes flip {
from {
- -webkit-transform:
- perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0)
- rotate3d(0, 1, 0, -360deg);
+ -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, -360deg);
transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, -360deg);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
40% {
- -webkit-transform:
- perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
- rotate3d(0, 1, 0, -190deg);
- transform:
- perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
- rotate3d(0, 1, 0, -190deg);
+ -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
+ transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
50% {
- -webkit-transform:
- perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
- rotate3d(0, 1, 0, -170deg);
- transform:
- perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
- rotate3d(0, 1, 0, -170deg);
+ -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
+ transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
80% {
- -webkit-transform:
- perspective(400px) scale3d(.95, .95, .95) translate3d(0, 0, 0)
- rotate3d(0, 1, 0, 0deg);
- transform:
- perspective(400px) scale3d(.95, .95, .95) translate3d(0, 0, 0)
- rotate3d(0, 1, 0, 0deg);
+ -webkit-transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg);
+ transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
to {
- -webkit-transform:
- perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0)
- rotate3d(0, 1, 0, 0deg);
+ -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg);
transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
@@ -2199,8 +2167,8 @@
}
.flipOutX {
- -webkit-animation-duration: .75s;
- animation-duration: .75s;
+ -webkit-animation-duration: 0.75s;
+ animation-duration: 0.75s;
-webkit-animation-name: flipoutx;
animation-name: flipOutX;
-webkit-backface-visibility: visible !important;
@@ -2246,8 +2214,8 @@
}
.flipOutY {
- -webkit-animation-duration: .75s;
- animation-duration: .75s;
+ -webkit-animation-duration: 0.75s;
+ animation-duration: 0.75s;
-webkit-backface-visibility: visible !important;
backface-visibility: visible !important;
-webkit-animation-name: flipouty;
@@ -2812,8 +2780,8 @@
@-webkit-keyframes jackInTheBox {
from {
opacity: 0;
- -webkit-transform: scale(.1) rotate(30deg);
- transform: scale(.1) rotate(30deg);
+ -webkit-transform: scale(0.1) rotate(30deg);
+ transform: scale(0.1) rotate(30deg);
-webkit-transform-origin: center bottom;
transform-origin: center bottom;
}
@@ -2838,8 +2806,8 @@
@keyframes jackInTheBox {
from {
opacity: 0;
- -webkit-transform: scale(.1) rotate(30deg);
- transform: scale(.1) rotate(30deg);
+ -webkit-transform: scale(0.1) rotate(30deg);
+ transform: scale(0.1) rotate(30deg);
-webkit-transform-origin: center bottom;
transform-origin: center bottom;
}
@@ -2935,8 +2903,8 @@
@-webkit-keyframes zoomIn {
from {
opacity: 0;
- -webkit-transform: scale3d(.3, .3, .3);
- transform: scale3d(.3, .3, .3);
+ -webkit-transform: scale3d(0.3, 0.3, 0.3);
+ transform: scale3d(0.3, 0.3, 0.3);
}
50% {
@@ -2947,8 +2915,8 @@
@keyframes zoomIn {
from {
opacity: 0;
- -webkit-transform: scale3d(.3, .3, .3);
- transform: scale3d(.3, .3, .3);
+ -webkit-transform: scale3d(0.3, 0.3, 0.3);
+ transform: scale3d(0.3, 0.3, 0.3);
}
50% {
@@ -2964,36 +2932,36 @@
@-webkit-keyframes zoomInDown {
from {
opacity: 0;
- -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
- transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
- -webkit-animation-timing-function: cubic-bezier(.55, .055, .675, .19);
- animation-timing-function: cubic-bezier(.55, .055, .675, .19);
+ -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
+ transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
+ -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
+ animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
60% {
opacity: 1;
- -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
- transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
- -webkit-animation-timing-function: cubic-bezier(.175, .885, .32, 1);
- animation-timing-function: cubic-bezier(.175, .885, .32, 1);
+ -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
+ transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
+ -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
+ animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
}
}
@keyframes zoomInDown {
from {
opacity: 0;
- -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
- transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
- -webkit-animation-timing-function: cubic-bezier(.55, .055, .675, .19);
- animation-timing-function: cubic-bezier(.55, .055, .675, .19);
+ -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
+ transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
+ -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
+ animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
60% {
opacity: 1;
- -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
- transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
- -webkit-animation-timing-function: cubic-bezier(.175, .885, .32, 1);
- animation-timing-function: cubic-bezier(.175, .885, .32, 1);
+ -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
+ transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
+ -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
+ animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
}
}
@@ -3005,36 +2973,36 @@
@-webkit-keyframes zoomInLeft {
from {
opacity: 0;
- -webkit-transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
- transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
- -webkit-animation-timing-function: cubic-bezier(.55, .055, .675, .19);
- animation-timing-function: cubic-bezier(.55, .055, .675, .19);
+ -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
+ transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
+ -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
+ animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
60% {
opacity: 1;
- -webkit-transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
- transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
- -webkit-animation-timing-function: cubic-bezier(.175, .885, .32, 1);
- animation-timing-function: cubic-bezier(.175, .885, .32, 1);
+ -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
+ transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
+ -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
+ animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
}
}
@keyframes zoomInLeft {
from {
opacity: 0;
- -webkit-transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
- transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
- -webkit-animation-timing-function: cubic-bezier(.55, .055, .675, .19);
- animation-timing-function: cubic-bezier(.55, .055, .675, .19);
+ -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
+ transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
+ -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
+ animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
60% {
opacity: 1;
- -webkit-transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
- transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
- -webkit-animation-timing-function: cubic-bezier(.175, .885, .32, 1);
- animation-timing-function: cubic-bezier(.175, .885, .32, 1);
+ -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
+ transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
+ -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
+ animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
}
}
@@ -3046,36 +3014,36 @@
@-webkit-keyframes zoomInRight {
from {
opacity: 0;
- -webkit-transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);
- transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);
- -webkit-animation-timing-function: cubic-bezier(.55, .055, .675, .19);
- animation-timing-function: cubic-bezier(.55, .055, .675, .19);
+ -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
+ transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
+ -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
+ animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
60% {
opacity: 1;
- -webkit-transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);
- transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);
- -webkit-animation-timing-function: cubic-bezier(.175, .885, .32, 1);
- animation-timing-function: cubic-bezier(.175, .885, .32, 1);
+ -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
+ transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
+ -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
+ animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
}
}
@keyframes zoomInRight {
from {
opacity: 0;
- -webkit-transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);
- transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);
- -webkit-animation-timing-function: cubic-bezier(.55, .055, .675, .19);
- animation-timing-function: cubic-bezier(.55, .055, .675, .19);
+ -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
+ transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
+ -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
+ animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
60% {
opacity: 1;
- -webkit-transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);
- transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);
- -webkit-animation-timing-function: cubic-bezier(.175, .885, .32, 1);
- animation-timing-function: cubic-bezier(.175, .885, .32, 1);
+ -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
+ transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
+ -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
+ animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
}
}
@@ -3087,36 +3055,36 @@
@-webkit-keyframes zoomInUp {
from {
opacity: 0;
- -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
- transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
- -webkit-animation-timing-function: cubic-bezier(.55, .055, .675, .19);
- animation-timing-function: cubic-bezier(.55, .055, .675, .19);
+ -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
+ transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
+ -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
+ animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
60% {
opacity: 1;
- -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
- transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
- -webkit-animation-timing-function: cubic-bezier(.175, .885, .32, 1);
- animation-timing-function: cubic-bezier(.175, .885, .32, 1);
+ -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
+ transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
+ -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
+ animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
}
}
@keyframes zoomInUp {
from {
opacity: 0;
- -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
- transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
- -webkit-animation-timing-function: cubic-bezier(.55, .055, .675, .19);
- animation-timing-function: cubic-bezier(.55, .055, .675, .19);
+ -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
+ transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
+ -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
+ animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
60% {
opacity: 1;
- -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
- transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
- -webkit-animation-timing-function: cubic-bezier(.175, .885, .32, 1);
- animation-timing-function: cubic-bezier(.175, .885, .32, 1);
+ -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
+ transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
+ -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
+ animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
}
}
@@ -3132,8 +3100,8 @@
50% {
opacity: 0;
- -webkit-transform: scale3d(.3, .3, .3);
- transform: scale3d(.3, .3, .3);
+ -webkit-transform: scale3d(0.3, 0.3, 0.3);
+ transform: scale3d(0.3, 0.3, 0.3);
}
to {
@@ -3148,8 +3116,8 @@
50% {
opacity: 0;
- -webkit-transform: scale3d(.3, .3, .3);
- transform: scale3d(.3, .3, .3);
+ -webkit-transform: scale3d(0.3, 0.3, 0.3);
+ transform: scale3d(0.3, 0.3, 0.3);
}
to {
@@ -3165,40 +3133,40 @@
@-webkit-keyframes zoomOutDown {
40% {
opacity: 1;
- -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
- transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
- -webkit-animation-timing-function: cubic-bezier(.55, .055, .675, .19);
- animation-timing-function: cubic-bezier(.55, .055, .675, .19);
+ -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
+ transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
+ -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
+ animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
to {
opacity: 0;
- -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0);
- transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0);
+ -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
+ transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
-webkit-transform-origin: center bottom;
transform-origin: center bottom;
- -webkit-animation-timing-function: cubic-bezier(.175, .885, .32, 1);
- animation-timing-function: cubic-bezier(.175, .885, .32, 1);
+ -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
+ animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
}
}
@keyframes zoomOutDown {
40% {
opacity: 1;
- -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
- transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
- -webkit-animation-timing-function: cubic-bezier(.55, .055, .675, .19);
- animation-timing-function: cubic-bezier(.55, .055, .675, .19);
+ -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
+ transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
+ -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
+ animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
to {
opacity: 0;
- -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0);
- transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0);
+ -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
+ transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
-webkit-transform-origin: center bottom;
transform-origin: center bottom;
- -webkit-animation-timing-function: cubic-bezier(.175, .885, .32, 1);
- animation-timing-function: cubic-bezier(.175, .885, .32, 1);
+ -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
+ animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
}
}
@@ -3210,14 +3178,14 @@
@-webkit-keyframes zoomOutLeft {
40% {
opacity: 1;
- -webkit-transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0);
- transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0);
+ -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
+ transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
}
to {
opacity: 0;
- -webkit-transform: scale(.1) translate3d(-2000px, 0, 0);
- transform: scale(.1) translate3d(-2000px, 0, 0);
+ -webkit-transform: scale(0.1) translate3d(-2000px, 0, 0);
+ transform: scale(0.1) translate3d(-2000px, 0, 0);
-webkit-transform-origin: left center;
transform-origin: left center;
}
@@ -3226,14 +3194,14 @@
@keyframes zoomOutLeft {
40% {
opacity: 1;
- -webkit-transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0);
- transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0);
+ -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
+ transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
}
to {
opacity: 0;
- -webkit-transform: scale(.1) translate3d(-2000px, 0, 0);
- transform: scale(.1) translate3d(-2000px, 0, 0);
+ -webkit-transform: scale(0.1) translate3d(-2000px, 0, 0);
+ transform: scale(0.1) translate3d(-2000px, 0, 0);
-webkit-transform-origin: left center;
transform-origin: left center;
}
@@ -3247,14 +3215,14 @@
@-webkit-keyframes zoomOutRight {
40% {
opacity: 1;
- -webkit-transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0);
- transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0);
+ -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);
+ transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);
}
to {
opacity: 0;
- -webkit-transform: scale(.1) translate3d(2000px, 0, 0);
- transform: scale(.1) translate3d(2000px, 0, 0);
+ -webkit-transform: scale(0.1) translate3d(2000px, 0, 0);
+ transform: scale(0.1) translate3d(2000px, 0, 0);
-webkit-transform-origin: right center;
transform-origin: right center;
}
@@ -3263,14 +3231,14 @@
@keyframes zoomOutRight {
40% {
opacity: 1;
- -webkit-transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0);
- transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0);
+ -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);
+ transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);
}
to {
opacity: 0;
- -webkit-transform: scale(.1) translate3d(2000px, 0, 0);
- transform: scale(.1) translate3d(2000px, 0, 0);
+ -webkit-transform: scale(0.1) translate3d(2000px, 0, 0);
+ transform: scale(0.1) translate3d(2000px, 0, 0);
-webkit-transform-origin: right center;
transform-origin: right center;
}
@@ -3284,40 +3252,40 @@
@-webkit-keyframes zoomOutUp {
40% {
opacity: 1;
- -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
- transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
- -webkit-animation-timing-function: cubic-bezier(.55, .055, .675, .19);
- animation-timing-function: cubic-bezier(.55, .055, .675, .19);
+ -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
+ transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
+ -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
+ animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
to {
opacity: 0;
- -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0);
- transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0);
+ -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
+ transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
-webkit-transform-origin: center bottom;
transform-origin: center bottom;
- -webkit-animation-timing-function: cubic-bezier(.175, .885, .32, 1);
- animation-timing-function: cubic-bezier(.175, .885, .32, 1);
+ -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
+ animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
}
}
@keyframes zoomOutUp {
40% {
opacity: 1;
- -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
- transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
- -webkit-animation-timing-function: cubic-bezier(.55, .055, .675, .19);
- animation-timing-function: cubic-bezier(.55, .055, .675, .19);
+ -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
+ transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
+ -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
+ animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
to {
opacity: 0;
- -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0);
- transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0);
+ -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
+ transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
-webkit-transform-origin: center bottom;
transform-origin: center bottom;
- -webkit-animation-timing-function: cubic-bezier(.175, .885, .32, 1);
- animation-timing-function: cubic-bezier(.175, .885, .32, 1);
+ -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
+ animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
}
}
diff --git a/src/styles/global.scss b/src/styles/global.scss
index 35fa45d..197a95f 100644
--- a/src/styles/global.scss
+++ b/src/styles/global.scss
@@ -105,7 +105,7 @@
position: relative;
z-index: 99;
left: 20px;
- transition: all .5s ease-in-out;
+ transition: all 0.5s ease-in-out;
.el-icon-moon::before {
color: #fff;
@@ -126,7 +126,7 @@
position: relative;
z-index: 99;
right: 20px;
- transition: all .5s ease-in-out;
+ transition: all 0.5s ease-in-out;
.el-icon-sunny::before {
background: #00000069;
diff --git a/src/styles/variable.scss b/src/styles/variable.scss
index a78745f..bcef43a 100644
--- a/src/styles/variable.scss
+++ b/src/styles/variable.scss
@@ -1 +1 @@
-$animation-time: var(--time, 1s); // 动画时长
+$animation-time: var(--time, 1s);
diff --git a/src/utils/animationClassData.js b/src/utils/animationClassData.js
index b414891..4aec6a8 100644
--- a/src/utils/animationClassData.js
+++ b/src/utils/animationClassData.js
@@ -1,103 +1,103 @@
const animationClassData = [
- {
- label: '进入',
- children: [
- { label: '渐显', value: 'fadeIn' },
- { label: '向右进入', value: 'fadeInLeft' },
- { label: '向左进入', value: 'fadeInRight' },
- { label: '向上进入', value: 'fadeInUp' },
- { label: '向下进入', value: 'fadeInDown' },
- { label: '向右长距进入', value: 'fadeInLeftBig' },
- { label: '向左长距进入', value: 'fadeInRightBig' },
- { label: '向上长距进入', value: 'fadeInUpBig' },
- { label: '向下长距进入', value: 'fadeInDownBig' },
- { label: '旋转进入', value: 'rotateIn' },
- { label: '左顺时针旋转', value: 'rotateInDownLeft' },
- { label: '右逆时针旋转', value: 'rotateInDownRight' },
- { label: '左逆时针旋转', value: 'rotateInUpLeft' },
- { label: '右逆时针旋转', value: 'rotateInUpRight' },
- { label: '弹入', value: 'bounceIn' },
- { label: '向右弹入', value: 'bounceInLeft' },
- { label: '向左弹入', value: 'bounceInRight' },
- { label: '向上弹入', value: 'bounceInUp' },
- { label: '向下弹入', value: 'bounceInDown' },
- { label: '光速从右进入', value: 'lightSpeedIn' },
- { label: '光速从右退出', value: 'lightSpeedOut' },
- { label: '中心X轴旋转', value: 'flipInX' },
- { label: '中心Y轴旋转', value: 'flipInY' },
- { label: '左长半径旋转', value: 'rollIn' },
- { label: '由小变大进入', value: 'zoomIn' },
- { label: '左变大进入', value: 'zoomInLeft' },
- { label: '右变大进入', value: 'zoomInRight' },
- { label: '向上变大进入', value: 'zoomInUp' },
- { label: '向下变大进入', value: 'zoomInDown' },
- { label: '向右滑动展开', value: 'slideInLeft' },
- { label: '向左滑动展开', value: 'slideInRight' },
- { label: '向上滑动展开', value: 'slideInUp' },
- { label: '向下滑动展开', value: 'slideInDown' },
- ],
- },
- {
- label: '强调',
- children: [
- { label: '弹跳', value: 'bounce' },
- { label: '闪烁', value: 'flash' },
- { label: '放大缩小', value: 'pulse' },
- { label: '放大缩小弹簧', value: 'rubberBand' },
- { label: '左右晃动', value: 'headShake' },
- { label: '左右扇形摇摆', value: 'swing' },
- { label: '放大晃动缩小', value: 'tada' },
- { label: '扇形摇摆', value: 'wobble' },
- { label: '左右上下晃动', value: 'jello' },
- { label: 'Y轴旋转', value: 'flip' },
- ],
- },
- {
- label: '退出',
- children: [
- { label: '渐隐', value: 'fadeOut' },
- { label: '向左退出', value: 'fadeOutLeft' },
- { label: '向右退出', value: 'fadeOutRight' },
- { label: '向上退出', value: 'fadeOutUp' },
- { label: '向下退出', value: 'fadeOutDown' },
- { label: '向左长距退出', value: 'fadeOutLeftBig' },
- { label: '向右长距退出', value: 'fadeOutRightBig' },
- { label: '向上长距退出', value: 'fadeOutUpBig' },
- { label: '向下长距退出', value: 'fadeOutDownBig' },
- { label: '旋转退出', value: 'rotateOut' },
- { label: '左顺时针旋转', value: 'rotateOutDownLeft' },
- { label: '右逆时针旋转', value: 'rotateOutDownRight' },
- { label: '左逆时针旋转', value: 'rotateOutUpLeft' },
- { label: '右逆时针旋转', value: 'rotateOutUpRight' },
- { label: '弹出', value: 'bounceOut' },
- { label: '向左弹出', value: 'bounceOutLeft' },
- { label: '向右弹出', value: 'bounceOutRight' },
- { label: '向上弹出', value: 'bounceOutUp' },
- { label: '向下弹出', value: 'bounceOutDown' },
- { label: '中心X轴旋转', value: 'flipOutX' },
- { label: '中心Y轴旋转', value: 'flipOutY' },
- { label: '左长半径旋转', value: 'rollOut' },
- { label: '由小变大退出', value: 'zoomOut' },
- { label: '左变大退出', value: 'zoomOutLeft' },
- { label: '右变大退出', value: 'zoomOutRight' },
- { label: '向上变大退出', value: 'zoomOutUp' },
- { label: '向下变大退出', value: 'zoomOutDown' },
- { label: '向左滑动收起', value: 'slideOutLeft' },
- { label: '向右滑动收起', value: 'slideOutRight' },
- { label: '向上滑动收起', value: 'slideOutUp' },
- { label: '向下滑动收起', value: 'slideOutDown' },
- ],
- },
+ {
+ label: '进入',
+ children: [
+ { label: '渐显', value: 'fadeIn' },
+ { label: '向右进入', value: 'fadeInLeft' },
+ { label: '向左进入', value: 'fadeInRight' },
+ { label: '向上进入', value: 'fadeInUp' },
+ { label: '向下进入', value: 'fadeInDown' },
+ { label: '向右长距进入', value: 'fadeInLeftBig' },
+ { label: '向左长距进入', value: 'fadeInRightBig' },
+ { label: '向上长距进入', value: 'fadeInUpBig' },
+ { label: '向下长距进入', value: 'fadeInDownBig' },
+ { label: '旋转进入', value: 'rotateIn' },
+ { label: '左顺时针旋转', value: 'rotateInDownLeft' },
+ { label: '右逆时针旋转', value: 'rotateInDownRight' },
+ { label: '左逆时针旋转', value: 'rotateInUpLeft' },
+ { label: '右逆时针旋转', value: 'rotateInUpRight' },
+ { label: '弹入', value: 'bounceIn' },
+ { label: '向右弹入', value: 'bounceInLeft' },
+ { label: '向左弹入', value: 'bounceInRight' },
+ { label: '向上弹入', value: 'bounceInUp' },
+ { label: '向下弹入', value: 'bounceInDown' },
+ { label: '光速从右进入', value: 'lightSpeedIn' },
+ { label: '光速从右退出', value: 'lightSpeedOut' },
+ { label: '中心X轴旋转', value: 'flipInX' },
+ { label: '中心Y轴旋转', value: 'flipInY' },
+ { label: '左长半径旋转', value: 'rollIn' },
+ { label: '由小变大进入', value: 'zoomIn' },
+ { label: '左变大进入', value: 'zoomInLeft' },
+ { label: '右变大进入', value: 'zoomInRight' },
+ { label: '向上变大进入', value: 'zoomInUp' },
+ { label: '向下变大进入', value: 'zoomInDown' },
+ { label: '向右滑动展开', value: 'slideInLeft' },
+ { label: '向左滑动展开', value: 'slideInRight' },
+ { label: '向上滑动展开', value: 'slideInUp' },
+ { label: '向下滑动展开', value: 'slideInDown' },
+ ],
+ },
+ {
+ label: '强调',
+ children: [
+ { label: '弹跳', value: 'bounce' },
+ { label: '闪烁', value: 'flash' },
+ { label: '放大缩小', value: 'pulse' },
+ { label: '放大缩小弹簧', value: 'rubberBand' },
+ { label: '左右晃动', value: 'headShake' },
+ { label: '左右扇形摇摆', value: 'swing' },
+ { label: '放大晃动缩小', value: 'tada' },
+ { label: '扇形摇摆', value: 'wobble' },
+ { label: '左右上下晃动', value: 'jello' },
+ { label: 'Y轴旋转', value: 'flip' },
+ ],
+ },
+ {
+ label: '退出',
+ children: [
+ { label: '渐隐', value: 'fadeOut' },
+ { label: '向左退出', value: 'fadeOutLeft' },
+ { label: '向右退出', value: 'fadeOutRight' },
+ { label: '向上退出', value: 'fadeOutUp' },
+ { label: '向下退出', value: 'fadeOutDown' },
+ { label: '向左长距退出', value: 'fadeOutLeftBig' },
+ { label: '向右长距退出', value: 'fadeOutRightBig' },
+ { label: '向上长距退出', value: 'fadeOutUpBig' },
+ { label: '向下长距退出', value: 'fadeOutDownBig' },
+ { label: '旋转退出', value: 'rotateOut' },
+ { label: '左顺时针旋转', value: 'rotateOutDownLeft' },
+ { label: '右逆时针旋转', value: 'rotateOutDownRight' },
+ { label: '左逆时针旋转', value: 'rotateOutUpLeft' },
+ { label: '右逆时针旋转', value: 'rotateOutUpRight' },
+ { label: '弹出', value: 'bounceOut' },
+ { label: '向左弹出', value: 'bounceOutLeft' },
+ { label: '向右弹出', value: 'bounceOutRight' },
+ { label: '向上弹出', value: 'bounceOutUp' },
+ { label: '向下弹出', value: 'bounceOutDown' },
+ { label: '中心X轴旋转', value: 'flipOutX' },
+ { label: '中心Y轴旋转', value: 'flipOutY' },
+ { label: '左长半径旋转', value: 'rollOut' },
+ { label: '由小变大退出', value: 'zoomOut' },
+ { label: '左变大退出', value: 'zoomOutLeft' },
+ { label: '右变大退出', value: 'zoomOutRight' },
+ { label: '向上变大退出', value: 'zoomOutUp' },
+ { label: '向下变大退出', value: 'zoomOutDown' },
+ { label: '向左滑动收起', value: 'slideOutLeft' },
+ { label: '向右滑动收起', value: 'slideOutRight' },
+ { label: '向上滑动收起', value: 'slideOutUp' },
+ { label: '向下滑动收起', value: 'slideOutDown' },
+ ],
+ },
]
-animationClassData.forEach(item => {
- item.children.forEach(e => {
- // 是否在运行动画
- e.pending = false
+animationClassData.forEach((item) => {
+ item.children.forEach((e) => {
+ // 是否在运行动画
+ e.pending = false
- // 动画默认运行时间
- e.animationTime = 1
- })
+ // 动画默认运行时间
+ e.animationTime = 1
+ })
})
-export default animationClassData
\ No newline at end of file
+export default animationClassData
diff --git a/src/utils/attr.js b/src/utils/attr.js
index 84f4a45..c63e129 100644
--- a/src/utils/attr.js
+++ b/src/utils/attr.js
@@ -1,90 +1,90 @@
export const styleData = [
- { key: 'left', label: 'x 坐标' },
- { key: 'top', label: 'y 坐标' },
- { key: 'rotate', label: '旋转角度' },
- { key: 'width', label: '宽' },
- { key: 'height', label: '高' },
- { key: 'color', label: '颜色' },
- { key: 'backgroundColor', label: '背景色' },
- { key: 'borderWidth', label: '边框宽度' },
- { key: 'borderStyle', label: '边框风格' },
- { key: 'borderColor', label: '边框颜色' },
- { key: 'borderRadius', label: '边框半径' },
- { key: 'fontSize', label: '字体大小' },
- { key: 'fontWeight', label: '字体粗细' },
- { key: 'lineHeight', label: '行高' },
- { key: 'letterSpacing', label: '字间距' },
- { key: 'textAlign', label: '左右对齐' },
- { key: 'verticalAlign', label: '上下对齐' },
- { key: 'opacity', label: '不透明度' },
+ { key: 'left', label: 'x 坐标' },
+ { key: 'top', label: 'y 坐标' },
+ { key: 'rotate', label: '旋转角度' },
+ { key: 'width', label: '宽' },
+ { key: 'height', label: '高' },
+ { key: 'color', label: '颜色' },
+ { key: 'backgroundColor', label: '背景色' },
+ { key: 'borderWidth', label: '边框宽度' },
+ { key: 'borderStyle', label: '边框风格' },
+ { key: 'borderColor', label: '边框颜色' },
+ { key: 'borderRadius', label: '边框半径' },
+ { key: 'fontSize', label: '字体大小' },
+ { key: 'fontWeight', label: '字体粗细' },
+ { key: 'lineHeight', label: '行高' },
+ { key: 'letterSpacing', label: '字间距' },
+ { key: 'textAlign', label: '左右对齐' },
+ { key: 'verticalAlign', label: '上下对齐' },
+ { key: 'opacity', label: '不透明度' },
]
export const styleMap = {
- left: 'x 坐标',
- top: 'y 坐标',
- rotate: '旋转角度',
- width: '宽',
- height: '高',
- color: '颜色',
- backgroundColor: '背景色',
- borderWidth: '边框宽度',
- borderStyle: '边框风格',
- borderColor: '边框颜色',
- borderRadius: '边框半径',
- fontSize: '字体大小',
- fontWeight: '字体粗细',
- lineHeight: '行高',
- letterSpacing: '字间距',
- textAlign: '左右对齐',
- verticalAlign: '上下对齐',
- opacity: '不透明度',
+ left: 'x 坐标',
+ top: 'y 坐标',
+ rotate: '旋转角度',
+ width: '宽',
+ height: '高',
+ color: '颜色',
+ backgroundColor: '背景色',
+ borderWidth: '边框宽度',
+ borderStyle: '边框风格',
+ borderColor: '边框颜色',
+ borderRadius: '边框半径',
+ fontSize: '字体大小',
+ fontWeight: '字体粗细',
+ lineHeight: '行高',
+ letterSpacing: '字间距',
+ textAlign: '左右对齐',
+ verticalAlign: '上下对齐',
+ opacity: '不透明度',
}
export const textAlignOptions = [
- {
- label: '左对齐',
- value: 'left',
- },
- {
- label: '居中',
- value: 'center',
- },
- {
- label: '右对齐',
- value: 'right',
- },
+ {
+ label: '左对齐',
+ value: 'left',
+ },
+ {
+ label: '居中',
+ value: 'center',
+ },
+ {
+ label: '右对齐',
+ value: 'right',
+ },
]
export const borderStyleOptions = [
- {
- label: '实线',
- value: 'solid',
- },
- {
- label: '虚线',
- value: 'dashed',
- },
+ {
+ label: '实线',
+ value: 'solid',
+ },
+ {
+ label: '虚线',
+ value: 'dashed',
+ },
]
export const verticalAlignOptions = [
- {
- label: '上对齐',
- value: 'top',
- },
- {
- label: '居中对齐',
- value: 'middle',
- },
- {
- label: '下对齐',
- value: 'bottom',
- },
+ {
+ label: '上对齐',
+ value: 'top',
+ },
+ {
+ label: '居中对齐',
+ value: 'middle',
+ },
+ {
+ label: '下对齐',
+ value: 'bottom',
+ },
]
export const selectKey = ['textAlign', 'borderStyle', 'verticalAlign']
export const optionMap = {
- textAlign: textAlignOptions,
- borderStyle: borderStyleOptions,
- verticalAlign: verticalAlignOptions,
+ textAlign: textAlignOptions,
+ borderStyle: borderStyleOptions,
+ verticalAlign: verticalAlignOptions,
}
diff --git a/src/utils/calculateComponentPositonAndSize.js b/src/utils/calculateComponentPositonAndSize.js
index 08c2162..0e92320 100644
--- a/src/utils/calculateComponentPositonAndSize.js
+++ b/src/utils/calculateComponentPositonAndSize.js
@@ -2,271 +2,302 @@
import { calculateRotatedPointCoordinate, getCenterPoint } from './translate'
const funcs = {
- lt: calculateLeftTop,
- t: calculateTop,
- rt: calculateRightTop,
- r: calculateRight,
- rb: calculateRightBottom,
- b: calculateBottom,
- lb: calculateLeftBottom,
- l: calculateLeft,
+ lt: calculateLeftTop,
+ t: calculateTop,
+ rt: calculateRightTop,
+ r: calculateRight,
+ rb: calculateRightBottom,
+ b: calculateBottom,
+ lb: calculateLeftBottom,
+ l: calculateLeft,
}
function calculateLeftTop(style, curPositon, proportion, needLockProportion, pointInfo) {
- const { symmetricPoint } = pointInfo
- let newCenterPoint = getCenterPoint(curPositon, symmetricPoint)
- let newTopLeftPoint = calculateRotatedPointCoordinate(curPositon, newCenterPoint, -style.rotate)
- let newBottomRightPoint = calculateRotatedPointCoordinate(symmetricPoint, newCenterPoint, -style.rotate)
-
- let newWidth = newBottomRightPoint.x - newTopLeftPoint.x
- let newHeight = newBottomRightPoint.y - newTopLeftPoint.y
-
- if (needLockProportion) {
- if (newWidth / newHeight > proportion) {
- newTopLeftPoint.x += Math.abs(newWidth - newHeight * proportion)
- newWidth = newHeight * proportion
- } else {
- newTopLeftPoint.y += Math.abs(newHeight - newWidth / proportion)
- newHeight = newWidth / proportion
- }
-
- // 由于现在求的未旋转前的坐标是以没按比例缩减宽高前的坐标来计算的
- // 所以缩减宽高后，需要按照原来的中心点旋转回去，获得缩减宽高并旋转后对应的坐标
- // 然后以这个坐标和对称点获得新的中心点，并重新计算未旋转前的坐标
- const rotatedTopLeftPoint = calculateRotatedPointCoordinate(newTopLeftPoint, newCenterPoint, style.rotate)
- newCenterPoint = getCenterPoint(rotatedTopLeftPoint, symmetricPoint)
- newTopLeftPoint = calculateRotatedPointCoordinate(rotatedTopLeftPoint, newCenterPoint, -style.rotate)
- newBottomRightPoint = calculateRotatedPointCoordinate(symmetricPoint, newCenterPoint, -style.rotate)
-
- newWidth = newBottomRightPoint.x - newTopLeftPoint.x
- newHeight = newBottomRightPoint.y - newTopLeftPoint.y
- }
+ const { symmetricPoint } = pointInfo
+ let newCenterPoint = getCenterPoint(curPositon, symmetricPoint)
+ let newTopLeftPoint = calculateRotatedPointCoordinate(curPositon, newCenterPoint, -style.rotate)
+ let newBottomRightPoint = calculateRotatedPointCoordinate(symmetricPoint, newCenterPoint, -style.rotate)
+
+ let newWidth = newBottomRightPoint.x - newTopLeftPoint.x
+ let newHeight = newBottomRightPoint.y - newTopLeftPoint.y
- if (newWidth > 0 && newHeight > 0) {
- style.width = Math.round(newWidth)
- style.height = Math.round(newHeight)
- style.left = Math.round(newTopLeftPoint.x)
- style.top = Math.round(newTopLeftPoint.y)
+ if (needLockProportion) {
+ if (newWidth / newHeight > proportion) {
+ newTopLeftPoint.x += Math.abs(newWidth - newHeight * proportion)
+ newWidth = newHeight * proportion
+ } else {
+ newTopLeftPoint.y += Math.abs(newHeight - newWidth / proportion)
+ newHeight = newWidth / proportion
}
+
+ // 由于现在求的未旋转前的坐标是以没按比例缩减宽高前的坐标来计算的
+ // 所以缩减宽高后，需要按照原来的中心点旋转回去，获得缩减宽高并旋转后对应的坐标
+ // 然后以这个坐标和对称点获得新的中心点，并重新计算未旋转前的坐标
+ const rotatedTopLeftPoint = calculateRotatedPointCoordinate(newTopLeftPoint, newCenterPoint, style.rotate)
+ newCenterPoint = getCenterPoint(rotatedTopLeftPoint, symmetricPoint)
+ newTopLeftPoint = calculateRotatedPointCoordinate(rotatedTopLeftPoint, newCenterPoint, -style.rotate)
+ newBottomRightPoint = calculateRotatedPointCoordinate(symmetricPoint, newCenterPoint, -style.rotate)
+
+ newWidth = newBottomRightPoint.x - newTopLeftPoint.x
+ newHeight = newBottomRightPoint.y - newTopLeftPoint.y
+ }
+
+ if (newWidth > 0 && newHeight > 0) {
+ style.width = Math.round(newWidth)
+ style.height = Math.round(newHeight)
+ style.left = Math.round(newTopLeftPoint.x)
+ style.top = Math.round(newTopLeftPoint.y)
+ }
}
function calculateRightTop(style, curPositon, proportion, needLockProportion, pointInfo) {
- const { symmetricPoint } = pointInfo
- let newCenterPoint = getCenterPoint(curPositon, symmetricPoint)
- let newTopRightPoint = calculateRotatedPointCoordinate(curPositon, newCenterPoint, -style.rotate)
- let newBottomLeftPoint = calculateRotatedPointCoordinate(symmetricPoint, newCenterPoint, -style.rotate)
-
- let newWidth = newTopRightPoint.x - newBottomLeftPoint.x
- let newHeight = newBottomLeftPoint.y - newTopRightPoint.y
-
- if (needLockProportion) {
- if (newWidth / newHeight > proportion) {
- newTopRightPoint.x -= Math.abs(newWidth - newHeight * proportion)
- newWidth = newHeight * proportion
- } else {
- newTopRightPoint.y += Math.abs(newHeight - newWidth / proportion)
- newHeight = newWidth / proportion
- }
-
- const rotatedTopRightPoint = calculateRotatedPointCoordinate(newTopRightPoint, newCenterPoint, style.rotate)
- newCenterPoint = getCenterPoint(rotatedTopRightPoint, symmetricPoint)
- newTopRightPoint = calculateRotatedPointCoordinate(rotatedTopRightPoint, newCenterPoint, -style.rotate)
- newBottomLeftPoint = calculateRotatedPointCoordinate(symmetricPoint, newCenterPoint, -style.rotate)
-
- newWidth = newTopRightPoint.x - newBottomLeftPoint.x
- newHeight = newBottomLeftPoint.y - newTopRightPoint.y
- }
-
- if (newWidth > 0 && newHeight > 0) {
- style.width = Math.round(newWidth)
- style.height = Math.round(newHeight)
- style.left = Math.round(newBottomLeftPoint.x)
- style.top = Math.round(newTopRightPoint.y)
+ const { symmetricPoint } = pointInfo
+ let newCenterPoint = getCenterPoint(curPositon, symmetricPoint)
+ let newTopRightPoint = calculateRotatedPointCoordinate(curPositon, newCenterPoint, -style.rotate)
+ let newBottomLeftPoint = calculateRotatedPointCoordinate(symmetricPoint, newCenterPoint, -style.rotate)
+
+ let newWidth = newTopRightPoint.x - newBottomLeftPoint.x
+ let newHeight = newBottomLeftPoint.y - newTopRightPoint.y
+
+ if (needLockProportion) {
+ if (newWidth / newHeight > proportion) {
+ newTopRightPoint.x -= Math.abs(newWidth - newHeight * proportion)
+ newWidth = newHeight * proportion
+ } else {
+ newTopRightPoint.y += Math.abs(newHeight - newWidth / proportion)
+ newHeight = newWidth / proportion
}
+
+ const rotatedTopRightPoint = calculateRotatedPointCoordinate(newTopRightPoint, newCenterPoint, style.rotate)
+ newCenterPoint = getCenterPoint(rotatedTopRightPoint, symmetricPoint)
+ newTopRightPoint = calculateRotatedPointCoordinate(rotatedTopRightPoint, newCenterPoint, -style.rotate)
+ newBottomLeftPoint = calculateRotatedPointCoordinate(symmetricPoint, newCenterPoint, -style.rotate)
+
+ newWidth = newTopRightPoint.x - newBottomLeftPoint.x
+ newHeight = newBottomLeftPoint.y - newTopRightPoint.y
+ }
+
+ if (newWidth > 0 && newHeight > 0) {
+ style.width = Math.round(newWidth)
+ style.height = Math.round(newHeight)
+ style.left = Math.round(newBottomLeftPoint.x)
+ style.top = Math.round(newTopRightPoint.y)
+ }
}
-
+
function calculateRightBottom(style, curPositon, proportion, needLockProportion, pointInfo) {
- const { symmetricPoint } = pointInfo
- let newCenterPoint = getCenterPoint(curPositon, symmetricPoint)
- let newTopLeftPoint = calculateRotatedPointCoordinate(symmetricPoint, newCenterPoint, -style.rotate)
- let newBottomRightPoint = calculateRotatedPointCoordinate(curPositon, newCenterPoint, -style.rotate)
-
- let newWidth = newBottomRightPoint.x - newTopLeftPoint.x
- let newHeight = newBottomRightPoint.y - newTopLeftPoint.y
-
- if (needLockProportion) {
- if (newWidth / newHeight > proportion) {
- newBottomRightPoint.x -= Math.abs(newWidth - newHeight * proportion)
- newWidth = newHeight * proportion
- } else {
- newBottomRightPoint.y -= Math.abs(newHeight - newWidth / proportion)
- newHeight = newWidth / proportion
- }
-
- const rotatedBottomRightPoint = calculateRotatedPointCoordinate(newBottomRightPoint, newCenterPoint, style.rotate)
- newCenterPoint = getCenterPoint(rotatedBottomRightPoint, symmetricPoint)
- newTopLeftPoint = calculateRotatedPointCoordinate(symmetricPoint, newCenterPoint, -style.rotate)
- newBottomRightPoint = calculateRotatedPointCoordinate(rotatedBottomRightPoint, newCenterPoint, -style.rotate)
-
- newWidth = newBottomRightPoint.x - newTopLeftPoint.x
- newHeight = newBottomRightPoint.y - newTopLeftPoint.y
- }
+ const { symmetricPoint } = pointInfo
+ let newCenterPoint = getCenterPoint(curPositon, symmetricPoint)
+ let newTopLeftPoint = calculateRotatedPointCoordinate(symmetricPoint, newCenterPoint, -style.rotate)
+ let newBottomRightPoint = calculateRotatedPointCoordinate(curPositon, newCenterPoint, -style.rotate)
+
+ let newWidth = newBottomRightPoint.x - newTopLeftPoint.x
+ let newHeight = newBottomRightPoint.y - newTopLeftPoint.y
- if (newWidth > 0 && newHeight > 0) {
- style.width = Math.round(newWidth)
- style.height = Math.round(newHeight)
- style.left = Math.round(newTopLeftPoint.x)
- style.top = Math.round(newTopLeftPoint.y)
+ if (needLockProportion) {
+ if (newWidth / newHeight > proportion) {
+ newBottomRightPoint.x -= Math.abs(newWidth - newHeight * proportion)
+ newWidth = newHeight * proportion
+ } else {
+ newBottomRightPoint.y -= Math.abs(newHeight - newWidth / proportion)
+ newHeight = newWidth / proportion
}
+
+ const rotatedBottomRightPoint = calculateRotatedPointCoordinate(newBottomRightPoint, newCenterPoint, style.rotate)
+ newCenterPoint = getCenterPoint(rotatedBottomRightPoint, symmetricPoint)
+ newTopLeftPoint = calculateRotatedPointCoordinate(symmetricPoint, newCenterPoint, -style.rotate)
+ newBottomRightPoint = calculateRotatedPointCoordinate(rotatedBottomRightPoint, newCenterPoint, -style.rotate)
+
+ newWidth = newBottomRightPoint.x - newTopLeftPoint.x
+ newHeight = newBottomRightPoint.y - newTopLeftPoint.y
+ }
+
+ if (newWidth > 0 && newHeight > 0) {
+ style.width = Math.round(newWidth)
+ style.height = Math.round(newHeight)
+ style.left = Math.round(newTopLeftPoint.x)
+ style.top = Math.round(newTopLeftPoint.y)
+ }
}
-
+
function calculateLeftBottom(style, curPositon, proportion, needLockProportion, pointInfo) {
- const { symmetricPoint } = pointInfo
- let newCenterPoint = getCenterPoint(curPositon, symmetricPoint)
- let newTopRightPoint = calculateRotatedPointCoordinate(symmetricPoint, newCenterPoint, -style.rotate)
- let newBottomLeftPoint = calculateRotatedPointCoordinate(curPositon, newCenterPoint, -style.rotate)
-
- let newWidth = newTopRightPoint.x - newBottomLeftPoint.x
- let newHeight = newBottomLeftPoint.y - newTopRightPoint.y
-
- if (needLockProportion) {
- if (newWidth / newHeight > proportion) {
- newBottomLeftPoint.x += Math.abs(newWidth - newHeight * proportion)
- newWidth = newHeight * proportion
- } else {
- newBottomLeftPoint.y -= Math.abs(newHeight - newWidth / proportion)
- newHeight = newWidth / proportion
- }
-
- const rotatedBottomLeftPoint = calculateRotatedPointCoordinate(newBottomLeftPoint, newCenterPoint, style.rotate)
- newCenterPoint = getCenterPoint(rotatedBottomLeftPoint, symmetricPoint)
- newTopRightPoint = calculateRotatedPointCoordinate(symmetricPoint, newCenterPoint, -style.rotate)
- newBottomLeftPoint = calculateRotatedPointCoordinate(rotatedBottomLeftPoint, newCenterPoint, -style.rotate)
-
- newWidth = newTopRightPoint.x - newBottomLeftPoint.x
- newHeight = newBottomLeftPoint.y - newTopRightPoint.y
- }
+ const { symmetricPoint } = pointInfo
+ let newCenterPoint = getCenterPoint(curPositon, symmetricPoint)
+ let newTopRightPoint = calculateRotatedPointCoordinate(symmetricPoint, newCenterPoint, -style.rotate)
+ let newBottomLeftPoint = calculateRotatedPointCoordinate(curPositon, newCenterPoint, -style.rotate)
+
+ let newWidth = newTopRightPoint.x - newBottomLeftPoint.x
+ let newHeight = newBottomLeftPoint.y - newTopRightPoint.y
- if (newWidth > 0 && newHeight > 0) {
- style.width = Math.round(newWidth)
- style.height = Math.round(newHeight)
- style.left = Math.round(newBottomLeftPoint.x)
- style.top = Math.round(newTopRightPoint.y)
+ if (needLockProportion) {
+ if (newWidth / newHeight > proportion) {
+ newBottomLeftPoint.x += Math.abs(newWidth - newHeight * proportion)
+ newWidth = newHeight * proportion
+ } else {
+ newBottomLeftPoint.y -= Math.abs(newHeight - newWidth / proportion)
+ newHeight = newWidth / proportion
}
+
+ const rotatedBottomLeftPoint = calculateRotatedPointCoordinate(newBottomLeftPoint, newCenterPoint, style.rotate)
+ newCenterPoint = getCenterPoint(rotatedBottomLeftPoint, symmetricPoint)
+ newTopRightPoint = calculateRotatedPointCoordinate(symmetricPoint, newCenterPoint, -style.rotate)
+ newBottomLeftPoint = calculateRotatedPointCoordinate(rotatedBottomLeftPoint, newCenterPoint, -style.rotate)
+
+ newWidth = newTopRightPoint.x - newBottomLeftPoint.x
+ newHeight = newBottomLeftPoint.y - newTopRightPoint.y
+ }
+
+ if (newWidth > 0 && newHeight > 0) {
+ style.width = Math.round(newWidth)
+ style.height = Math.round(newHeight)
+ style.left = Math.round(newBottomLeftPoint.x)
+ style.top = Math.round(newTopRightPoint.y)
+ }
}
function calculateTop(style, curPositon, proportion, needLockProportion, pointInfo) {
- const { symmetricPoint, curPoint } = pointInfo
- // 由于用户拉伸时是以任意角度拉伸的，所以在求得旋转前的坐标时，只取 y 坐标（这里的 x 坐标可能是任意值），x 坐标用 curPoint 的。
- // 这个中心点（第二个参数）用 curPoint, center, symmetricPoint 都可以，只要他们在一条直线上就行
- const rotatedcurPositon = calculateRotatedPointCoordinate(curPositon, curPoint, -style.rotate)
-
- // 算出旋转前 y 坐标，再用 curPoint 的 x 坐标，重新计算它们旋转后对应的坐标
- const rotatedTopMiddlePoint = calculateRotatedPointCoordinate({
- x: curPoint.x,
- y: rotatedcurPositon.y,
- }, curPoint, style.rotate)
-
- // 用旋转后的坐标和对称点算出新的高度（勾股定理）
- const newHeight = Math.sqrt((rotatedTopMiddlePoint.x - symmetricPoint.x) ** 2 + (rotatedTopMiddlePoint.y - symmetricPoint.y) ** 2)
-
- const newCenter = {
- x: rotatedTopMiddlePoint.x - (rotatedTopMiddlePoint.x - symmetricPoint.x) / 2,
- y: rotatedTopMiddlePoint.y + (symmetricPoint.y - rotatedTopMiddlePoint.y) / 2,
- }
+ const { symmetricPoint, curPoint } = pointInfo
+ // 由于用户拉伸时是以任意角度拉伸的，所以在求得旋转前的坐标时，只取 y 坐标（这里的 x 坐标可能是任意值），x 坐标用 curPoint 的。
+ // 这个中心点（第二个参数）用 curPoint, center, symmetricPoint 都可以，只要他们在一条直线上就行
+ const rotatedcurPositon = calculateRotatedPointCoordinate(curPositon, curPoint, -style.rotate)
- let width = style.width
- // 因为调整的是高度 所以只需根据锁定的比例调整宽度即可
- if (needLockProportion) {
- width = newHeight * proportion
- }
-
- style.width = width
- style.height = Math.round(newHeight)
- style.top = Math.round(newCenter.y - (newHeight / 2))
- style.left = Math.round(newCenter.x - (style.width / 2))
+ // 算出旋转前 y 坐标，再用 curPoint 的 x 坐标，重新计算它们旋转后对应的坐标
+ const rotatedTopMiddlePoint = calculateRotatedPointCoordinate(
+ {
+ x: curPoint.x,
+ y: rotatedcurPositon.y,
+ },
+ curPoint,
+ style.rotate,
+ )
+
+ // 用旋转后的坐标和对称点算出新的高度（勾股定理）
+ const newHeight = Math.sqrt(
+ (rotatedTopMiddlePoint.x - symmetricPoint.x) ** 2 + (rotatedTopMiddlePoint.y - symmetricPoint.y) ** 2,
+ )
+
+ const newCenter = {
+ x: rotatedTopMiddlePoint.x - (rotatedTopMiddlePoint.x - symmetricPoint.x) / 2,
+ y: rotatedTopMiddlePoint.y + (symmetricPoint.y - rotatedTopMiddlePoint.y) / 2,
+ }
+
+ let width = style.width
+ // 因为调整的是高度 所以只需根据锁定的比例调整宽度即可
+ if (needLockProportion) {
+ width = newHeight * proportion
+ }
+
+ style.width = width
+ style.height = Math.round(newHeight)
+ style.top = Math.round(newCenter.y - newHeight / 2)
+ style.left = Math.round(newCenter.x - style.width / 2)
}
-
+
function calculateRight(style, curPositon, proportion, needLockProportion, pointInfo) {
- const { symmetricPoint, curPoint } = pointInfo
- const rotatedcurPositon = calculateRotatedPointCoordinate(curPositon, curPoint, -style.rotate)
- const rotatedRightMiddlePoint = calculateRotatedPointCoordinate({
- x: rotatedcurPositon.x,
- y: curPoint.y,
- }, curPoint, style.rotate)
-
- const newWidth = Math.sqrt((rotatedRightMiddlePoint.x - symmetricPoint.x) ** 2 + (rotatedRightMiddlePoint.y - symmetricPoint.y) ** 2)
-
- const newCenter = {
- x: rotatedRightMiddlePoint.x - (rotatedRightMiddlePoint.x - symmetricPoint.x) / 2,
- y: rotatedRightMiddlePoint.y + (symmetricPoint.y - rotatedRightMiddlePoint.y) / 2,
- }
+ const { symmetricPoint, curPoint } = pointInfo
+ const rotatedcurPositon = calculateRotatedPointCoordinate(curPositon, curPoint, -style.rotate)
+ const rotatedRightMiddlePoint = calculateRotatedPointCoordinate(
+ {
+ x: rotatedcurPositon.x,
+ y: curPoint.y,
+ },
+ curPoint,
+ style.rotate,
+ )
- let height = style.height
- // 因为调整的是宽度 所以只需根据锁定的比例调整高度即可
- if (needLockProportion) {
- height = newWidth / proportion
- }
-
- style.height = height
- style.width = Math.round(newWidth)
- style.top = Math.round(newCenter.y - (style.height / 2))
- style.left = Math.round(newCenter.x - (newWidth / 2))
+ const newWidth = Math.sqrt(
+ (rotatedRightMiddlePoint.x - symmetricPoint.x) ** 2 + (rotatedRightMiddlePoint.y - symmetricPoint.y) ** 2,
+ )
+
+ const newCenter = {
+ x: rotatedRightMiddlePoint.x - (rotatedRightMiddlePoint.x - symmetricPoint.x) / 2,
+ y: rotatedRightMiddlePoint.y + (symmetricPoint.y - rotatedRightMiddlePoint.y) / 2,
+ }
+
+ let height = style.height
+ // 因为调整的是宽度 所以只需根据锁定的比例调整高度即可
+ if (needLockProportion) {
+ height = newWidth / proportion
+ }
+
+ style.height = height
+ style.width = Math.round(newWidth)
+ style.top = Math.round(newCenter.y - style.height / 2)
+ style.left = Math.round(newCenter.x - newWidth / 2)
}
-
+
function calculateBottom(style, curPositon, proportion, needLockProportion, pointInfo) {
- const { symmetricPoint, curPoint } = pointInfo
- const rotatedcurPositon = calculateRotatedPointCoordinate(curPositon, curPoint, -style.rotate)
- const rotatedBottomMiddlePoint = calculateRotatedPointCoordinate({
- x: curPoint.x,
- y: rotatedcurPositon.y,
- }, curPoint, style.rotate)
-
- const newHeight = Math.sqrt((rotatedBottomMiddlePoint.x - symmetricPoint.x) ** 2 + (rotatedBottomMiddlePoint.y - symmetricPoint.y) ** 2)
-
- const newCenter = {
- x: rotatedBottomMiddlePoint.x - (rotatedBottomMiddlePoint.x - symmetricPoint.x) / 2,
- y: rotatedBottomMiddlePoint.y + (symmetricPoint.y - rotatedBottomMiddlePoint.y) / 2,
- }
+ const { symmetricPoint, curPoint } = pointInfo
+ const rotatedcurPositon = calculateRotatedPointCoordinate(curPositon, curPoint, -style.rotate)
+ const rotatedBottomMiddlePoint = calculateRotatedPointCoordinate(
+ {
+ x: curPoint.x,
+ y: rotatedcurPositon.y,
+ },
+ curPoint,
+ style.rotate,
+ )
- let width = style.width
- // 因为调整的是高度 所以只需根据锁定的比例调整宽度即可
- if (needLockProportion) {
- width = newHeight * proportion
- }
-
- style.width = width
- style.height = Math.round(newHeight)
- style.top = Math.round(newCenter.y - (newHeight / 2))
- style.left = Math.round(newCenter.x - (style.width / 2))
+ const newHeight = Math.sqrt(
+ (rotatedBottomMiddlePoint.x - symmetricPoint.x) ** 2 + (rotatedBottomMiddlePoint.y - symmetricPoint.y) ** 2,
+ )
+
+ const newCenter = {
+ x: rotatedBottomMiddlePoint.x - (rotatedBottomMiddlePoint.x - symmetricPoint.x) / 2,
+ y: rotatedBottomMiddlePoint.y + (symmetricPoint.y - rotatedBottomMiddlePoint.y) / 2,
+ }
+
+ let width = style.width
+ // 因为调整的是高度 所以只需根据锁定的比例调整宽度即可
+ if (needLockProportion) {
+ width = newHeight * proportion
+ }
+
+ style.width = width
+ style.height = Math.round(newHeight)
+ style.top = Math.round(newCenter.y - newHeight / 2)
+ style.left = Math.round(newCenter.x - style.width / 2)
}
-
+
function calculateLeft(style, curPositon, proportion, needLockProportion, pointInfo) {
- const { symmetricPoint, curPoint } = pointInfo
- const rotatedcurPositon = calculateRotatedPointCoordinate(curPositon, curPoint, -style.rotate)
- const rotatedLeftMiddlePoint = calculateRotatedPointCoordinate({
- x: rotatedcurPositon.x,
- y: curPoint.y,
- }, curPoint, style.rotate)
-
- const newWidth = Math.sqrt((rotatedLeftMiddlePoint.x - symmetricPoint.x) ** 2 + (rotatedLeftMiddlePoint.y - symmetricPoint.y) ** 2)
-
- const newCenter = {
- x: rotatedLeftMiddlePoint.x - (rotatedLeftMiddlePoint.x - symmetricPoint.x) / 2,
- y: rotatedLeftMiddlePoint.y + (symmetricPoint.y - rotatedLeftMiddlePoint.y) / 2,
- }
-
- let height = style.height
- if (needLockProportion) {
- height = newWidth / proportion
- }
-
- style.height = height
- style.width = Math.round(newWidth)
- style.top = Math.round(newCenter.y - (style.height / 2))
- style.left = Math.round(newCenter.x - (newWidth / 2))
+ const { symmetricPoint, curPoint } = pointInfo
+ const rotatedcurPositon = calculateRotatedPointCoordinate(curPositon, curPoint, -style.rotate)
+ const rotatedLeftMiddlePoint = calculateRotatedPointCoordinate(
+ {
+ x: rotatedcurPositon.x,
+ y: curPoint.y,
+ },
+ curPoint,
+ style.rotate,
+ )
+
+ const newWidth = Math.sqrt(
+ (rotatedLeftMiddlePoint.x - symmetricPoint.x) ** 2 + (rotatedLeftMiddlePoint.y - symmetricPoint.y) ** 2,
+ )
+
+ const newCenter = {
+ x: rotatedLeftMiddlePoint.x - (rotatedLeftMiddlePoint.x - symmetricPoint.x) / 2,
+ y: rotatedLeftMiddlePoint.y + (symmetricPoint.y - rotatedLeftMiddlePoint.y) / 2,
+ }
+
+ let height = style.height
+ if (needLockProportion) {
+ height = newWidth / proportion
+ }
+
+ style.height = height
+ style.width = Math.round(newWidth)
+ style.top = Math.round(newCenter.y - style.height / 2)
+ style.left = Math.round(newCenter.x - newWidth / 2)
}
-export default function calculateComponentPositonAndSize(name, style, curPositon, proportion, needLockProportion, pointInfo) {
- funcs[name](style, curPositon, proportion, needLockProportion, pointInfo)
-}
\ No newline at end of file
+export default function calculateComponentPositonAndSize(
+ name,
+ style,
+ curPositon,
+ proportion,
+ needLockProportion,
+ pointInfo,
+) {
+ funcs[name](style, curPositon, proportion, needLockProportion, pointInfo)
+}
diff --git a/src/utils/changeComponentsSizeWithScale.js b/src/utils/changeComponentsSizeWithScale.js
index a5fb0a7..969007e 100644
--- a/src/utils/changeComponentsSizeWithScale.js
+++ b/src/utils/changeComponentsSizeWithScale.js
@@ -3,59 +3,59 @@ import store from '@/store'
import { divide, multiply } from 'mathjs'
const needToChangeAttrs = ['top', 'left', 'width', 'height', 'fontSize', 'padding']
-// 根据比例缩放组件尺寸
-export default function changeComponentsSizeWithScale(scale, snapshotData = null) {
- const componentData = snapshotData || deepCopy(store.state.componentData)
- componentData.forEach(component => {
- Object.keys(component.style).forEach(key => {
- if (needToChangeAttrs.includes(key)) {
- let newKey
- if (snapshotData) {
- // 根据比例计算新的属性值
- newKey = ((component.style[key] / snapshotData[0].lastScale) * scale).toFixed(4) - 0
- } else {
- // 否则根据当前画布的比例计算新的属性值
- newKey = ((component.style[key] / store.state.canvasStyleData.scale) * scale).toFixed(4) - 0
- }
-
- if (key == 'top' || key == 'left') {
- component.style[key] = newKey
- } else {
- component.style[key] = newKey == 0 ? 1 : newKey
- }
- }
- })
- })
-
- if (snapshotData) {
- return componentData
- }
-
- store.commit('setComponentData', componentData)
- // 更新后的组件数据
- store.commit('setCurComponent', {
- component: componentData[store.state.curComponentIndex],
- index: store.state.curComponentIndex,
+// 根据比例缩放组件尺寸
+export default function changeComponentsSizeWithScale(scale, snapshotData = null) {
+ const componentData = snapshotData || deepCopy(store.state.componentData)
+ componentData.forEach((component) => {
+ Object.keys(component.style).forEach((key) => {
+ if (needToChangeAttrs.includes(key)) {
+ let newKey
+ if (snapshotData) {
+ // 根据比例计算新的属性值
+ newKey = ((component.style[key] / snapshotData[0].lastScale) * scale).toFixed(4) - 0
+ } else {
+ // 否则根据当前画布的比例计算新的属性值
+ newKey = ((component.style[key] / store.state.canvasStyleData.scale) * scale).toFixed(4) - 0
+ }
+
+ if (key == 'top' || key == 'left') {
+ component.style[key] = newKey
+ } else {
+ component.style[key] = newKey == 0 ? 1 : newKey
+ }
+ }
})
-
- // 更新画布的比例
- store.commit('setCanvasStyle', {
- ...store.state.canvasStyleData,
- scale,
- })
+ })
+
+ if (snapshotData) {
+ return componentData
+ }
+
+ store.commit('setComponentData', componentData)
+ // 更新后的组件数据
+ store.commit('setCurComponent', {
+ component: componentData[store.state.curComponentIndex],
+ index: store.state.curComponentIndex,
+ })
+
+ // 更新画布的比例
+ store.commit('setCanvasStyle', {
+ ...store.state.canvasStyleData,
+ scale,
+ })
}
const needToChangeAttrs2 = ['width', 'height', 'fontSize', 'padding']
export function changeComponentSizeWithScale(component) {
- Object.keys(component.style).forEach(key => {
- if (needToChangeAttrs2.includes(key)) {
- if (key === 'fontSize' && component.style[key] === '') return
+ Object.keys(component.style).forEach((key) => {
+ if (needToChangeAttrs2.includes(key)) {
+ if (key === 'fontSize' && component.style[key] === '') return
- component.style[key] = format(component.style[key], store.state.canvasStyleData.scale)
- }
- })
+ component.style[key] = format(component.style[key], store.state.canvasStyleData.scale)
+ }
+ })
}
function format(value, scale) {
- return multiply(value, divide(parseFloat(scale), 100))
+ return multiply(value, divide(parseFloat(scale), 100))
}
diff --git a/src/utils/decomposeComponent.js b/src/utils/decomposeComponent.js
index e3105b1..dad13c7 100644
--- a/src/utils/decomposeComponent.js
+++ b/src/utils/decomposeComponent.js
@@ -3,18 +3,18 @@ import { mod360 } from './translate'
// 将组合中的各个子组件拆分出来，并计算它们新的 style
export default function decomposeComponent(component, editorRect, parentStyle) {
- const componentRect = $(`#component${component.id}`).getBoundingClientRect()
- // 获取元素的中心点坐标
- const center = {
- x: componentRect.left - editorRect.left + componentRect.width / 2,
- y: componentRect.top - editorRect.top + componentRect.height / 2,
- }
+ const componentRect = $(`#component${component.id}`).getBoundingClientRect()
+ // 获取元素的中心点坐标
+ const center = {
+ x: componentRect.left - editorRect.left + componentRect.width / 2,
+ y: componentRect.top - editorRect.top + componentRect.height / 2,
+ }
- component.style.rotate = mod360(component.style.rotate + parentStyle.rotate)
- component.style.width = parseFloat(component.groupStyle.width) / 100 * parentStyle.width
- component.style.height = parseFloat(component.groupStyle.height) / 100 * parentStyle.height
- // 计算出元素新的 top left 坐标
- component.style.left = center.x - component.style.width / 2
- component.style.top = center.y - component.style.height / 2
- component.groupStyle = {}
-}
\ No newline at end of file
+ component.style.rotate = mod360(component.style.rotate + parentStyle.rotate)
+ component.style.width = (parseFloat(component.groupStyle.width) / 100) * parentStyle.width
+ component.style.height = (parseFloat(component.groupStyle.height) / 100) * parentStyle.height
+ // 计算出元素新的 top left 坐标
+ component.style.left = center.x - component.style.width / 2
+ component.style.top = center.y - component.style.height / 2
+ component.groupStyle = {}
+}
diff --git a/src/utils/eventBus.js b/src/utils/eventBus.js
index 58ac2c9..badb6db 100644
--- a/src/utils/eventBus.js
+++ b/src/utils/eventBus.js
@@ -1,3 +1,3 @@
import Vue from 'vue'
// 用于监听、触发事件
-export default new Vue()
\ No newline at end of file
+export default new Vue()
diff --git a/src/utils/events.js b/src/utils/events.js
index c3e65ff..8b765b7 100644
--- a/src/utils/events.js
+++ b/src/utils/events.js
@@ -1,40 +1,36 @@
// 编辑器自定义事件
const events = {
- redirect(url) {
- if (url) {
- window.location.href = url
- }
- },
+ redirect(url) {
+ if (url) {
+ window.location.href = url
+ }
+ },
- alert(msg) {
- if (msg) {
- // eslint-disable-next-line no-alert
- alert(msg)
- }
- },
+ alert(msg) {
+ if (msg) {
+ // eslint-disable-next-line no-alert
+ alert(msg)
+ }
+ },
}
const mixins = {
- methods: events,
+ methods: events,
}
const eventList = [
- {
- key: 'redirect',
- label: '跳转事件',
- event: events.redirect,
- param: '',
- },
- {
- key: 'alert',
- label: 'alert 事件',
- event: events.alert,
- param: '',
- },
+ {
+ key: 'redirect',
+ label: '跳转事件',
+ event: events.redirect,
+ param: '',
+ },
+ {
+ key: 'alert',
+ label: 'alert 事件',
+ event: events.alert,
+ param: '',
+ },
]
-export {
- mixins,
- events,
- eventList,
-}
\ No newline at end of file
+export { mixins, events, eventList }
diff --git a/src/utils/generateID.js b/src/utils/generateID.js
index 4eab07e..d6e9004 100644
--- a/src/utils/generateID.js
+++ b/src/utils/generateID.js
@@ -2,5 +2,5 @@ import { nanoid } from 'nanoid'
// 主要用于 Vue 的 diff 算法，为每个元素创建一个独一无二的 ID
export default function generateID() {
- return nanoid()
+ return nanoid()
}
diff --git a/src/utils/request.js b/src/utils/request.js
index 4e07030..d92c9c2 100644
--- a/src/utils/request.js
+++ b/src/utils/request.js
@@ -3,57 +3,57 @@ import { Message } from 'element-ui'
export const urlRE = /(https?):\/\/[-A-Za-z0-9+&@#/%?=~_|!:,.;]+[-A-Za-z0-9+&@#/%=~_|]/
function request(options) {
- return new Promise((resolve, reject) => {
- const xhr = new XMLHttpRequest()
- xhr.timeout = 6000
+ return new Promise((resolve, reject) => {
+ const xhr = new XMLHttpRequest()
+ xhr.timeout = 6000
- let url = getURL(options.url)
- if (options.method === 'GET') {
- url += `${getURLParam(options.data)}`
- }
+ let url = getURL(options.url)
+ if (options.method === 'GET') {
+ url += `${getURLParam(options.data)}`
+ }
- xhr.open(options.method, url)
+ xhr.open(options.method, url)
- xhr.ontimeout = reject
- xhr.onerror = reject
- xhr.onload = (e) => {
- resolve(e.target.response)
- }
+ xhr.ontimeout = reject
+ xhr.onerror = reject
+ xhr.onload = (e) => {
+ resolve(e.target.response)
+ }
- xhr.send(JSON.stringify(getURLData(options.data, options.paramType)))
- })
+ xhr.send(JSON.stringify(getURLData(options.data, options.paramType)))
+ })
}
function getURLParam(data) {
- let result = ''
- data.forEach(item => {
- if (item[0]) {
- result += `&${item[0]}=${item[1]}`
- }
- })
+ let result = ''
+ data.forEach((item) => {
+ if (item[0]) {
+ result += `&${item[0]}=${item[1]}`
+ }
+ })
- return result ? '?' + result : ''
+ return result ? `?${result}` : ''
}
function getURLData(data, paramType) {
- if (!data) return ''
+ if (!data) return ''
- if (paramType === 'array') {
- return data
- }
+ if (paramType === 'array') {
+ return data
+ }
- const result = {}
- data.forEach(item => {
- if (item[0]) {
- result[item[0]] = item[1]
- }
- })
+ const result = {}
+ data.forEach((item) => {
+ if (item[0]) {
+ result[item[0]] = item[1]
+ }
+ })
- return result
+ return result
}
export function getURL(url) {
- return url.startsWith('http') ? url : 'https://' + url
+ return url.startsWith('http') ? url : `https://${url}`
}
/**
@@ -65,42 +65,42 @@ export function getURL(url) {
* @returns {function} 可以取消请求的函数
*/
export default function requestWarpper(options, obj, key, responseType = 'object') {
- let count = 0
- let timer
- const url = options?.url
- if (url && !/^\d+$/.test(url) || urlRE.test(getURL(url))) {
- if (!options.series) {
- request(options, responseType)
- .then(data => {
- if (responseType === 'object' || responseType === 'array') {
- obj[key] = JSON.parse(data)
- } else {
- obj[key] = data
- }
- })
- .catch(err => Message.error(err?.message || err))
- } else {
- timer = setInterval(() => {
- if (options.requestCount != 0 && options.requestCount <= count) {
- clearInterval(timer)
- return
- }
-
- count++
- request(options, responseType)
- .then(data => {
- if (responseType === 'object' || responseType === 'array') {
- obj[key] = JSON.parse(data)
- } else {
- obj[key] = data
- }
- })
- .catch(err => Message.error(err?.message || err))
- }, options.time)
+ let count = 0
+ let timer
+ const url = options?.url
+ if ((url && !/^\d+$/.test(url)) || urlRE.test(getURL(url))) {
+ if (!options.series) {
+ request(options, responseType)
+ .then((data) => {
+ if (responseType === 'object' || responseType === 'array') {
+ obj[key] = JSON.parse(data)
+ } else {
+ obj[key] = data
+ }
+ })
+ .catch((err) => Message.error(err?.message || err))
+ } else {
+ timer = setInterval(() => {
+ if (options.requestCount != 0 && options.requestCount <= count) {
+ clearInterval(timer)
+ return
}
- }
- return function cancelRequest() {
- clearInterval(timer)
+ count++
+ request(options, responseType)
+ .then((data) => {
+ if (responseType === 'object' || responseType === 'array') {
+ obj[key] = JSON.parse(data)
+ } else {
+ obj[key] = data
+ }
+ })
+ .catch((err) => Message.error(err?.message || err))
+ }, options.time)
}
+ }
+
+ return function cancelRequest() {
+ clearInterval(timer)
+ }
}
diff --git a/src/utils/runAnimation.js b/src/utils/runAnimation.js
index 66453d6..418ad84 100644
--- a/src/utils/runAnimation.js
+++ b/src/utils/runAnimation.js
@@ -1,25 +1,26 @@
export default async function runAnimation($el, animations = []) {
- const play = (animation) => new Promise(resolve => {
- const { animationTime, value = '', isLoop } = animation
- $el.style.setProperty('--time', animationTime + 's')
- $el.classList.add(value, 'animated', utilsHandle(isLoop))
- const removeAnimation = () => {
- $el.removeEventListener('animationend', removeAnimation)
- $el.removeEventListener('animationcancel', removeAnimation)
- $el.classList.remove(value, 'animated', utilsHandle(isLoop))
- $el.style.removeProperty('--time')
- resolve()
- }
-
- $el.addEventListener('animationend', removeAnimation)
- $el.addEventListener('animationcancel', removeAnimation)
+ const play = (animation) =>
+ new Promise((resolve) => {
+ const { animationTime, value = '', isLoop } = animation
+ $el.style.setProperty('--time', `${animationTime}s`)
+ $el.classList.add(value, 'animated', utilsHandle(isLoop))
+ const removeAnimation = () => {
+ $el.removeEventListener('animationend', removeAnimation)
+ $el.removeEventListener('animationcancel', removeAnimation)
+ $el.classList.remove(value, 'animated', utilsHandle(isLoop))
+ $el.style.removeProperty('--time')
+ resolve()
+ }
+
+ $el.addEventListener('animationend', removeAnimation)
+ $el.addEventListener('animationcancel', removeAnimation)
})
- for (let i = 0, len = animations.length; i < len; i++) {
- await play(animations[i])
- }
+ for (let i = 0, len = animations.length; i < len; i++) {
+ await play(animations[i])
+ }
}
function utilsHandle(isLoop) {
- return isLoop ? 'infinite' : 'no-infinite'
+ return isLoop ? 'infinite' : 'no-infinite'
}
diff --git a/src/utils/shortcutKey.js b/src/utils/shortcutKey.js
index fff283b..0337fd3 100644
--- a/src/utils/shortcutKey.js
+++ b/src/utils/shortcutKey.js
@@ -2,150 +2,146 @@ import store from '@/store'
import eventBus from '@/utils/eventBus'
const ctrlKey = 17,
- commandKey = 91, // mac command
- vKey = 86, // 粘贴
- cKey = 67, // 复制
- xKey = 88, // 剪切
-
- yKey = 89, // 重做
- zKey = 90, // 撤销
-
- gKey = 71, // 组合
- bKey = 66, // 拆分
-
- lKey = 76, // 锁定
- uKey = 85, // 解锁
-
- sKey = 83, // 保存
- pKey = 80, // 预览
- dKey = 68, // 删除
- deleteKey = 46, // 删除
- eKey = 69 // 清空画布
+ commandKey = 91, // mac command
+ vKey = 86, // 粘贴
+ cKey = 67, // 复制
+ xKey = 88, // 剪切
+ yKey = 89, // 重做
+ zKey = 90, // 撤销
+ gKey = 71, // 组合
+ bKey = 66, // 拆分
+ lKey = 76, // 锁定
+ uKey = 85, // 解锁
+ sKey = 83, // 保存
+ pKey = 80, // 预览
+ dKey = 68, // 删除
+ deleteKey = 46, // 删除
+ eKey = 69 // 清空画布
export const keycodes = [66, 67, 68, 69, 71, 76, 80, 83, 85, 86, 88, 89, 90]
// 与组件状态无关的操作
const basemap = {
- [vKey]: paste,
- [yKey]: redo,
- [zKey]: undo,
- [sKey]: save,
- [pKey]: preview,
- [eKey]: clearCanvas,
+ [vKey]: paste,
+ [yKey]: redo,
+ [zKey]: undo,
+ [sKey]: save,
+ [pKey]: preview,
+ [eKey]: clearCanvas,
}
// 组件锁定状态下可以执行的操作
const lockMap = {
- ...basemap,
- [uKey]: unlock,
+ ...basemap,
+ [uKey]: unlock,
}
// 组件未锁定状态下可以执行的操作
const unlockMap = {
- ...basemap,
- [cKey]: copy,
- [xKey]: cut,
- [gKey]: compose,
- [bKey]: decompose,
- [dKey]: deleteComponent,
- [deleteKey]: deleteComponent,
- [lKey]: lock,
+ ...basemap,
+ [cKey]: copy,
+ [xKey]: cut,
+ [gKey]: compose,
+ [bKey]: decompose,
+ [dKey]: deleteComponent,
+ [deleteKey]: deleteComponent,
+ [lKey]: lock,
}
let isCtrlOrCommandDown = false
// 全局监听按键操作并执行相应命令
export function listenGlobalKeyDown() {
- window.onkeydown = (e) => {
- if (!store.state.isInEdiotr) return
-
- const { curComponent } = store.state
- const { keyCode } = e
- if (keyCode === ctrlKey || keyCode === commandKey) {
- isCtrlOrCommandDown = true
- } else if (keyCode == deleteKey && curComponent) {
- store.commit('deleteComponent')
- store.commit('recordSnapshot')
- } else if (isCtrlOrCommandDown) {
- if (unlockMap[keyCode] && (!curComponent || !curComponent.isLock)) {
- e.preventDefault()
- unlockMap[keyCode]()
- } else if (lockMap[keyCode] && curComponent && curComponent.isLock) {
- e.preventDefault()
- lockMap[keyCode]()
- }
- }
+ window.onkeydown = (e) => {
+ if (!store.state.isInEdiotr) return
+
+ const { curComponent } = store.state
+ const { keyCode } = e
+ if (keyCode === ctrlKey || keyCode === commandKey) {
+ isCtrlOrCommandDown = true
+ } else if (keyCode == deleteKey && curComponent) {
+ store.commit('deleteComponent')
+ store.commit('recordSnapshot')
+ } else if (isCtrlOrCommandDown) {
+ if (unlockMap[keyCode] && (!curComponent || !curComponent.isLock)) {
+ e.preventDefault()
+ unlockMap[keyCode]()
+ } else if (lockMap[keyCode] && curComponent && curComponent.isLock) {
+ e.preventDefault()
+ lockMap[keyCode]()
+ }
}
+ }
- window.onkeyup = (e) => {
- if (e.keyCode === ctrlKey || e.keyCode === commandKey) {
- isCtrlOrCommandDown = false
- }
+ window.onkeyup = (e) => {
+ if (e.keyCode === ctrlKey || e.keyCode === commandKey) {
+ isCtrlOrCommandDown = false
}
+ }
- window.onmousedown = () => {
- store.commit('setInEditorStatus', false)
- }
+ window.onmousedown = () => {
+ store.commit('setInEditorStatus', false)
+ }
}
function copy() {
- store.commit('copy')
+ store.commit('copy')
}
function paste() {
- store.commit('paste')
- store.commit('recordSnapshot')
+ store.commit('paste')
+ store.commit('recordSnapshot')
}
function cut() {
- store.commit('cut')
+ store.commit('cut')
}
function redo() {
- store.commit('redo')
+ store.commit('redo')
}
function undo() {
- store.commit('undo')
+ store.commit('undo')
}
function compose() {
- if (store.state.areaData.components.length) {
- store.commit('compose')
- store.commit('recordSnapshot')
- }
+ if (store.state.areaData.components.length) {
+ store.commit('compose')
+ store.commit('recordSnapshot')
+ }
}
function decompose() {
- const curComponent = store.state.curComponent
- if (curComponent && !curComponent.isLock && curComponent.component == 'Group') {
- store.commit('decompose')
- store.commit('recordSnapshot')
- }
+ const curComponent = store.state.curComponent
+ if (curComponent && !curComponent.isLock && curComponent.component == 'Group') {
+ store.commit('decompose')
+ store.commit('recordSnapshot')
+ }
}
function save() {
- eventBus.$emit('save')
+ eventBus.$emit('save')
}
function preview() {
- eventBus.$emit('preview')
+ eventBus.$emit('preview')
}
function deleteComponent() {
- if (store.state.curComponent) {
- store.commit('deleteComponent')
- store.commit('recordSnapshot')
- }
+ if (store.state.curComponent) {
+ store.commit('deleteComponent')
+ store.commit('recordSnapshot')
+ }
}
function clearCanvas() {
- eventBus.$emit('clearCanvas')
+ eventBus.$emit('clearCanvas')
}
function lock() {
- store.commit('lock')
+ store.commit('lock')
}
function unlock() {
- store.commit('unlock')
+ store.commit('unlock')
}
diff --git a/src/utils/style.js b/src/utils/style.js
index 0688613..dbea953 100644
--- a/src/utils/style.js
+++ b/src/utils/style.js
@@ -1,139 +1,132 @@
import { sin, cos, toPercent } from '@/utils/translate'
export function getShapeStyle(style) {
- const result = {};
- ['width', 'height', 'top', 'left', 'rotate'].forEach(attr => {
- if (attr != 'rotate') {
- result[attr] = style[attr] + 'px'
- } else {
- result.transform = 'rotate(' + style[attr] + 'deg)'
- }
- })
+ const result = {}
+ ;['width', 'height', 'top', 'left', 'rotate'].forEach((attr) => {
+ if (attr != 'rotate') {
+ result[attr] = `${style[attr]}px`
+ } else {
+ result.transform = `rotate(${style[attr]}deg)`
+ }
+ })
- return result
+ return result
}
-const needUnit = [
- 'fontSize',
+const needUnit = ['fontSize', 'width', 'height', 'top', 'left', 'borderWidth', 'letterSpacing', 'borderRadius']
+
+export function getSVGStyle(style, filter = []) {
+ const result = {}
+
+ ;[
+ 'opacity',
'width',
'height',
'top',
'left',
- 'borderWidth',
+ 'rotate',
+ 'fontSize',
+ 'fontWeight',
+ 'lineHeight',
'letterSpacing',
- 'borderRadius',
-]
-
-export function getSVGStyle(style, filter = []) {
- const result = {};
-
- [
- 'opacity',
- 'width',
- 'height',
- 'top',
- 'left',
- 'rotate',
- 'fontSize',
- 'fontWeight',
- 'lineHeight',
- 'letterSpacing',
- 'textAlign',
- 'color',
- ].forEach(key => {
- if (!filter.includes(key)) {
- if (key != 'rotate') {
- if (style[key] !== '') {
- result[key] = style[key]
-
- if (needUnit.includes(key)) {
- result[key] += 'px'
- }
- }
- } else {
- result.transform = key + '(' + style[key] + 'deg)'
- }
+ 'textAlign',
+ 'color',
+ ].forEach((key) => {
+ if (!filter.includes(key)) {
+ if (key != 'rotate') {
+ if (style[key] !== '') {
+ result[key] = style[key]
+
+ if (needUnit.includes(key)) {
+ result[key] += 'px'
+ }
}
- })
+ } else {
+ result.transform = `${key}(${style[key]}deg)`
+ }
+ }
+ })
- return result
+ return result
}
export function getStyle(style, filter = []) {
- const result = {}
- Object.keys(style).forEach(key => {
- if (!filter.includes(key)) {
- if (key != 'rotate') {
- if (style[key] !== '') {
- result[key] = style[key]
-
- if (needUnit.includes(key)) {
- result[key] += 'px'
- }
- }
- } else {
- result.transform = key + '(' + style[key] + 'deg)'
- }
+ const result = {}
+ Object.keys(style).forEach((key) => {
+ if (!filter.includes(key)) {
+ if (key != 'rotate') {
+ if (style[key] !== '') {
+ result[key] = style[key]
+
+ if (needUnit.includes(key)) {
+ result[key] += 'px'
+ }
}
- })
+ } else {
+ result.transform = `${key}(${style[key]}deg)`
+ }
+ }
+ })
- return result
+ return result
}
// 获取一个组件旋转 rotate 后的样式
export function getComponentRotatedStyle(style) {
- style = { ...style }
- if (style.rotate != 0) {
- const newWidth = style.width * cos(style.rotate) + style.height * sin(style.rotate)
- const diffX = (style.width - newWidth) / 2 // 旋转后范围变小是正值，变大是负值
- style.left += diffX
- style.right = style.left + newWidth
-
- const newHeight = style.height * cos(style.rotate) + style.width * sin(style.rotate)
- const diffY = (newHeight - style.height) / 2 // 始终是正
- style.top -= diffY
- style.bottom = style.top + newHeight
-
- style.width = newWidth
- style.height = newHeight
- } else {
- style.bottom = style.top + style.height
- style.right = style.left + style.width
- }
-
- return style
+ style = { ...style }
+ if (style.rotate != 0) {
+ const newWidth = style.width * cos(style.rotate) + style.height * sin(style.rotate)
+ const diffX = (style.width - newWidth) / 2 // 旋转后范围变小是正值，变大是负值
+ style.left += diffX
+ style.right = style.left + newWidth
+
+ const newHeight = style.height * cos(style.rotate) + style.width * sin(style.rotate)
+ const diffY = (newHeight - style.height) / 2 // 始终是正
+ style.top -= diffY
+ style.bottom = style.top + newHeight
+
+ style.width = newWidth
+ style.height = newHeight
+ } else {
+ style.bottom = style.top + style.height
+ style.right = style.left + style.width
+ }
+
+ return style
}
const filterKeys = ['width', 'height', 'scale']
export function getCanvasStyle(canvasStyleData) {
- const result = {}
- Object.keys(canvasStyleData).filter(key => !filterKeys.includes(key)).forEach(key => {
- result[key] = canvasStyleData[key]
- if (key === 'fontSize') {
- result[key] += 'px'
- }
+ const result = {}
+ Object.keys(canvasStyleData)
+ .filter((key) => !filterKeys.includes(key))
+ .forEach((key) => {
+ result[key] = canvasStyleData[key]
+ if (key === 'fontSize') {
+ result[key] += 'px'
+ }
})
- return result
+ return result
}
export function createGroupStyle(groupComponent) {
- const parentStyle = groupComponent.style
- groupComponent.propValue.forEach(component => {
- // component.groupStyle 的 top left 是相对于 group 组件的位置
- // 如果已存在 component.groupStyle，说明已经计算过一次了。不需要再次计算
- if (!Object.keys(component.groupStyle).length) {
- const style = { ...component.style }
- if (component.component.startsWith('SVG')) {
- component.groupStyle = getSVGStyle(style)
- } else {
- component.groupStyle = getStyle(style)
- }
-
- component.groupStyle.left = toPercent((style.left - parentStyle.left) / parentStyle.width)
- component.groupStyle.top = toPercent((style.top - parentStyle.top) / parentStyle.height)
- component.groupStyle.width = toPercent(style.width / parentStyle.width)
- component.groupStyle.height = toPercent(style.height / parentStyle.height)
- }
- })
+ const parentStyle = groupComponent.style
+ groupComponent.propValue.forEach((component) => {
+ // component.groupStyle 的 top left 是相对于 group 组件的位置
+ // 如果已存在 component.groupStyle，说明已经计算过一次了。不需要再次计算
+ if (!Object.keys(component.groupStyle).length) {
+ const style = { ...component.style }
+ if (component.component.startsWith('SVG')) {
+ component.groupStyle = getSVGStyle(style)
+ } else {
+ component.groupStyle = getStyle(style)
+ }
+
+ component.groupStyle.left = toPercent((style.left - parentStyle.left) / parentStyle.width)
+ component.groupStyle.top = toPercent((style.top - parentStyle.top) / parentStyle.height)
+ component.groupStyle.width = toPercent(style.width / parentStyle.width)
+ component.groupStyle.height = toPercent(style.height / parentStyle.height)
+ }
+ })
}
diff --git a/src/utils/toast.js b/src/utils/toast.js
index fad8417..0ae4081 100644
--- a/src/utils/toast.js
+++ b/src/utils/toast.js
@@ -1,9 +1,9 @@
import { Message } from 'element-ui'
export default function toast(message = '', type = 'error', duration = 1500) {
- Message({
- message,
- type,
- duration,
- })
-}
\ No newline at end of file
+ Message({
+ message,
+ type,
+ duration,
+ })
+}
diff --git a/src/utils/translate.js b/src/utils/translate.js
index 389c424..e971baf 100644
--- a/src/utils/translate.js
+++ b/src/utils/translate.js
@@ -4,7 +4,7 @@ import { divide, multiply } from 'mathjs'
// 角度转弧度
// Math.PI = 180 度
function angleToRadian(angle) {
- return angle * Math.PI / 180
+ return (angle * Math.PI) / 180
}
/**
@@ -16,20 +16,26 @@ function angleToRadian(angle) {
* https://www.zhihu.com/question/67425734/answer/252724399 旋转矩阵公式
*/
export function calculateRotatedPointCoordinate(point, center, rotate) {
- /**
- * 旋转公式：
- * 点a(x, y)
- * 旋转中心c(x, y)
- * 旋转后点n(x, y)
- * 旋转角度θ tan ??
- * nx = cosθ * (ax - cx) - sinθ * (ay - cy) + cx
- * ny = sinθ * (ax - cx) + cosθ * (ay - cy) + cy
- */
-
- return {
- x: (point.x - center.x) * Math.cos(angleToRadian(rotate)) - (point.y - center.y) * Math.sin(angleToRadian(rotate)) + center.x,
- y: (point.x - center.x) * Math.sin(angleToRadian(rotate)) + (point.y - center.y) * Math.cos(angleToRadian(rotate)) + center.y,
- }
+ /**
+ * 旋转公式：
+ * 点a(x, y)
+ * 旋转中心c(x, y)
+ * 旋转后点n(x, y)
+ * 旋转角度θ tan ??
+ * nx = cosθ * (ax - cx) - sinθ * (ay - cy) + cx
+ * ny = sinθ * (ax - cx) + cosθ * (ay - cy) + cy
+ */
+
+ return {
+ x:
+ (point.x - center.x) * Math.cos(angleToRadian(rotate))
+ - (point.y - center.y) * Math.sin(angleToRadian(rotate))
+ + center.x,
+ y:
+ (point.x - center.x) * Math.sin(angleToRadian(rotate))
+ + (point.y - center.y) * Math.cos(angleToRadian(rotate))
+ + center.y,
+ }
}
/**
@@ -40,93 +46,93 @@ export function calculateRotatedPointCoordinate(point, center, rotate) {
* @return {Object} 旋转后的点坐标
*/
export function getRotatedPointCoordinate(style, center, name) {
- let point // point 是未旋转前的坐标
- switch (name) {
- case 't':
- point = {
- x: style.left + (style.width / 2),
- y: style.top,
- }
-
- break
- case 'b':
- point = {
- x: style.left + (style.width / 2),
- y: style.top + style.height,
- }
-
- break
- case 'l':
- point = {
- x: style.left,
- y: style.top + style.height / 2,
- }
-
- break
- case 'r':
- point = {
- x: style.left + style.width,
- y: style.top + style.height / 2,
- }
-
- break
- case 'lt':
- point = {
- x: style.left,
- y: style.top,
- }
-
- break
- case 'rt':
- point = {
- x: style.left + style.width,
- y: style.top,
- }
-
- break
- case 'lb':
- point = {
- x: style.left,
- y: style.top + style.height,
- }
-
- break
- default: // rb
- point = {
- x: style.left + style.width,
- y: style.top + style.height,
- }
-
- break
- }
-
- return calculateRotatedPointCoordinate(point, center, style.rotate)
+ let point // point 是未旋转前的坐标
+ switch (name) {
+ case 't':
+ point = {
+ x: style.left + style.width / 2,
+ y: style.top,
+ }
+
+ break
+ case 'b':
+ point = {
+ x: style.left + style.width / 2,
+ y: style.top + style.height,
+ }
+
+ break
+ case 'l':
+ point = {
+ x: style.left,
+ y: style.top + style.height / 2,
+ }
+
+ break
+ case 'r':
+ point = {
+ x: style.left + style.width,
+ y: style.top + style.height / 2,
+ }
+
+ break
+ case 'lt':
+ point = {
+ x: style.left,
+ y: style.top,
+ }
+
+ break
+ case 'rt':
+ point = {
+ x: style.left + style.width,
+ y: style.top,
+ }
+
+ break
+ case 'lb':
+ point = {
+ x: style.left,
+ y: style.top + style.height,
+ }
+
+ break
+ default: // rb
+ point = {
+ x: style.left + style.width,
+ y: style.top + style.height,
+ }
+
+ break
+ }
+
+ return calculateRotatedPointCoordinate(point, center, style.rotate)
}
// 求两点之间的中点坐标
export function getCenterPoint(p1, p2) {
- return {
- x: p1.x + ((p2.x - p1.x) / 2),
- y: p1.y + ((p2.y - p1.y) / 2),
- }
+ return {
+ x: p1.x + (p2.x - p1.x) / 2,
+ y: p1.y + (p2.y - p1.y) / 2,
+ }
}
export function sin(rotate) {
- return Math.abs(Math.sin(angleToRadian(rotate)))
+ return Math.abs(Math.sin(angleToRadian(rotate)))
}
export function cos(rotate) {
- return Math.abs(Math.cos(angleToRadian(rotate)))
+ return Math.abs(Math.cos(angleToRadian(rotate)))
}
export function mod360(deg) {
- return (deg + 360) % 360
+ return (deg + 360) % 360
}
export function changeStyleWithScale(value) {
- return multiply(value, divide(parseInt(store.state.canvasStyleData.scale), 100))
+ return multiply(value, divide(parseInt(store.state.canvasStyleData.scale), 100))
}
export function toPercent(val) {
- return val * 100 + '%'
+ return `${val * 100}%`
}
diff --git a/src/utils/utils.js b/src/utils/utils.js
index 4a6789f..ad3ec3b 100644
--- a/src/utils/utils.js
+++ b/src/utils/utils.js
@@ -1,33 +1,33 @@
import Vue from 'vue'
export function deepCopy(target) {
- if (typeof target == 'object') {
- const result = Array.isArray(target) ? [] : {}
- for (const key in target) {
- if (typeof target[key] == 'object') {
- result[key] = deepCopy(target[key])
- } else {
- result[key] = target[key]
- }
- }
-
- return result
+ if (typeof target == 'object') {
+ const result = Array.isArray(target) ? [] : {}
+ for (const key in target) {
+ if (typeof target[key] == 'object') {
+ result[key] = deepCopy(target[key])
+ } else {
+ result[key] = target[key]
+ }
}
- return target
+ return result
+ }
+
+ return target
}
export function swap(arr, i, j) {
- const temp = arr[i]
- Vue.set(arr, i, arr[j])
- Vue.set(arr, j, temp)
+ const temp = arr[i]
+ Vue.set(arr, i, arr[j])
+ Vue.set(arr, j, temp)
}
export function $(selector) {
- return document.querySelector(selector)
+ return document.querySelector(selector)
}
const components = ['VText', 'RectShape', 'CircleShape']
export function isPreventDrop(component) {
- return !components.includes(component) && !component.startsWith('SVG')
+ return !components.includes(component) && !component.startsWith('SVG')
}
diff --git a/src/views/Home.vue b/src/views/Home.vue
index 233f208..3a43315 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -1,56 +1,56 @@
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/vue.config.js b/vue.config.js
index e3f8d3c..4ecf920 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -3,18 +3,18 @@ const CompressionPlugin = require('compression-webpack-plugin')
const isProd = process.env.NODE_ENV === 'production'
module.exports = {
- publicPath: isProd ? '/visual-drag-demo/' : './',
- configureWebpack: () => {
- if (isProd) {
- return {
- plugins: [
- new CompressionPlugin({
- test: /\.js$|\.html$|\.css$|\.jpg$|\.jpeg$|\.png/, // 需要压缩的文件类型
- threshold: 10240, // 归档需要进行压缩的文件大小最小值，这个对 10K 以上的进行压缩
- deleteOriginalAssets: false, // 是否删除原文件
- }),
- ],
- }
- }
- },
+ publicPath: isProd ? '/visual-drag-demo/' : './',
+ configureWebpack: () => {
+ if (isProd) {
+ return {
+ plugins: [
+ new CompressionPlugin({
+ test: /\.js$|\.html$|\.css$|\.jpg$|\.jpeg$|\.png/, // 需要压缩的文件类型
+ threshold: 10240, // 归档需要进行压缩的文件大小最小值，这个对 10K 以上的进行压缩
+ deleteOriginalAssets: false, // 是否删除原文件
+ }),
+ ],
+ }
+ }
+ },
}