forked from github/dataease
fix:代码规范
This commit is contained in:
junjie
parent
076a66ed96
commit
09aaaedeb4
@ -2,9 +2,9 @@
|
||||
<div ref="rightPanel" :class="{show:show}" class="rightPanel-container">
|
||||
<div class="rightPanel-background" />
|
||||
<div class="rightPanel">
|
||||
<!-- <div class="handle-button" :style="{'top':buttonTop+'px','background-color':theme}" @click="show=!show">-->
|
||||
<!-- <i :class="show?'el-icon-close':'el-icon-setting'" />-->
|
||||
<!-- </div>-->
|
||||
<!-- <div class="handle-button" :style="{'top':buttonTop+'px','background-color':theme}" @click="show=!show">-->
|
||||
<!-- <i :class="show?'el-icon-close':'el-icon-setting'" />-->
|
||||
<!-- </div>-->
|
||||
<div class="rightPanel-items">
|
||||
<slot />
|
||||
</div>
|
||||
|
||||
File diff suppressed because one or more lines are too long
@ -1,41 +1,41 @@
|
||||
<template>
|
||||
<div class="animation-list">
|
||||
<div class="div-animation">
|
||||
<el-button @click="isShowAnimation = true">添加动画</el-button>
|
||||
<el-button @click="previewAnimate">预览动画</el-button>
|
||||
<div>
|
||||
<el-tag
|
||||
v-for="(tag, index) in curComponent.animations"
|
||||
:key="index"
|
||||
closable
|
||||
@close="removeAnimation(index)"
|
||||
>
|
||||
{{ tag.label }}
|
||||
</el-tag>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 选择动画 -->
|
||||
<Modal v-model="isShowAnimation">
|
||||
<el-tabs v-model="animationActiveName">
|
||||
<el-tab-pane v-for="item in animationClassData" :key="item.label" :label="item.label" :name="item.label">
|
||||
<el-scrollbar class="animate-container">
|
||||
<div
|
||||
class="animate"
|
||||
v-for="(animate, index) in item.children"
|
||||
:key="index"
|
||||
@mouseover="hoverPreviewAnimate = animate.value"
|
||||
@click="addAnimation(animate)"
|
||||
>
|
||||
<div :class="[hoverPreviewAnimate === animate.value && animate.value + ' animated']">
|
||||
{{ animate.label }}
|
||||
</div>
|
||||
</div>
|
||||
</el-scrollbar>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</Modal>
|
||||
<div class="animation-list">
|
||||
<div class="div-animation">
|
||||
<el-button @click="isShowAnimation = true">添加动画</el-button>
|
||||
<el-button @click="previewAnimate">预览动画</el-button>
|
||||
<div>
|
||||
<el-tag
|
||||
v-for="(tag, index) in curComponent.animations"
|
||||
:key="index"
|
||||
closable
|
||||
@close="removeAnimation(index)"
|
||||
>
|
||||
{{ tag.label }}
|
||||
</el-tag>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 选择动画 -->
|
||||
<Modal v-model="isShowAnimation">
|
||||
<el-tabs v-model="animationActiveName">
|
||||
<el-tab-pane v-for="item in animationClassData" :key="item.label" :label="item.label" :name="item.label">
|
||||
<el-scrollbar class="animate-container">
|
||||
<div
|
||||
v-for="(animate, index) in item.children"
|
||||
:key="index"
|
||||
class="animate"
|
||||
@mouseover="hoverPreviewAnimate = animate.value"
|
||||
@click="addAnimation(animate)"
|
||||
>
|
||||
<div :class="[hoverPreviewAnimate === animate.value && animate.value + ' animated']">
|
||||
{{ animate.label }}
|
||||
</div>
|
||||
</div>
|
||||
</el-scrollbar>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</Modal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
@ -45,33 +45,33 @@ import animationClassData from '@/components/canvas/utils/animationClassData'
|
||||
import { mapState } from 'vuex'
|
||||
|
||||
export default {
|
||||
components: { Modal },
|
||||
data() {
|
||||
return {
|
||||
isShowAnimation: false,
|
||||
hoverPreviewAnimate: '',
|
||||
animationActiveName: '进入',
|
||||
animationClassData,
|
||||
showAnimatePanel: false,
|
||||
}
|
||||
components: { Modal },
|
||||
data() {
|
||||
return {
|
||||
isShowAnimation: false,
|
||||
hoverPreviewAnimate: '',
|
||||
animationActiveName: '进入',
|
||||
animationClassData,
|
||||
showAnimatePanel: false
|
||||
}
|
||||
},
|
||||
computed: mapState([
|
||||
'curComponent'
|
||||
]),
|
||||
methods: {
|
||||
addAnimation(animate) {
|
||||
this.$store.commit('addAnimation', animate)
|
||||
this.isShowAnimation = false
|
||||
},
|
||||
computed: mapState([
|
||||
'curComponent',
|
||||
]),
|
||||
methods: {
|
||||
addAnimation(animate) {
|
||||
this.$store.commit('addAnimation', animate)
|
||||
this.isShowAnimation = false
|
||||
},
|
||||
|
||||
previewAnimate() {
|
||||
eventBus.$emit('runAnimation')
|
||||
},
|
||||
|
||||
removeAnimation(index) {
|
||||
this.$store.commit('removeAnimation', index)
|
||||
},
|
||||
previewAnimate() {
|
||||
eventBus.$emit('runAnimation')
|
||||
},
|
||||
|
||||
removeAnimation(index) {
|
||||
this.$store.commit('removeAnimation', index)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
@ -59,7 +59,7 @@ export default {
|
||||
bus.$emit('component-dialog-edit')
|
||||
}
|
||||
|
||||
//编辑样式组件
|
||||
// 编辑样式组件
|
||||
|
||||
if (this.curComponent.type === 'v-text' || this.curComponent.type === 'rect-shape') {
|
||||
bus.$emit('component-dialog-style')
|
||||
|
||||
@ -1,30 +1,30 @@
|
||||
<template>
|
||||
<div class="event-list">
|
||||
<div class="div-events">
|
||||
<el-button @click="isShowEvent = true">添加事件</el-button>
|
||||
<div>
|
||||
<el-tag
|
||||
v-for="event in Object.keys(curComponent.events)"
|
||||
:key="event"
|
||||
closable
|
||||
@close="removeEvent(event)"
|
||||
>
|
||||
{{ event }}
|
||||
</el-tag>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 选择事件 -->
|
||||
<Modal v-model="isShowEvent">
|
||||
<el-tabs v-model="eventActiveName">
|
||||
<el-tab-pane v-for="item in eventList" :key="item.key" :label="item.label" :name="item.key" style="padding: 0 20px">
|
||||
<el-input v-if="item.key == 'redirect'" v-model="item.param" type="textarea" placeholder="请输入完整的 URL" />
|
||||
<el-input v-if="item.key == 'alert'" v-model="item.param" type="textarea" placeholder="请输入要 alert 的内容" />
|
||||
<el-button style="margin-top: 20px;" @click="addEvent(item.key, item.param)">确定</el-button>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</Modal>
|
||||
<div class="event-list">
|
||||
<div class="div-events">
|
||||
<el-button @click="isShowEvent = true">添加事件</el-button>
|
||||
<div>
|
||||
<el-tag
|
||||
v-for="event in Object.keys(curComponent.events)"
|
||||
:key="event"
|
||||
closable
|
||||
@close="removeEvent(event)"
|
||||
>
|
||||
{{ event }}
|
||||
</el-tag>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 选择事件 -->
|
||||
<Modal v-model="isShowEvent">
|
||||
<el-tabs v-model="eventActiveName">
|
||||
<el-tab-pane v-for="item in eventList" :key="item.key" :label="item.label" :name="item.key" style="padding: 0 20px">
|
||||
<el-input v-if="item.key == 'redirect'" v-model="item.param" type="textarea" placeholder="请输入完整的 URL" />
|
||||
<el-input v-if="item.key == 'alert'" v-model="item.param" type="textarea" placeholder="请输入要 alert 的内容" />
|
||||
<el-button style="margin-top: 20px;" @click="addEvent(item.key, item.param)">确定</el-button>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</Modal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
@ -33,28 +33,28 @@ import Modal from '@/components/canvas/components/Modal'
|
||||
import { eventList } from '@/components/canvas/utils/events'
|
||||
|
||||
export default {
|
||||
components: { Modal },
|
||||
data() {
|
||||
return {
|
||||
isShowEvent: false,
|
||||
eventURL: '',
|
||||
eventActiveName: 'redirect',
|
||||
eventList,
|
||||
}
|
||||
components: { Modal },
|
||||
data() {
|
||||
return {
|
||||
isShowEvent: false,
|
||||
eventURL: '',
|
||||
eventActiveName: 'redirect',
|
||||
eventList
|
||||
}
|
||||
},
|
||||
computed: mapState([
|
||||
'curComponent'
|
||||
]),
|
||||
methods: {
|
||||
addEvent(event, param) {
|
||||
this.isShowEvent = false
|
||||
this.$store.commit('addEvent', { event, param })
|
||||
},
|
||||
computed: mapState([
|
||||
'curComponent',
|
||||
]),
|
||||
methods: {
|
||||
addEvent(event, param) {
|
||||
this.isShowEvent = false
|
||||
this.$store.commit('addEvent', { event, param })
|
||||
},
|
||||
|
||||
removeEvent(event) {
|
||||
this.$store.commit('removeEvent', event)
|
||||
},
|
||||
},
|
||||
removeEvent(event) {
|
||||
this.$store.commit('removeEvent', event)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
@ -1,32 +1,32 @@
|
||||
<template>
|
||||
<div class="modal-bg" v-if="show" @click="hide">
|
||||
<div class="fadeInLeft animated modal" @click="stopPropagation">
|
||||
<slot></slot>
|
||||
</div>
|
||||
<div v-if="show" class="modal-bg" @click="hide">
|
||||
<div class="fadeInLeft animated modal" @click="stopPropagation">
|
||||
<slot />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
model: {
|
||||
prop: 'show',
|
||||
event: 'change',
|
||||
model: {
|
||||
prop: 'show',
|
||||
event: 'change'
|
||||
},
|
||||
props: {
|
||||
show: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
hide() {
|
||||
this.$emit('change')
|
||||
},
|
||||
props: {
|
||||
show: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
hide() {
|
||||
this.$emit('change')
|
||||
},
|
||||
|
||||
stopPropagation(e) {
|
||||
e.stopPropagation()
|
||||
},
|
||||
},
|
||||
stopPropagation(e) {
|
||||
e.stopPropagation()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -46,4 +46,4 @@ export default {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
@ -3,12 +3,12 @@
|
||||
<div class="toolbar">
|
||||
|
||||
<div class="canvas-config" style="margin-right: 10px">
|
||||
<el-switch v-model="canvasStyleData.auxiliaryMatrix" :width="35" name="auxiliaryMatrix" />
|
||||
<el-switch v-model="canvasStyleData.auxiliaryMatrix" :width="35" name="auxiliaryMatrix" />
|
||||
<span>{{ $t('panel.matrix_design') }}</span>
|
||||
</div>
|
||||
|
||||
<div class="canvas-config" style="margin-right: 10px">
|
||||
<el-switch v-model="canvasStyleData.selfAdaption" :width="35" name="selfAdaption" />
|
||||
<el-switch v-model="canvasStyleData.selfAdaption" :width="35" name="selfAdaption" />
|
||||
<span>{{ $t('panel.canvas_self_adaption') }} </span>
|
||||
</div>
|
||||
|
||||
|
||||
@ -1,17 +1,17 @@
|
||||
<template>
|
||||
<div style="overflow: hidden">
|
||||
<img :src="propValue">
|
||||
</div>
|
||||
<div style="overflow: hidden">
|
||||
<img :src="propValue">
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
propValue: {
|
||||
type: String,
|
||||
require: true,
|
||||
},
|
||||
},
|
||||
props: {
|
||||
propValue: {
|
||||
type: String,
|
||||
require: true
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -20,4 +20,4 @@ img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
@ -1,15 +1,15 @@
|
||||
<template>
|
||||
<button class="v-button">{{ propValue }}</button>
|
||||
<button class="v-button">{{ propValue }}</button>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
propValue: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
},
|
||||
props: {
|
||||
propValue: {
|
||||
type: String,
|
||||
default: ''
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -44,4 +44,4 @@ export default {
|
||||
color: #3a8ee6;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
@ -1,11 +1,11 @@
|
||||
export default {
|
||||
mutations: {
|
||||
addAnimation({ curComponent }, animation) {
|
||||
curComponent.animations.push(animation)
|
||||
},
|
||||
|
||||
removeAnimation({ curComponent }, index) {
|
||||
curComponent.animations.splice(index, 1)
|
||||
},
|
||||
mutations: {
|
||||
addAnimation({ curComponent }, animation) {
|
||||
curComponent.animations.push(animation)
|
||||
},
|
||||
}
|
||||
|
||||
removeAnimation({ curComponent }, index) {
|
||||
curComponent.animations.splice(index, 1)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -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
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,11 +1,11 @@
|
||||
export default {
|
||||
mutations: {
|
||||
addEvent({ curComponent }, { event, param }) {
|
||||
curComponent.events[event] = param
|
||||
},
|
||||
|
||||
removeEvent({ curComponent }, event) {
|
||||
delete curComponent.events[event]
|
||||
},
|
||||
mutations: {
|
||||
addEvent({ curComponent }, { event, param }) {
|
||||
curComponent.events[event] = param
|
||||
},
|
||||
}
|
||||
|
||||
removeEvent({ curComponent }, event) {
|
||||
delete curComponent.events[event]
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,11 +1,11 @@
|
||||
export default {
|
||||
mutations: {
|
||||
lock({ curComponent }) {
|
||||
curComponent.isLock = true
|
||||
},
|
||||
|
||||
unlock({ curComponent }) {
|
||||
curComponent.isLock = false
|
||||
},
|
||||
mutations: {
|
||||
lock({ curComponent }) {
|
||||
curComponent.isLock = true
|
||||
},
|
||||
}
|
||||
|
||||
unlock({ curComponent }) {
|
||||
curComponent.isLock = false
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,94 +1,94 @@
|
||||
export default [
|
||||
{
|
||||
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: 'lightSpeedInRight' },
|
||||
{ label: '光速从左进入', value: 'lightSpeedInLeft' },
|
||||
{ label: '光速从右退出', value: 'lightSpeedOutRight' },
|
||||
{ label: '光速从左退出', value: 'lightSpeedOutLeft' },
|
||||
{ label: 'Y轴旋转', value: 'flip' },
|
||||
{ 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: 'lightSpeedInRight' },
|
||||
{ label: '光速从左进入', value: 'lightSpeedInLeft' },
|
||||
{ label: '光速从右退出', value: 'lightSpeedOutRight' },
|
||||
{ label: '光速从左退出', value: 'lightSpeedOutLeft' },
|
||||
{ label: 'Y轴旋转', value: 'flip' },
|
||||
{ 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' }
|
||||
]
|
||||
}
|
||||
]
|
||||
|
||||
@ -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 = {}
|
||||
}
|
||||
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 = {}
|
||||
}
|
||||
|
||||
@ -1,3 +1,3 @@
|
||||
import Vue from 'vue'
|
||||
// 用于监听、触发事件
|
||||
export default new Vue()
|
||||
export default new Vue()
|
||||
|
||||
@ -1,39 +1,39 @@
|
||||
// 编辑器自定义事件
|
||||
const events = {
|
||||
redirect(url) {
|
||||
if (url) {
|
||||
window.location.href = url
|
||||
}
|
||||
},
|
||||
redirect(url) {
|
||||
if (url) {
|
||||
window.location.href = url
|
||||
}
|
||||
},
|
||||
|
||||
alert(msg) {
|
||||
if (msg) {
|
||||
alert(msg)
|
||||
}
|
||||
},
|
||||
alert(msg) {
|
||||
if (msg) {
|
||||
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,
|
||||
}
|
||||
mixins,
|
||||
events,
|
||||
eventList
|
||||
}
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
let id = 0
|
||||
// 主要用于 Vue 的 diff 算法，为每个元素创建一个独一无二的 ID
|
||||
export default function generateID() {
|
||||
return id++
|
||||
}
|
||||
return id++
|
||||
}
|
||||
|
||||
@ -1,18 +1,18 @@
|
||||
export default async function runAnimation($el, animations = []) {
|
||||
const play = (animation) => new Promise(resolve => {
|
||||
$el.classList.add(animation.value, 'animated')
|
||||
const removeAnimation = () => {
|
||||
$el.removeEventListener('animationend', removeAnimation)
|
||||
$el.removeEventListener('animationcancel', removeAnimation)
|
||||
$el.classList.remove(animation.value, 'animated')
|
||||
resolve()
|
||||
}
|
||||
|
||||
$el.addEventListener('animationend', removeAnimation)
|
||||
$el.addEventListener('animationcancel', removeAnimation)
|
||||
})
|
||||
|
||||
for (let i = 0, len = animations.length; i < len; i++) {
|
||||
await play(animations[i])
|
||||
const play = (animation) => new Promise(resolve => {
|
||||
$el.classList.add(animation.value, 'animated')
|
||||
const removeAnimation = () => {
|
||||
$el.removeEventListener('animationend', removeAnimation)
|
||||
$el.removeEventListener('animationcancel', removeAnimation)
|
||||
$el.classList.remove(animation.value, 'animated')
|
||||
resolve()
|
||||
}
|
||||
|
||||
$el.addEventListener('animationend', removeAnimation)
|
||||
$el.addEventListener('animationcancel', removeAnimation)
|
||||
})
|
||||
|
||||
for (let i = 0, len = animations.length; i < len; i++) {
|
||||
await play(animations[i])
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,143 +1,143 @@
|
||||
import store from '@/store'
|
||||
import eventBus from '@/components/canvas/utils/eventBus'
|
||||
|
||||
const ctrlKey = 17,
|
||||
vKey = 86, // 粘贴
|
||||
cKey = 67, // 复制
|
||||
xKey = 88, // 剪切
|
||||
const ctrlKey = 17
|
||||
const vKey = 86 // 粘贴
|
||||
const cKey = 67 // 复制
|
||||
const xKey = 88 // 剪切
|
||||
|
||||
yKey = 89, // 重做
|
||||
zKey = 90, // 撤销
|
||||
const yKey = 89 // 重做
|
||||
const zKey = 90 // 撤销
|
||||
|
||||
gKey = 71, // 组合
|
||||
bKey = 66, // 拆分
|
||||
const gKey = 71 // 组合
|
||||
const bKey = 66 // 拆分
|
||||
|
||||
lKey = 76, // 锁定
|
||||
uKey = 85, // 解锁
|
||||
const lKey = 76 // 锁定
|
||||
const uKey = 85 // 解锁
|
||||
|
||||
sKey = 83, // 保存
|
||||
pKey = 80, // 预览
|
||||
dKey = 68, // 删除
|
||||
deleteKey = 46, // 删除
|
||||
eKey = 69 // 清空画布
|
||||
const sKey = 83 // 保存
|
||||
const pKey = 80 // 预览
|
||||
const dKey = 68 // 删除
|
||||
const deleteKey = 46 // 删除
|
||||
const 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 isCtrlDown = false
|
||||
// 全局监听按键操作并执行相应命令
|
||||
export function listenGlobalKeyDown() {
|
||||
window.onkeydown = (e) => {
|
||||
const { curComponent } = store.state
|
||||
if (e.keyCode == ctrlKey) {
|
||||
isCtrlDown = true
|
||||
} else if (e.keyCode == deleteKey && curComponent) {
|
||||
store.commit('deleteComponent')
|
||||
store.commit('recordSnapshot')
|
||||
} else if (isCtrlDown) {
|
||||
if (!curComponent || !curComponent.isLock) {
|
||||
e.preventDefault()
|
||||
unlockMap[e.keyCode] && unlockMap[e.keyCode]()
|
||||
} else if (curComponent && curComponent.isLock) {
|
||||
e.preventDefault()
|
||||
lockMap[e.keyCode] && lockMap[e.keyCode]()
|
||||
}
|
||||
}
|
||||
window.onkeydown = (e) => {
|
||||
const { curComponent } = store.state
|
||||
if (e.keyCode == ctrlKey) {
|
||||
isCtrlDown = true
|
||||
} else if (e.keyCode == deleteKey && curComponent) {
|
||||
store.commit('deleteComponent')
|
||||
store.commit('recordSnapshot')
|
||||
} else if (isCtrlDown) {
|
||||
if (!curComponent || !curComponent.isLock) {
|
||||
e.preventDefault()
|
||||
unlockMap[e.keyCode] && unlockMap[e.keyCode]()
|
||||
} else if (curComponent && curComponent.isLock) {
|
||||
e.preventDefault()
|
||||
lockMap[e.keyCode] && lockMap[e.keyCode]()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
window.onkeyup = (e) => {
|
||||
if (e.keyCode == ctrlKey) {
|
||||
isCtrlDown = false
|
||||
}
|
||||
window.onkeyup = (e) => {
|
||||
if (e.keyCode == ctrlKey) {
|
||||
isCtrlDown = 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')
|
||||
}
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
import { Message } from 'element-ui'
|
||||
|
||||
export default function toast(message = '', type = 'error', duration = 1500) {
|
||||
Message({
|
||||
message,
|
||||
type,
|
||||
duration,
|
||||
})
|
||||
}
|
||||
Message({
|
||||
message,
|
||||
type,
|
||||
duration
|
||||
})
|
||||
}
|
||||
|
||||
@ -1,26 +1,26 @@
|
||||
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]
|
||||
arr[i] = arr[j]
|
||||
arr[j] = temp
|
||||
const temp = arr[i]
|
||||
arr[i] = arr[j]
|
||||
arr[j] = temp
|
||||
}
|
||||
|
||||
export function $(selector) {
|
||||
return document.querySelector(selector)
|
||||
}
|
||||
return document.querySelector(selector)
|
||||
}
|
||||
|
||||
@ -38,7 +38,7 @@
|
||||
<div class="main">
|
||||
<h1 class="logo"><a href="https://www.iconfont.cn/" title="iconfont 首页" target="_blank">
|
||||
<img width="200" src="https://img.alicdn.com/imgextra/i3/O1CN01Mn65HV1FfSEzR6DKv_!!6000000000514-55-tps-228-59.svg">
|
||||
|
||||
|
||||
</a></h1>
|
||||
<div class="nav-tabs">
|
||||
<ul id="tabs" class="dib-box">
|
||||
@ -46,122 +46,122 @@
|
||||
<li class="dib"><span>Font class</span></li>
|
||||
<li class="dib"><span>Symbol</span></li>
|
||||
</ul>
|
||||
|
||||
|
||||
<a href="https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=2459092" target="_blank" class="nav-more">查看项目</a>
|
||||
|
||||
|
||||
</div>
|
||||
<div class="tab-container">
|
||||
<div class="content unicode" style="display: block;">
|
||||
<ul class="icon_lists dib-box">
|
||||
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont"></span>
|
||||
<div class="name">矩形</div>
|
||||
<div class="code-name">&#xe648;</div>
|
||||
</li>
|
||||
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont"></span>
|
||||
<div class="name">text</div>
|
||||
<div class="code-name">&#xe959;</div>
|
||||
</li>
|
||||
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont"></span>
|
||||
<div class="name">picture</div>
|
||||
<div class="code-name">&#xe643;</div>
|
||||
</li>
|
||||
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont"></span>
|
||||
<div class="name">输入</div>
|
||||
<div class="code-name">&#xe6ab;</div>
|
||||
</li>
|
||||
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont"></span>
|
||||
<div class="name">树</div>
|
||||
<div class="code-name">&#xe628;</div>
|
||||
</li>
|
||||
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont"></span>
|
||||
<div class="name">查询搜索</div>
|
||||
<div class="code-name">&#xe615;</div>
|
||||
</li>
|
||||
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont"></span>
|
||||
<div class="name">季度</div>
|
||||
<div class="code-name">&#xe624;</div>
|
||||
</li>
|
||||
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont"></span>
|
||||
<div class="name">数字顺序</div>
|
||||
<div class="code-name">&#xe7de;</div>
|
||||
</li>
|
||||
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont"></span>
|
||||
<div class="name">树列表</div>
|
||||
<div class="code-name">&#xe6a6;</div>
|
||||
</li>
|
||||
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont"></span>
|
||||
<div class="name">日期</div>
|
||||
<div class="code-name">&#xe639;</div>
|
||||
</li>
|
||||
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont"></span>
|
||||
<div class="name">左侧-区间</div>
|
||||
<div class="code-name">&#xe6dd;</div>
|
||||
</li>
|
||||
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont"></span>
|
||||
<div class="name">列表</div>
|
||||
<div class="code-name">&#xe66f;</div>
|
||||
</li>
|
||||
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont"></span>
|
||||
<div class="name">下拉框</div>
|
||||
<div class="code-name">&#xe8ca;</div>
|
||||
</li>
|
||||
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont"></span>
|
||||
<div class="name">下拉树</div>
|
||||
<div class="code-name">&#xe8d0;</div>
|
||||
</li>
|
||||
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont"></span>
|
||||
<div class="name">重置</div>
|
||||
<div class="code-name">&#xe611;</div>
|
||||
</li>
|
||||
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont"></span>
|
||||
<div class="name">日</div>
|
||||
<div class="code-name">&#xe691;</div>
|
||||
</li>
|
||||
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont"></span>
|
||||
<div class="name">年</div>
|
||||
<div class="code-name">&#xe692;</div>
|
||||
</li>
|
||||
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont"></span>
|
||||
<div class="name">月</div>
|
||||
<div class="code-name">&#xe695;</div>
|
||||
</li>
|
||||
|
||||
|
||||
</ul>
|
||||
<div class="article markdown">
|
||||
<h2 id="unicode-">Unicode 引用</h2>
|
||||
@ -207,7 +207,7 @@
|
||||
</div>
|
||||
<div class="content font-class">
|
||||
<ul class="icon_lists dib-box">
|
||||
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont icon-juxing"></span>
|
||||
<div class="name">
|
||||
@ -216,7 +216,7 @@
|
||||
<div class="code-name">.icon-juxing
|
||||
</div>
|
||||
</li>
|
||||
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont icon-text"></span>
|
||||
<div class="name">
|
||||
@ -225,7 +225,7 @@
|
||||
<div class="code-name">.icon-text
|
||||
</div>
|
||||
</li>
|
||||
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont icon-picture"></span>
|
||||
<div class="name">
|
||||
@ -234,7 +234,7 @@
|
||||
<div class="code-name">.icon-picture
|
||||
</div>
|
||||
</li>
|
||||
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont icon-shuru"></span>
|
||||
<div class="name">
|
||||
@ -243,7 +243,7 @@
|
||||
<div class="code-name">.icon-shuru
|
||||
</div>
|
||||
</li>
|
||||
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont icon-tree"></span>
|
||||
<div class="name">
|
||||
@ -252,7 +252,7 @@
|
||||
<div class="code-name">.icon-tree
|
||||
</div>
|
||||
</li>
|
||||
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont icon-chaxunsousuo"></span>
|
||||
<div class="name">
|
||||
@ -261,7 +261,7 @@
|
||||
<div class="code-name">.icon-chaxunsousuo
|
||||
</div>
|
||||
</li>
|
||||
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont icon-jidu"></span>
|
||||
<div class="name">
|
||||
@ -270,7 +270,7 @@
|
||||
<div class="code-name">.icon-jidu
|
||||
</div>
|
||||
</li>
|
||||
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont icon-shuzishunxu"></span>
|
||||
<div class="name">
|
||||
@ -279,7 +279,7 @@
|
||||
<div class="code-name">.icon-shuzishunxu
|
||||
</div>
|
||||
</li>
|
||||
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont icon-Group-"></span>
|
||||
<div class="name">
|
||||
@ -288,7 +288,7 @@
|
||||
<div class="code-name">.icon-Group-
|
||||
</div>
|
||||
</li>
|
||||
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont icon-riqi"></span>
|
||||
<div class="name">
|
||||
@ -297,7 +297,7 @@
|
||||
<div class="code-name">.icon-riqi
|
||||
</div>
|
||||
</li>
|
||||
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont icon-zuoce-qujian"></span>
|
||||
<div class="name">
|
||||
@ -306,7 +306,7 @@
|
||||
<div class="code-name">.icon-zuoce-qujian
|
||||
</div>
|
||||
</li>
|
||||
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont icon-liebiao"></span>
|
||||
<div class="name">
|
||||
@ -315,7 +315,7 @@
|
||||
<div class="code-name">.icon-liebiao
|
||||
</div>
|
||||
</li>
|
||||
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont icon-xialakuang"></span>
|
||||
<div class="name">
|
||||
@ -324,7 +324,7 @@
|
||||
<div class="code-name">.icon-xialakuang
|
||||
</div>
|
||||
</li>
|
||||
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont icon-xialashu"></span>
|
||||
<div class="name">
|
||||
@ -333,7 +333,7 @@
|
||||
<div class="code-name">.icon-xialashu
|
||||
</div>
|
||||
</li>
|
||||
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont icon-zhongzhi"></span>
|
||||
<div class="name">
|
||||
@ -342,7 +342,7 @@
|
||||
<div class="code-name">.icon-zhongzhi
|
||||
</div>
|
||||
</li>
|
||||
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont icon-ri"></span>
|
||||
<div class="name">
|
||||
@ -351,7 +351,7 @@
|
||||
<div class="code-name">.icon-ri
|
||||
</div>
|
||||
</li>
|
||||
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont icon-nian"></span>
|
||||
<div class="name">
|
||||
@ -360,7 +360,7 @@
|
||||
<div class="code-name">.icon-nian
|
||||
</div>
|
||||
</li>
|
||||
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont icon-yue"></span>
|
||||
<div class="name">
|
||||
@ -369,7 +369,7 @@
|
||||
<div class="code-name">.icon-yue
|
||||
</div>
|
||||
</li>
|
||||
|
||||
|
||||
</ul>
|
||||
<div class="article markdown">
|
||||
<h2 id="font-class-">font-class 引用</h2>
|
||||
@ -396,7 +396,7 @@
|
||||
</div>
|
||||
<div class="content symbol">
|
||||
<ul class="icon_lists dib-box">
|
||||
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#icon-juxing"></use>
|
||||
@ -404,7 +404,7 @@
|
||||
<div class="name">矩形</div>
|
||||
<div class="code-name">#icon-juxing</div>
|
||||
</li>
|
||||
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#icon-text"></use>
|
||||
@ -412,7 +412,7 @@
|
||||
<div class="name">text</div>
|
||||
<div class="code-name">#icon-text</div>
|
||||
</li>
|
||||
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#icon-picture"></use>
|
||||
@ -420,7 +420,7 @@
|
||||
<div class="name">picture</div>
|
||||
<div class="code-name">#icon-picture</div>
|
||||
</li>
|
||||
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#icon-shuru"></use>
|
||||
@ -428,7 +428,7 @@
|
||||
<div class="name">输入</div>
|
||||
<div class="code-name">#icon-shuru</div>
|
||||
</li>
|
||||
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#icon-tree"></use>
|
||||
@ -436,7 +436,7 @@
|
||||
<div class="name">树</div>
|
||||
<div class="code-name">#icon-tree</div>
|
||||
</li>
|
||||
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#icon-chaxunsousuo"></use>
|
||||
@ -444,7 +444,7 @@
|
||||
<div class="name">查询搜索</div>
|
||||
<div class="code-name">#icon-chaxunsousuo</div>
|
||||
</li>
|
||||
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#icon-jidu"></use>
|
||||
@ -452,7 +452,7 @@
|
||||
<div class="name">季度</div>
|
||||
<div class="code-name">#icon-jidu</div>
|
||||
</li>
|
||||
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#icon-shuzishunxu"></use>
|
||||
@ -460,7 +460,7 @@
|
||||
<div class="name">数字顺序</div>
|
||||
<div class="code-name">#icon-shuzishunxu</div>
|
||||
</li>
|
||||
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#icon-Group-"></use>
|
||||
@ -468,7 +468,7 @@
|
||||
<div class="name">树列表</div>
|
||||
<div class="code-name">#icon-Group-</div>
|
||||
</li>
|
||||
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#icon-riqi"></use>
|
||||
@ -476,7 +476,7 @@
|
||||
<div class="name">日期</div>
|
||||
<div class="code-name">#icon-riqi</div>
|
||||
</li>
|
||||
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#icon-zuoce-qujian"></use>
|
||||
@ -484,7 +484,7 @@
|
||||
<div class="name">左侧-区间</div>
|
||||
<div class="code-name">#icon-zuoce-qujian</div>
|
||||
</li>
|
||||
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#icon-liebiao"></use>
|
||||
@ -492,7 +492,7 @@
|
||||
<div class="name">列表</div>
|
||||
<div class="code-name">#icon-liebiao</div>
|
||||
</li>
|
||||
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#icon-xialakuang"></use>
|
||||
@ -500,7 +500,7 @@
|
||||
<div class="name">下拉框</div>
|
||||
<div class="code-name">#icon-xialakuang</div>
|
||||
</li>
|
||||
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#icon-xialashu"></use>
|
||||
@ -508,7 +508,7 @@
|
||||
<div class="name">下拉树</div>
|
||||
<div class="code-name">#icon-xialashu</div>
|
||||
</li>
|
||||
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#icon-zhongzhi"></use>
|
||||
@ -516,7 +516,7 @@
|
||||
<div class="name">重置</div>
|
||||
<div class="code-name">#icon-zhongzhi</div>
|
||||
</li>
|
||||
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#icon-ri"></use>
|
||||
@ -524,7 +524,7 @@
|
||||
<div class="name">日</div>
|
||||
<div class="code-name">#icon-ri</div>
|
||||
</li>
|
||||
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#icon-nian"></use>
|
||||
@ -532,7 +532,7 @@
|
||||
<div class="name">年</div>
|
||||
<div class="code-name">#icon-nian</div>
|
||||
</li>
|
||||
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#icon-yue"></use>
|
||||
@ -540,7 +540,7 @@
|
||||
<div class="name">月</div>
|
||||
<div class="code-name">#icon-yue</div>
|
||||
</li>
|
||||
|
||||
|
||||
</ul>
|
||||
<div class="article markdown">
|
||||
<h2 id="symbol-">Symbol 引用</h2>
|
||||
|
||||
File diff suppressed because one or more lines are too long
@ -80,7 +80,7 @@ export default {
|
||||
background: '0% 0% / cover rgb(239, 241, 244)'
|
||||
}
|
||||
if (this.subjectItemDetails) {
|
||||
if (this.subjectItemDetails.panel.backgroundType === 'image'&&this.subjectItemDetails.panel.imageUrl) {
|
||||
if (this.subjectItemDetails.panel.backgroundType === 'image' && this.subjectItemDetails.panel.imageUrl) {
|
||||
style = {
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
|
||||
Loading…
Reference in New Issue
Block a user