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

修复日期组件、时间组件、富文本组件的Vue3兼容问题。

Browse Source
This commit is contained in:
vdpAdmin
2022-01-15 01:26:51 +08:00
parent 15c20de9e5
commit 54e11ab3b7
21 changed files with 137 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
src/components/form-designer/form-widget/field-widget/date-range-widget.vue
View File

@ -2,16 +2,18 @@
<form-item-wrapper :designer="designer" :field="field" :rules="rules" :design-state="designState"
:parent-widget="parentWidget" :parent-list="parentList" :index-of-parent-list="indexOfParentList"
:sub-form-row-index="subFormRowIndex" :sub-form-col-index="subFormColIndex" :sub-form-row-id="subFormRowId">
<el-date-picker ref="fieldEditor" :type="field.options.type" v-model="fieldModel" class="full-width-input"
:disabled="field.options.disabled" :readonly="field.options.readonly"
:size="field.options.size"
:clearable="field.options.clearable" :editable="field.options.editable"
:format="field.options.format" :value-format="field.options.valueFormat"
:start-placeholder="field.options.startPlaceholder || i18nt('render.hint.startDatePlaceholder')"
:end-placeholder="field.options.endPlaceholder || i18nt('render.hint.endDatePlaceholder')"
@focus="handleFocusCustomEvent" @blur="handleBlurCustomEvent"
@change="handleChangeEvent">
</el-date-picker>
<div :class="[!!field.options.autoFullWidth ? 'auto-full-width' : '']">
<el-date-picker ref="fieldEditor" :type="field.options.type" v-model="fieldModel"
:disabled="field.options.disabled" :readonly="field.options.readonly"
:size="field.options.size"
:clearable="field.options.clearable" :editable="field.options.editable"
:format="field.options.format" :value-format="field.options.valueFormat"
:start-placeholder="field.options.startPlaceholder || i18nt('render.hint.startDatePlaceholder')"
:end-placeholder="field.options.endPlaceholder || i18nt('render.hint.endDatePlaceholder')"
@focus="handleFocusCustomEvent" @blur="handleBlurCustomEvent"
@change="handleChangeEvent">
</el-date-picker>
</div>
</form-item-wrapper>
</template>
@ -101,4 +103,12 @@
width: 100% !important;
}
.auto-full-width {
width: 100%;
:deep(.el-range-editor) {
width: 100% !important;
}
}
</style>

3
src/components/form-designer/form-widget/field-widget/date-widget.vue
View File

@ -2,7 +2,8 @@
<form-item-wrapper :designer="designer" :field="field" :rules="rules" :design-state="designState"
:parent-widget="parentWidget" :parent-list="parentList" :index-of-parent-list="indexOfParentList"
:sub-form-row-index="subFormRowIndex" :sub-form-col-index="subFormColIndex" :sub-form-row-id="subFormRowId">
<el-date-picker ref="fieldEditor" :type="field.options.type" v-model="fieldModel" class="full-width-input"
<el-date-picker ref="fieldEditor" :type="field.options.type" v-model="fieldModel"
:class="[!!field.options.autoFullWidth ? 'auto-full-width' : '']"
:readonly="field.options.readonly" :disabled="field.options.disabled"
:size="field.options.size"
:clearable="field.options.clearable" :editable="field.options.editable"

9
src/components/form-designer/form-widget/field-widget/rich-editor-widget.vue
View File

@ -18,7 +18,7 @@
@blur="handleRichEditorBlurEvent"
@focus="handleRichEditorFocusEvent"
@change="handleRichEditorChangeEvent"
style="height: 200px;"></quill-editor>
:style="!!field.options.contentHeight ? `height: ${field.options.contentHeight};`: ''"></quill-editor>
</div>
</form-item-wrapper>
@ -32,11 +32,6 @@
import fieldMixin from "@/components/form-designer/form-widget/field-widget/fieldMixin";
import { Quill, quillEditor } from 'vue3-quill'
//const modules = import.meta.glob('../../../../../node_modules/vue3-quill/src/index.js')
//console.log('test=====', modules)
// import { QuillEditor } from '@vueup/vue-quill'
// import '@vueup/vue-quill/dist/vue-quill.snow.css'
export default {
name: "rich-editor-widget",
@ -75,8 +70,6 @@
// require(['vue2-editor'], ({VueEditor}) => resolve(VueEditor))
// }
quillEditor,
// QuillEditor,
},
inject: ['refList', 'formConfig', 'globalOptionData', 'globalModel'],
data() {

31
src/components/form-designer/form-widget/field-widget/time-range-widget.vue
View File

@ -2,16 +2,19 @@
<form-item-wrapper :designer="designer" :field="field" :rules="rules" :design-state="designState"
:parent-widget="parentWidget" :parent-list="parentList" :index-of-parent-list="indexOfParentList"
:sub-form-row-index="subFormRowIndex" :sub-form-col-index="subFormColIndex" :sub-form-row-id="subFormRowId">
<el-time-picker ref="fieldEditor" is-range v-model="fieldModel" class="full-width-input"
:disabled="field.options.disabled" :readonly="field.options.readonly"
:size="field.options.size"
:clearable="field.options.clearable" :editable="field.options.editable"
:format="field.options.format" value-format="HH:mm:ss"
:start-placeholder="field.options.startPlaceholder || i18nt('render.hint.startTimePlaceholder')"
:end-placeholder="field.options.endPlaceholder || i18nt('render.hint.endTimePlaceholder')"
@focus="handleFocusCustomEvent" @blur="handleBlurCustomEvent"
@change="handleChangeEvent">
</el-time-picker>
<div :class="[!!field.options.autoFullWidth ? 'auto-full-width' : '']">
<el-time-picker ref="fieldEditor" is-range v-model="fieldModel"
:class="[!!field.options.autoFullWidth ? 'full-width-input' : '']"
:disabled="field.options.disabled" :readonly="field.options.readonly"
:size="field.options.size"
:clearable="field.options.clearable" :editable="field.options.editable"
:format="field.options.format" value-format="HH:mm:ss"
:start-placeholder="field.options.startPlaceholder || i18nt('render.hint.startTimePlaceholder')"
:end-placeholder="field.options.endPlaceholder || i18nt('render.hint.endTimePlaceholder')"
@focus="handleFocusCustomEvent" @blur="handleBlurCustomEvent"
@change="handleChangeEvent">
</el-time-picker>
</div>
</form-item-wrapper>
</template>
@ -101,4 +104,12 @@
width: 100% !important;
}
.auto-full-width {
width: 100%;
:deep(.el-range-editor) {
width: 100% !important;
}
}
</style>

3
src/components/form-designer/form-widget/field-widget/time-widget.vue
View File

@ -2,7 +2,8 @@
<form-item-wrapper :designer="designer" :field="field" :rules="rules" :design-state="designState"
:parent-widget="parentWidget" :parent-list="parentList" :index-of-parent-list="indexOfParentList"
:sub-form-row-index="subFormRowIndex" :sub-form-col-index="subFormColIndex" :sub-form-row-id="subFormRowId">
<el-time-picker ref="fieldEditor" v-model="fieldModel" class="full-width-input"
<el-time-picker ref="fieldEditor" v-model="fieldModel"
:class="[!!field.options.autoFullWidth ? 'auto-full-width' : '']"
:disabled="field.options.disabled" :readonly="field.options.readonly"
:size="field.options.size"
:clearable="field.options.clearable" :editable="field.options.editable"