fix: 修复只读模式下富文本编辑器的值无法显示的问题
This commit is contained in:
@ -1,5 +1,8 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="field-readonly">{{ fieldValue }}</div>
|
<div class="field-readonly">
|
||||||
|
<div v-if="schema.component === 'RichTextEditor'" v-html="htmlValue"> </div>
|
||||||
|
{{ fieldValue }}
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
@ -13,6 +16,7 @@
|
|||||||
|
|
||||||
const textComponents = ['Input', 'AutoCodeRule', 'DatePicker', 'TimePicker', 'Text', 'InputTextArea', 'InputNumber'];
|
const textComponents = ['Input', 'AutoCodeRule', 'DatePicker', 'TimePicker', 'Text', 'InputTextArea', 'InputNumber'];
|
||||||
const fieldValue = ref(genFieldValue(props.value));
|
const fieldValue = ref(genFieldValue(props.value));
|
||||||
|
const htmlValue = ref(getHtmlValue(props.value));
|
||||||
|
|
||||||
function parseRangeVal(val, component) {
|
function parseRangeVal(val, component) {
|
||||||
if (component !== 'RangePicker' || !val) {
|
if (component !== 'RangePicker' || !val) {
|
||||||
@ -21,10 +25,22 @@
|
|||||||
return val.split(' ')[0];
|
return val.split(' ')[0];
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function getHtmlValue(val) {
|
||||||
|
const schema = props.schema;
|
||||||
|
const { component } = schema;
|
||||||
|
if (component === 'RichTextEditor') {
|
||||||
|
return val;
|
||||||
|
}
|
||||||
|
return ''
|
||||||
|
}
|
||||||
|
|
||||||
function genFieldValue(val) {
|
function genFieldValue(val) {
|
||||||
const schema = props.schema;
|
const schema = props.schema;
|
||||||
const model = props.model;
|
const model = props.model;
|
||||||
const { componentProps, component } = schema;
|
const { componentProps, component } = schema;
|
||||||
|
if (component === 'RichTextEditor') {
|
||||||
|
return '';
|
||||||
|
}
|
||||||
if (model && (component === 'TimeRangePicker' || component === 'RangePicker')) {
|
if (model && (component === 'TimeRangePicker' || component === 'RangePicker')) {
|
||||||
const fieldArr = schema.field.split(',');
|
const fieldArr = schema.field.split(',');
|
||||||
const valStart = parseRangeVal(model[fieldArr[0]], component);
|
const valStart = parseRangeVal(model[fieldArr[0]], component);
|
||||||
@ -46,12 +62,14 @@
|
|||||||
() => props.value,
|
() => props.value,
|
||||||
(newValue) => {
|
(newValue) => {
|
||||||
fieldValue.value = genFieldValue(newValue);
|
fieldValue.value = genFieldValue(newValue);
|
||||||
|
htmlValue.value = getHtmlValue(newValue);
|
||||||
}
|
}
|
||||||
);
|
);
|
||||||
watch(
|
watch(
|
||||||
() => props.model,
|
() => props.model,
|
||||||
(newValue) => {
|
(newValue) => {
|
||||||
fieldValue.value = genFieldValue(newValue);
|
fieldValue.value = genFieldValue(newValue);
|
||||||
|
htmlValue.value = getHtmlValue(newValue);
|
||||||
},
|
},
|
||||||
{ deep: true }
|
{ deep: true }
|
||||||
);
|
);
|
||||||
|
|||||||
@ -417,7 +417,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
function readonlySupport(name) {
|
function readonlySupport(name) {
|
||||||
return /Input|AutoCodeRule|DatePicker|Text|TimePicker|Range/.test(name);
|
return /^(Input|AutoCodeRule|DatePicker|Text|TimePicker|Range|RichTextEditor)$/.test(name);
|
||||||
}
|
}
|
||||||
|
|
||||||
function getShow(schema: FormSchema): boolean {
|
function getShow(schema: FormSchema): boolean {
|
||||||
|
|||||||
Reference in New Issue
Block a user