images/variant-form3-vite
2
0
Fork 0
mirror of https://github.com/vform666/variant-form3-vite.git synced 2025-06-21 17:39:57 +08:00
Code Issues Packages Projects Releases Wiki Activity

替换字体图标为svg，未全部完成。

Browse Source
This commit is contained in:
vdpAdmin
2021-12-27 17:25:07 +08:00
parent f0dd06b188
commit 64007472a2
16 changed files with 101 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
src/components/form-designer/form-widget/container-widget/container-wrapper.vue
View File

@ -16,23 +16,25 @@
<i :title="i18nt('designer.hint.selectParentWidget')" @click.stop="selectParentWidget(widget)">
<svg-icon icon-class="el-back" />
</i>
<i class="el-icon-top" v-if="!!parentList && (parentList.length > 1)" :title="i18nt('designer.hint.moveUpWidget')"
@click.stop="moveUpWidget()"></i>
<i class="el-icon-bottom" v-if="!!parentList && (parentList.length > 1)" :title="i18nt('designer.hint.moveDownWidget')"
@click.stop="moveDownWidget()"></i>
<i v-if="widget.type === 'table'" class="iconfont icon-insertrow" :title="i18nt('designer.hint.insertRow')"
@click.stop="appendTableRow(widget)"></i>
<i v-if="widget.type === 'table'" class="iconfont icon-insertcolumn" :title="i18nt('designer.hint.insertColumn')"
@click.stop="appendTableCol(widget)"></i>
<i class="el-icon-copy-document" v-if="(widget.type === 'grid') || (widget.type === 'table')"
:title="i18nt('designer.hint.cloneWidget')" @click.stop="cloneContainer(widget)"></i>
<i class="el-icon-delete" :title="i18nt('designer.hint.remove')" @click.stop="removeWidget"></i>
<i v-if="!!parentList && (parentList.length > 1)" :title="i18nt('designer.hint.moveUpWidget')"
@click.stop="moveUpWidget()"><svg-icon icon-class="el-move-up" /></i>
<i v-if="!!parentList && (parentList.length > 1)" :title="i18nt('designer.hint.moveDownWidget')"
@click.stop="moveDownWidget()"><svg-icon icon-class="el-move-down" /></i>
<i v-if="widget.type === 'table'" :title="i18nt('designer.hint.insertRow')"
@click.stop="appendTableRow(widget)"><svg-icon icon-class="el-insert-row" /></i>
<i v-if="widget.type === 'table'" :title="i18nt('designer.hint.insertColumn')"
@click.stop="appendTableCol(widget)"><svg-icon icon-class="el-insert-column" /></i>
<i v-if="(widget.type === 'grid') || (widget.type === 'table')" :title="i18nt('designer.hint.cloneWidget')"
@click.stop="cloneContainer(widget)"><svg-icon icon-class="el-clone" /></i>
<i :title="i18nt('designer.hint.remove')" @click.stop="removeWidget">
<svg-icon icon-class="el-delete" />
</i>
</div>
<div class="drag-handler" v-if="designer.selectedId === widget.id && !widget.internal">
<i class="el-icon-rank" :title="i18nt('designer.hint.dragHandler')"></i>
<i :title="i18nt('designer.hint.dragHandler')"><svg-icon icon-class="el-drag-move" /></i>
<i>{{i18n2t(`designer.widgetLabel.${widget.type}`, `extension.widgetLabel.${widget.type}`)}}</i>
<i v-if="widget.options.hidden === true" class="iconfont icon-hide"></i>
<i v-if="widget.options.hidden === true"><svg-icon icon-class="el-hide" /></i>
</div>
</div>
</template>
@ -104,5 +106,11 @@
}
.container-action, .drag-handler {
:deep(.svg-icon) {
margin-left: 0.1em;
margin-right: 0.1em;
}
}
</style>

28
src/components/form-designer/form-widget/container-widget/grid-col-widget.vue
View File

@ -22,14 +22,18 @@
</draggable>
<div class="grid-col-action" v-if="designer.selectedId === widget.id && widget.type === 'grid-col'">
<i class="el-icon-back" :title="i18nt('designer.hint.selectParentWidget')"
@click.stop="selectParentWidget(widget)"></i>
<i class="el-icon-top" v-if="!!parentList && (parentList.length > 1)" :title="i18nt('designer.hint.moveUpWidget')"
@click.stop="moveUpWidget()"></i>
<i class="el-icon-bottom" v-if="!!parentList && (parentList.length > 1)" :title="i18nt('designer.hint.moveDownWidget')"
@click.stop="moveDownWidget()"></i>
<i class="el-icon-copy-document" :title="i18nt('designer.hint.cloneWidget')" @click.stop="cloneGridCol(widget)"></i>
<i class="el-icon-delete" :title="i18nt('designer.hint.remove')" @click.stop="removeWidget"></i>
<i :title="i18nt('designer.hint.selectParentWidget')"
@click.stop="selectParentWidget(widget)"><svg-icon icon-class="el-back" /></i>
<i v-if="!!parentList && (parentList.length > 1)" :title="i18nt('designer.hint.moveUpWidget')"
@click.stop="moveUpWidget()"><svg-icon icon-class="el-move-up" /></i>
<i v-if="!!parentList && (parentList.length > 1)" :title="i18nt('designer.hint.moveDownWidget')"
@click.stop="moveDownWidget()"><svg-icon icon-class="el-move-down" /></i>
<i :title="i18nt('designer.hint.cloneWidget')" @click.stop="cloneGridCol(widget)">
<svg-icon icon-class="el-clone" />
</i>
<i :title="i18nt('designer.hint.remove')" @click.stop="removeWidget">
<svg-icon icon-class="el-delete" />
</i>
</div>
<div class="grid-col-handler" v-if="designer.selectedId === widget.id && widget.type === 'grid-col'">
@ -308,4 +312,12 @@
}
}
}
.grid-col-action, .grid-col-handler {
:deep(.svg-icon) {
margin-left: 0.1em;
margin-right: 0.1em;
}
}
</style>

15
src/components/form-designer/form-widget/container-widget/table-cell-widget.vue
View File

@ -3,7 +3,7 @@
:style="{width: widget.options.cellWidth + '!important' || '', height: widget.options.cellHeight + '!important' || ''}"
:colspan="widget.options.colspan || 1" :rowspan="widget.options.rowspan || 1"
@click.stop="selectWidget(widget)">
<draggable :list="widget.widgetList" item-key="id" class="draggable-div" v-bind="{group:'dragGroup', ghostClass: 'ghost',animation: 200}"
<draggable :list="widget.widgetList" item-key="id" v-bind="{group:'dragGroup', ghostClass: 'ghost',animation: 200}"
tag="transition-group" :component-data="{name: 'fade'}"
handle=".drag-handler" @end="(evt) => onTableDragEnd(evt, widget.widgetList)"
@add="(evt) => onTableDragAdd(evt, widget.widgetList)"
@ -23,10 +23,10 @@
</draggable>
<div class="table-cell-action" v-if="designer.selectedId === widget.id && widget.type === 'table-cell'">
<i class="el-icon-back" :title="i18nt('designer.hint.selectParentWidget')"
@click.stop="selectParentWidget()"></i>
<i :title="i18nt('designer.hint.selectParentWidget')"
@click.stop="selectParentWidget()"><svg-icon icon-class="el-back" /></i>
<el-dropdown trigger="click" @command="handleTableCellCommand" size="small">
<i class="el-icon-menu" :title="i18nt('designer.hint.cellSetting')"></i>
<i :title="i18nt('designer.hint.cellSetting')"><svg-icon icon-class="el-menu" /></i>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item command="insertLeftCol">{{i18nt('designer.setting.insertColumnToLeft')}}</el-dropdown-item>
@ -338,6 +338,13 @@
}
.table-cell-action, .table-cell-handler {
:deep(.svg-icon) {
margin-left: 0.1em;
margin-right: 0.1em;
}
}
.table-cell.selected {
outline: 2px solid $--color-primary !important;
}

28
src/components/form-designer/form-widget/field-widget/form-item-wrapper.vue
View File

@ -40,18 +40,21 @@
<template v-if="!!this.designer">
<div class="field-action" v-if="designer.selectedId === field.id">
<i class="el-icon-back" :title="i18nt('designer.hint.selectParentWidget')" @click.stop="selectParentWidget(field)"></i>
<i class="el-icon-top" v-if="!!parentList && (parentList.length > 1)" :title="i18nt('designer.hint.moveUpWidget')"
@click.stop="moveUpWidget(field)"></i>
<i class="el-icon-bottom" v-if="!!parentList && (parentList.length > 1)" :title="i18nt('designer.hint.moveDownWidget')"
@click.stop="moveDownWidget(field)"></i>
<i class="el-icon-delete" :title="i18nt('designer.hint.remove')" @click.stop="removeFieldWidget"></i>
<i :title="i18nt('designer.hint.selectParentWidget')"
@click.stop="selectParentWidget(field)"><svg-icon icon-class="el-back" /></i>
<i v-if="!!parentList && (parentList.length > 1)" :title="i18nt('designer.hint.moveUpWidget')"
@click.stop="moveUpWidget(field)"><svg-icon icon-class="el-move-up" /></i>
<i v-if="!!parentList && (parentList.length > 1)" :title="i18nt('designer.hint.moveDownWidget')"
@click.stop="moveDownWidget(field)"><svg-icon icon-class="el-move-down" /></i>
<i :title="i18nt('designer.hint.remove')" @click.stop="removeFieldWidget">
<svg-icon icon-class="el-delete" />
</i>
</div>
<div class="drag-handler background-opacity" v-if="designer.selectedId === field.id">
<i class="el-icon-rank" :title="i18nt('designer.hint.dragHandler')"></i>
<i :title="i18nt('designer.hint.dragHandler')"><svg-icon icon-class="el-drag-move" /></i>
<i>{{i18n2t(`designer.widgetLabel.${field.type}`, `extension.widgetLabel.${field.type}`)}}</i>
<i v-if="field.options.hidden === true" class="iconfont icon-hide"></i>
<i v-if="field.options.hidden === true"><svg-icon icon-class="el-hide" /></i>
</div>
</template>
</div>
@ -235,7 +238,7 @@
i {
font-size: 14px;
color: #fff;
margin: 0 5px;
margin: 0 3px;
cursor: pointer;
}
}
@ -265,6 +268,13 @@
}
}
.field-action, .drag-handler {
:deep(.svg-icon) {
margin-left: 0;
margin-right: 0;
}
}
.el-form-item {
//margin-bottom: 0 !important;
//margin-bottom: 6px;

27
src/components/form-designer/form-widget/field-widget/static-content-wrapper.vue
View File

@ -7,18 +7,22 @@
<template v-if="!!this.designer">
<div class="field-action" v-if="designer.selectedId === field.id">
<i class="el-icon-back" :title="i18nt('designer.hint.selectParentWidget')" @click.stop="selectParentWidget(field)"></i>
<i class="el-icon-top" v-if="!!parentList && (parentList.length > 1)" :title="i18nt('designer.hint.moveUpWidget')"
@click.stop="moveUpWidget(field)"></i>
<i class="el-icon-bottom" v-if="!!parentList && (parentList.length > 1)" :title="i18nt('designer.hint.moveDownWidget')"
@click.stop="moveDownWidget(field)"></i>
<i class="el-icon-delete" :title="i18nt('designer.hint.remove')" @click.stop="removeFieldWidget"></i>
<i :title="i18nt('designer.hint.selectParentWidget')" @click.stop="selectParentWidget(field)">
<svg-icon icon-class="el-back" />
</i>
<i v-if="!!parentList && (parentList.length > 1)" :title="i18nt('designer.hint.moveUpWidget')"
@click.stop="moveUpWidget(field)"><svg-icon icon-class="el-move-up" /></i>
<i v-if="!!parentList && (parentList.length > 1)" :title="i18nt('designer.hint.moveDownWidget')"
@click.stop="moveDownWidget(field)"><svg-icon icon-class="el-move-down" /></i>
<i :title="i18nt('designer.hint.remove')" @click.stop="removeFieldWidget">
<svg-icon icon-class="el-delete" />
</i>
</div>
<div class="drag-handler background-opacity" v-if="designer.selectedId === field.id">
<i class="el-icon-rank" :title="i18nt('designer.hint.dragHandler')"></i>
<i :title="i18nt('designer.hint.dragHandler')"><svg-icon icon-class="el-drag-move" /></i>
<i>{{i18n2t(`designer.widgetLabel.${field.type}`, `extension.widgetLabel.${field.type}`)}}</i>
<i v-if="field.options.hidden === true" class="iconfont icon-hide"></i>
<i v-if="field.options.hidden === true"><svg-icon icon-class="el-hide" /></i>
</div>
</template>
</div>
@ -173,6 +177,13 @@
}
}
.field-action, .drag-handler {
:deep(.svg-icon) {
margin-left: 0.1em;
margin-right: 0.1em;
}
}
.static-content-item {
min-height: 20px;
display: flex; /* 垂直居中 */

2
src/components/form-designer/setting-panel/property-editor/name-editor.vue
View File

@ -3,7 +3,7 @@
<template #label>
<span>{{i18nt('designer.setting.uniqueName')}}
<el-tooltip effect="light" :content="i18nt('designer.setting.editNameHelp')">
<i class="el-icon-info"></i></el-tooltip>
<svg-icon icon-class="el-info" /></el-tooltip>
</span>
</template>
<template v-if="!!selectedWidget.category || noFieldList">

2
src/components/form-designer/setting-panel/property-editor/validation-editor.vue
View File

@ -3,7 +3,7 @@
<template #label>
<span>{{i18nt('designer.setting.validation')}}
<el-tooltip effect="light" :content="i18nt('designer.setting.validationHelp')">
<i class="el-icon-info"></i></el-tooltip>
<svg-icon icon-class="el-info" /></el-tooltip>
</span>
</template>
<el-select v-model="optionModel.validation" filterable allow-create default-first-option>