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

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

View File

@ -10,7 +10,6 @@
"preview": "vite preview" "preview": "vite preview"
}, },
"dependencies": { "dependencies": {
"@vueup/vue-quill": "^1.0.0-beta.7",
"axios": "^0.24.0", "axios": "^0.24.0",
"clipboard": "^2.0.8", "clipboard": "^2.0.8",
"core-js": "^3.6.5", "core-js": "^3.6.5",

View File

@ -2,7 +2,8 @@
<form-item-wrapper :designer="designer" :field="field" :rules="rules" :design-state="designState" <form-item-wrapper :designer="designer" :field="field" :rules="rules" :design-state="designState"
:parent-widget="parentWidget" :parent-list="parentList" :index-of-parent-list="indexOfParentList" :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"> :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" <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" :disabled="field.options.disabled" :readonly="field.options.readonly"
:size="field.options.size" :size="field.options.size"
:clearable="field.options.clearable" :editable="field.options.editable" :clearable="field.options.clearable" :editable="field.options.editable"
@ -12,6 +13,7 @@
@focus="handleFocusCustomEvent" @blur="handleBlurCustomEvent" @focus="handleFocusCustomEvent" @blur="handleBlurCustomEvent"
@change="handleChangeEvent"> @change="handleChangeEvent">
</el-date-picker> </el-date-picker>
</div>
</form-item-wrapper> </form-item-wrapper>
</template> </template>
@ -101,4 +103,12 @@
width: 100% !important; width: 100% !important;
} }
.auto-full-width {
width: 100%;
:deep(.el-range-editor) {
width: 100% !important;
}
}
</style> </style>

View File

@ -2,7 +2,8 @@
<form-item-wrapper :designer="designer" :field="field" :rules="rules" :design-state="designState" <form-item-wrapper :designer="designer" :field="field" :rules="rules" :design-state="designState"
:parent-widget="parentWidget" :parent-list="parentList" :index-of-parent-list="indexOfParentList" :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"> :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" :readonly="field.options.readonly" :disabled="field.options.disabled"
:size="field.options.size" :size="field.options.size"
:clearable="field.options.clearable" :editable="field.options.editable" :clearable="field.options.clearable" :editable="field.options.editable"

View File

@ -18,7 +18,7 @@
@blur="handleRichEditorBlurEvent" @blur="handleRichEditorBlurEvent"
@focus="handleRichEditorFocusEvent" @focus="handleRichEditorFocusEvent"
@change="handleRichEditorChangeEvent" @change="handleRichEditorChangeEvent"
style="height: 200px;"></quill-editor> :style="!!field.options.contentHeight ? `height: ${field.options.contentHeight};`: ''"></quill-editor>
</div> </div>
</form-item-wrapper> </form-item-wrapper>
@ -32,11 +32,6 @@
import fieldMixin from "@/components/form-designer/form-widget/field-widget/fieldMixin"; import fieldMixin from "@/components/form-designer/form-widget/field-widget/fieldMixin";
import { Quill, quillEditor } from 'vue3-quill' 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 { export default {
name: "rich-editor-widget", name: "rich-editor-widget",
@ -75,8 +70,6 @@
// require(['vue2-editor'], ({VueEditor}) => resolve(VueEditor)) // require(['vue2-editor'], ({VueEditor}) => resolve(VueEditor))
// } // }
quillEditor, quillEditor,
// QuillEditor,
}, },
inject: ['refList', 'formConfig', 'globalOptionData', 'globalModel'], inject: ['refList', 'formConfig', 'globalOptionData', 'globalModel'],
data() { data() {

View File

@ -2,7 +2,9 @@
<form-item-wrapper :designer="designer" :field="field" :rules="rules" :design-state="designState" <form-item-wrapper :designer="designer" :field="field" :rules="rules" :design-state="designState"
:parent-widget="parentWidget" :parent-list="parentList" :index-of-parent-list="indexOfParentList" :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"> :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" <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" :disabled="field.options.disabled" :readonly="field.options.readonly"
:size="field.options.size" :size="field.options.size"
:clearable="field.options.clearable" :editable="field.options.editable" :clearable="field.options.clearable" :editable="field.options.editable"
@ -12,6 +14,7 @@
@focus="handleFocusCustomEvent" @blur="handleBlurCustomEvent" @focus="handleFocusCustomEvent" @blur="handleBlurCustomEvent"
@change="handleChangeEvent"> @change="handleChangeEvent">
</el-time-picker> </el-time-picker>
</div>
</form-item-wrapper> </form-item-wrapper>
</template> </template>
@ -101,4 +104,12 @@
width: 100% !important; width: 100% !important;
} }
.auto-full-width {
width: 100%;
:deep(.el-range-editor) {
width: 100% !important;
}
}
</style> </style>

View File

@ -2,7 +2,8 @@
<form-item-wrapper :designer="designer" :field="field" :rules="rules" :design-state="designState" <form-item-wrapper :designer="designer" :field="field" :rules="rules" :design-state="designState"
:parent-widget="parentWidget" :parent-list="parentList" :index-of-parent-list="indexOfParentList" :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"> :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" :disabled="field.options.disabled" :readonly="field.options.readonly"
:size="field.options.size" :size="field.options.size"
:clearable="field.options.clearable" :editable="field.options.editable" :clearable="field.options.clearable" :editable="field.options.editable"

View File

@ -0,0 +1,23 @@
<template>
<el-form-item :label="i18nt('designer.setting.autoFullWidth')">
<el-checkbox v-model="optionModel.autoFullWidth"></el-checkbox>
</el-form-item>
</template>
<script>
import i18n from "@/utils/i18n"
export default {
name: "autoFullWidth-editor",
mixins: [i18n],
props: {
designer: Object,
selectedWidget: Object,
optionModel: Object,
},
}
</script>
<style scoped>
</style>

View File

@ -1,6 +1,8 @@
<template> <template>
<el-form-item :label="i18nt('designer.setting.defaultValue')">
<el-color-picker v-model="optionModel.defaultValue" @change="emitDefaultValueChange"> <el-color-picker v-model="optionModel.defaultValue" @change="emitDefaultValueChange">
</el-color-picker> </el-color-picker>
</el-form-item>
</template> </template>
<script> <script>

View File

@ -1,7 +1,9 @@
<template> <template>
<el-form-item :label="i18nt('designer.setting.defaultValue')">
<el-date-picker :type="optionModel.type" v-model="optionModel.defaultValue" @change="emitDefaultValueChange" <el-date-picker :type="optionModel.type" v-model="optionModel.defaultValue" @change="emitDefaultValueChange"
:format="optionModel.format" :value-format="optionModel.valueFormat" style="width: 100%"> :format="optionModel.format" :value-format="optionModel.valueFormat" style="width: 100%">
</el-date-picker> </el-date-picker>
</el-form-item>
</template> </template>
<script> <script>

View File

@ -2,8 +2,8 @@
<el-form-item :label="i18nt('designer.setting.format')"> <el-form-item :label="i18nt('designer.setting.format')">
<el-select v-model="optionModel.format" filterable allow-create> <el-select v-model="optionModel.format" filterable allow-create>
<el-option label="YYYY-MM-DD" value="YYYY-MM-DD"></el-option> <el-option label="YYYY-MM-DD" value="YYYY-MM-DD"></el-option>
<el-option label="yyyy/MM/dd" value="yyyy/MM/dd"></el-option> <el-option label="YYYY/MM/DD" value="YYYY/MM/DD"></el-option>
<el-option label="yyyy年MM月dd日" value="yyyy年MM月dd日"></el-option> <el-option label="YYYY年MM月DD日" value="YYYY年MM月DD日"></el-option>
<el-option label="YYYY-MM-DD HH:mm:ss" value="YYYY-MM-DD HH:mm:ss"></el-option> <el-option label="YYYY-MM-DD HH:mm:ss" value="YYYY-MM-DD HH:mm:ss"></el-option>
<el-option label="YYYY-MM-DD hh:mm:ss" value="YYYY-MM-DD hh:mm:ss"></el-option> <el-option label="YYYY-MM-DD hh:mm:ss" value="YYYY-MM-DD hh:mm:ss"></el-option>
</el-select> </el-select>

View File

@ -1,7 +1,9 @@
<template> <template>
<el-form-item :label="i18nt('designer.setting.defaultValue')">
<el-date-picker :type="optionModel.type" v-model="optionModel.defaultValue" @change="emitDefaultValueChange" <el-date-picker :type="optionModel.type" v-model="optionModel.defaultValue" @change="emitDefaultValueChange"
:format="optionModel.format" :value-format="optionModel.valueFormat" style="width: 100%"> :format="optionModel.format" :value-format="optionModel.valueFormat" style="width: 100%">
</el-date-picker> </el-date-picker>
</el-form-item>
</template> </template>
<script> <script>

View File

@ -2,8 +2,8 @@
<el-form-item :label="i18nt('designer.setting.format')"> <el-form-item :label="i18nt('designer.setting.format')">
<el-select v-model="optionModel.format" filterable allow-create> <el-select v-model="optionModel.format" filterable allow-create>
<el-option label="YYYY-MM-DD" value="YYYY-MM-DD"></el-option> <el-option label="YYYY-MM-DD" value="YYYY-MM-DD"></el-option>
<el-option label="yyyy/MM/dd" value="yyyy/MM/dd"></el-option> <el-option label="YYYY/MM/DD" value="YYYY/MM/DD"></el-option>
<el-option label="yyyy年MM月dd日" value="yyyy年MM月dd日"></el-option> <el-option label="YYYY年MM月DD日" value="YYYY年MM月DD日"></el-option>
<el-option label="YYYY-MM-DD HH:mm:ss" value="YYYY-MM-DD HH:mm:ss"></el-option> <el-option label="YYYY-MM-DD HH:mm:ss" value="YYYY-MM-DD HH:mm:ss"></el-option>
<el-option label="YYYY-MM-DD hh:mm:ss" value="YYYY-MM-DD hh:mm:ss"></el-option> <el-option label="YYYY-MM-DD hh:mm:ss" value="YYYY-MM-DD hh:mm:ss"></el-option>
</el-select> </el-select>

View File

@ -0,0 +1,25 @@
<template>
<div>
<el-form-item :label="i18nt('designer.setting.contentHeight')">
<el-input type="text" v-model="optionModel.contentHeight"></el-input>
</el-form-item>
</div>
</template>
<script>
import i18n from "@/utils/i18n"
export default {
name: "rich-editor-contentHeight-editor",
mixins: [i18n],
props: {
designer: Object,
selectedWidget: Object,
optionModel: Object,
},
}
</script>
<style scoped>
</style>

View File

@ -1,7 +1,9 @@
<template> <template>
<el-form-item :label="i18nt('designer.setting.defaultValue')">
<el-time-picker v-model="optionModel.defaultValue" is-range @change="emitDefaultValueChange" <el-time-picker v-model="optionModel.defaultValue" is-range @change="emitDefaultValueChange"
:format="optionModel.format" value-format="HH:mm:ss" style="width: 100%"> :format="optionModel.format" value-format="HH:mm:ss" style="width: 100%">
</el-time-picker> </el-time-picker>
</el-form-item>
</template> </template>
<script> <script>

View File

@ -1,7 +1,9 @@
<template> <template>
<el-form-item :label="i18nt('designer.setting.defaultValue')">
<el-time-picker v-model="optionModel.defaultValue" @change="emitDefaultValueChange" <el-time-picker v-model="optionModel.defaultValue" @change="emitDefaultValueChange"
:format="optionModel.format" value-format="HH:mm:ss" style="width: 100%"> :format="optionModel.format" value-format="HH:mm:ss" style="width: 100%">
</el-time-picker> </el-time-picker>
</el-form-item>
</template> </template>
<script> <script>

View File

@ -14,6 +14,7 @@ const COMMON_PROPERTIES = {
'startPlaceholder' : 'startPlaceholder-editor', 'startPlaceholder' : 'startPlaceholder-editor',
'endPlaceholder' : 'endPlaceholder-editor', 'endPlaceholder' : 'endPlaceholder-editor',
'columnWidth' : 'columnWidth-editor', 'columnWidth' : 'columnWidth-editor',
'autoFullWidth' : 'autoFullWidth-editor',
'size' : 'size-editor', 'size' : 'size-editor',
'showStops' : 'showStops-editor', 'showStops' : 'showStops-editor',
'displayStyle' : 'displayStyle-editor', 'displayStyle' : 'displayStyle-editor',
@ -50,6 +51,7 @@ const COMMON_PROPERTIES = {
'limit' : 'limit-editor', 'limit' : 'limit-editor',
'fileMaxSize' : 'fileMaxSize-editor', 'fileMaxSize' : 'fileMaxSize-editor',
'fileTypes' : 'fileTypes-editor', 'fileTypes' : 'fileTypes-editor',
'contentHeight' : 'contentHeight-editor',
'customClass' : 'customClass-editor', 'customClass' : 'customClass-editor',
//容器 //容器

View File

@ -374,6 +374,7 @@ export const basicFields = [
placeholder: '', placeholder: '',
columnWidth: '200px', columnWidth: '200px',
size: '', size: '',
autoFullWidth: true,
labelWidth: null, labelWidth: null,
labelHidden: false, labelHidden: false,
readonly: false, readonly: false,
@ -413,6 +414,7 @@ export const basicFields = [
endPlaceholder: '', endPlaceholder: '',
columnWidth: '200px', columnWidth: '200px',
size: '', size: '',
autoFullWidth: true,
labelWidth: null, labelWidth: null,
labelHidden: false, labelHidden: false,
readonly: false, readonly: false,
@ -452,6 +454,7 @@ export const basicFields = [
placeholder: '', placeholder: '',
columnWidth: '200px', columnWidth: '200px',
size: '', size: '',
autoFullWidth: true,
labelWidth: null, labelWidth: null,
labelHidden: false, labelHidden: false,
readonly: false, readonly: false,
@ -493,6 +496,7 @@ export const basicFields = [
endPlaceholder: '', endPlaceholder: '',
columnWidth: '200px', columnWidth: '200px',
size: '', size: '',
autoFullWidth: true,
labelWidth: null, labelWidth: null,
labelHidden: false, labelHidden: false,
readonly: false, readonly: false,

View File

@ -177,6 +177,7 @@ export default {
endPlaceholder: 'End Placeholder', endPlaceholder: 'End Placeholder',
widgetColumnWidth: 'Width', widgetColumnWidth: 'Width',
widgetSize: 'Size', widgetSize: 'Size',
autoFullWidth: 'Auto Full Width',
showStops: 'Show Stops', showStops: 'Show Stops',
displayStyle: 'Display Style', displayStyle: 'Display Style',
inlineLayout: 'inline', inlineLayout: 'inline',
@ -278,6 +279,7 @@ export default {
vertical: 'Vertical', vertical: 'Vertical',
showBlankRow: 'Show Blank Row', showBlankRow: 'Show Blank Row',
showRowNumber: 'Show Row Number', showRowNumber: 'Show Row Number',
contentHeight: 'Content Area Height',
insertColumnToLeft: 'insert column to left', insertColumnToLeft: 'insert column to left',
insertColumnToRight: 'insert column to right', insertColumnToRight: 'insert column to right',

View File

@ -177,6 +177,7 @@ export default {
endPlaceholder: '截止占位内容', endPlaceholder: '截止占位内容',
widgetColumnWidth: '组件列宽', widgetColumnWidth: '组件列宽',
widgetSize: '组件大小', widgetSize: '组件大小',
autoFullWidth: '自动拉伸宽度',
showStops: '显示间断点', showStops: '显示间断点',
displayStyle: '显示样式', displayStyle: '显示样式',
inlineLayout: '行内', inlineLayout: '行内',
@ -278,6 +279,7 @@ export default {
vertical: '是否竖向显示', vertical: '是否竖向显示',
showBlankRow: '默认显示新行', showBlankRow: '默认显示新行',
showRowNumber: '显示行号', showRowNumber: '显示行号',
contentHeight: '内容区高度',
insertColumnToLeft: '插入左侧列', insertColumnToLeft: '插入左侧列',
insertColumnToRight: '插入右侧列', insertColumnToRight: '插入右侧列',

View File

@ -58,6 +58,10 @@ input[type="password"]::-ms-reveal { /* 隐藏IE/Edge原生的密码查看按
display: none; display: none;
} }
.auto-full-width.el-date-editor.el-input, .auto-full-width.el-date-editor.el-input__inner {
width: 100% !important;
}
/* 滚动条样式 begin */ /* 滚动条样式 begin */
::-webkit-scrollbar { ::-webkit-scrollbar {
width: 8px; width: 8px;

View File

@ -1,5 +1,4 @@
import { createI18n } from 'vue-i18n' //引入vue-i18n组件 import { createI18n } from 'vue-i18n' //引入vue-i18n组件
//import { vfApp } from '@/utils/create-app'
import enLocaleElement from "element-plus/lib/locale/lang/en"; import enLocaleElement from "element-plus/lib/locale/lang/en";
import zhLocaleElement from "element-plus/lib/locale/lang/zh-cn"; import zhLocaleElement from "element-plus/lib/locale/lang/zh-cn";
@ -37,25 +36,19 @@ const langResources = {
//locale.i18n((key, value) => i18n.t(key, value)) //locale.i18n((key, value) => i18n.t(key, value))
export const changeLocale = function(langName) { export const changeLocale = function(langName) {
//console.log('11111', i18n.locale ) //i18n.locale = langName //此行切换语言无效!!
//i18n.locale = langName
i18n.global.locale = langName i18n.global.locale = langName
//console.log('22222', i18n.locale )
localStorage.setItem('v_form_locale', langName) localStorage.setItem('v_form_locale', langName)
} }
export const translate = function(key) { export const translate = function(key) {
return i18n.global.t(key, i18n.locale) return i18n.global.t(key, i18n.locale)
//return key
} }
const i18n = createI18n({ const i18n = createI18n({
locale: localStorage.getItem('v_form_locale') || 'zh-CN', locale: localStorage.getItem('v_form_locale') || 'zh-CN',
messages: langResources messages: langResources
}) })
//vfApp.use(i18n);
export const installI18n = (app) => { export const installI18n = (app) => {
app.use(i18n) app.use(i18n)
@ -65,15 +58,11 @@ export default {
methods: { methods: {
i18nt(key) { i18nt(key) {
return i18n.global.t(key, i18n.locale) return i18n.global.t(key, i18n.locale)
//return key
}, },
/* 如果key1不存在则查找key2 */ /* 如果key1不存在则查找key2 */
i18n2t(key1, key2) { i18n2t(key1, key2) {
return i18n.global.te(key1, i18n.locale) ? i18n.global.t(key1, i18n.locale) : i18n.global.t(key2, i18n.locale) return i18n.global.te(key1, i18n.locale) ? i18n.global.t(key1, i18n.locale) : i18n.global.t(key2, i18n.locale)
//return key1
}, },
} }