refactor(components): 优化内容可编辑组件中的图片处理逻辑
- 修改了图片宽度和高度的计算方式,使用原始尺寸和宽高比 - 更新了矩阵问题的默认选项文本 - 调整了部分组件的样式和布局
This commit is contained in:
@@ -96,12 +96,28 @@ const functions = {
|
|||||||
const img = document.createElement('img');
|
const img = document.createElement('img');
|
||||||
img.src = data.url;
|
img.src = data.url;
|
||||||
img.onload = () => {
|
img.onload = () => {
|
||||||
const scale = img.naturalHeight / 50;
|
// const scale = img.naturalHeight / 50;
|
||||||
const width = (img.naturalWidth / scale).toFixed(0);
|
// const width = (img.naturalWidth / scale).toFixed(0);
|
||||||
const height = 50;
|
// const height = 50;
|
||||||
|
// const maxWidth = img.naturalWidth;
|
||||||
|
// const maxHeight = img.naturalHeight;
|
||||||
|
// eslint-disable-next-line standard/no-callback-literal
|
||||||
|
// const style = `style="width:${width}px;
|
||||||
|
// height:${height}px;
|
||||||
|
// max-width:${maxWidth}px;
|
||||||
|
// max-height:${maxHeight}px"`;
|
||||||
|
// 使用原始高度
|
||||||
|
const height = img.naturalHeight;
|
||||||
|
// 根据宽高比计算宽度
|
||||||
|
const width = (height * 3) / 4;
|
||||||
const maxWidth = img.naturalWidth;
|
const maxWidth = img.naturalWidth;
|
||||||
const maxHeight = img.naturalHeight;
|
const maxHeight = img.naturalHeight;
|
||||||
const style = `style="width:${width}px;height:${height}px;max-width:${maxWidth}px;max-height:${maxHeight}px"`;
|
// eslint-disable-next-line standard/no-callback-literal
|
||||||
|
const style = `style="width:${width}px;
|
||||||
|
height:${height}px;
|
||||||
|
max-width:${maxWidth}px;
|
||||||
|
max-height:${maxHeight}px"`;
|
||||||
|
// eslint-disable-next-line standard/no-callback-literal
|
||||||
insertImageAtCaret(`<img src=${data.url} ${style}/>`);
|
insertImageAtCaret(`<img src=${data.url} ${style}/>`);
|
||||||
|
|
||||||
// 恢复光标位置
|
// 恢复光标位置
|
||||||
@@ -146,10 +162,10 @@ const isEmptyContent = (html) => {
|
|||||||
const trimmedHtml = html.trim();
|
const trimmedHtml = html.trim();
|
||||||
// 检查是否为空字符串、仅包含 <br> 或仅包含 <p><br></p>
|
// 检查是否为空字符串、仅包含 <br> 或仅包含 <p><br></p>
|
||||||
return (
|
return (
|
||||||
trimmedHtml === ''
|
trimmedHtml === '' ||
|
||||||
|| trimmedHtml === '<br>'
|
trimmedHtml === '<br>' ||
|
||||||
|| trimmedHtml === '<p><br></p>'
|
trimmedHtml === '<p><br></p>' ||
|
||||||
|| trimmedHtml === '<p></p>'
|
trimmedHtml === '<p></p>'
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
@@ -12,7 +12,7 @@ export default {
|
|||||||
is_fixed: 0,
|
is_fixed: 0,
|
||||||
is_other: 0,
|
is_other: 0,
|
||||||
is_remove_other: 0,
|
is_remove_other: 0,
|
||||||
option: '<p>选项1</p>',
|
option: '<p>行标签1</p>',
|
||||||
option_config: {
|
option_config: {
|
||||||
image_url: [],
|
image_url: [],
|
||||||
title: '',
|
title: '',
|
||||||
@@ -22,26 +22,7 @@ export default {
|
|||||||
},
|
},
|
||||||
option_index: 1,
|
option_index: 1,
|
||||||
parent_id: 0,
|
parent_id: 0,
|
||||||
type: 0,
|
type: 1,
|
||||||
cascade: [],
|
|
||||||
config: []
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: '',
|
|
||||||
is_fixed: 0,
|
|
||||||
is_other: 0,
|
|
||||||
is_remove_other: 0,
|
|
||||||
option: '<p>选项2</p>',
|
|
||||||
option_config: {
|
|
||||||
image_url: [],
|
|
||||||
title: '',
|
|
||||||
instructions: [],
|
|
||||||
option_type: 0,
|
|
||||||
limit_right_content: ''
|
|
||||||
},
|
|
||||||
option_index: 1,
|
|
||||||
parent_id: 0,
|
|
||||||
type: 0,
|
|
||||||
cascade: [],
|
cascade: [],
|
||||||
config: []
|
config: []
|
||||||
}
|
}
|
||||||
@@ -67,35 +48,7 @@ export default {
|
|||||||
gradient: '',
|
gradient: '',
|
||||||
image_url: [],
|
image_url: [],
|
||||||
option_type: 0,
|
option_type: 0,
|
||||||
type: 0,
|
|
||||||
limit_right_content: '',
|
|
||||||
child_area: null,
|
|
||||||
binding_goods_id: ''
|
|
||||||
},
|
|
||||||
disable_option_update: null,
|
|
||||||
cascade: []
|
|
||||||
},
|
|
||||||
{
|
|
||||||
option: '<p style="text-align:center">列标签2</p>',
|
|
||||||
id: '1049202',
|
|
||||||
type: 2,
|
type: 2,
|
||||||
is_other: 0,
|
|
||||||
is_fixed: 0,
|
|
||||||
is_remove_other: 0,
|
|
||||||
created_at: null,
|
|
||||||
created_user_id: null,
|
|
||||||
parent_id: null,
|
|
||||||
option_index: 4,
|
|
||||||
list_id: 74491,
|
|
||||||
option_code: '',
|
|
||||||
option_config: {
|
|
||||||
title: '',
|
|
||||||
instructions: [],
|
|
||||||
price: 0,
|
|
||||||
gradient: '',
|
|
||||||
image_url: [],
|
|
||||||
option_type: 0,
|
|
||||||
type: 0,
|
|
||||||
limit_right_content: '',
|
limit_right_content: '',
|
||||||
child_area: null,
|
child_area: null,
|
||||||
binding_goods_id: ''
|
binding_goods_id: ''
|
||||||
@@ -103,6 +56,34 @@ export default {
|
|||||||
disable_option_update: null,
|
disable_option_update: null,
|
||||||
cascade: []
|
cascade: []
|
||||||
}
|
}
|
||||||
|
// {
|
||||||
|
// option: '<p style="text-align:center">列标签2</p>',
|
||||||
|
// id: '1049202',
|
||||||
|
// type: 2,
|
||||||
|
// is_other: 0,
|
||||||
|
// is_fixed: 0,
|
||||||
|
// is_remove_other: 0,
|
||||||
|
// created_at: null,
|
||||||
|
// created_user_id: null,
|
||||||
|
// parent_id: null,
|
||||||
|
// option_index: 4,
|
||||||
|
// list_id: 74491,
|
||||||
|
// option_code: '',
|
||||||
|
// option_config: {
|
||||||
|
// title: '',
|
||||||
|
// instructions: [],
|
||||||
|
// price: 0,
|
||||||
|
// gradient: '',
|
||||||
|
// image_url: [],
|
||||||
|
// option_type: 0,
|
||||||
|
// type: 0,
|
||||||
|
// limit_right_content: '',
|
||||||
|
// child_area: null,
|
||||||
|
// binding_goods_id: ''
|
||||||
|
// },
|
||||||
|
// disable_option_update: null,
|
||||||
|
// cascade: []
|
||||||
|
// }
|
||||||
]
|
]
|
||||||
],
|
],
|
||||||
last_option_index: 1,
|
last_option_index: 1,
|
||||||
|
|||||||
@@ -60,7 +60,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
</Design>
|
</Design>
|
||||||
<div class="design-button" v-if="!activeId && questionInfo.questions.length > 0">
|
<div v-if="!activeId && questionInfo.questions.length > 0" class="design-button">
|
||||||
<van-button size="small" class="theme-background" @click="show = true">
|
<van-button size="small" class="theme-background" @click="show = true">
|
||||||
+ 添加题目
|
+ 添加题目
|
||||||
</van-button>
|
</van-button>
|
||||||
@@ -750,6 +750,7 @@ onMounted(async () => {
|
|||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.ques_list {
|
.ques_list {
|
||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user