5ae09ce20e
- 调整了 Choice、Completion 和 FileUpload 组件的样式- 优化了预览页面的滚动和固定元素布局 - 添加了底部支持信息的固定显示- 统一了样式和间距，提高了页面的视觉效果和用户体验
92 lines
1.9 KiB
Vue
92 lines
1.9 KiB
Vue
<template>
|
|
<div class="cont">
|
|
<van-field
|
|
v-model="element.stem"
|
|
:label="element.stem"
|
|
:required="element.config.is_required === 1"
|
|
label-align="top"
|
|
class="contenteditable-question-title"
|
|
>
|
|
<template #left-icon> {{ isPreview ? element.title : index + 1 }}. </template>
|
|
<template #label>
|
|
<contenteditable
|
|
v-model="element.stem"
|
|
:active="active"
|
|
@blur="emitValue"
|
|
className="contenteditable-label"
|
|
:errorMessage="errorMessage"
|
|
></contenteditable>
|
|
</template>
|
|
<template #input>
|
|
<textarea
|
|
v-model="completionValue"
|
|
class="other_input"
|
|
:placeholder="element.config.placeholder"
|
|
:rows="element.config.line_height"
|
|
></textarea>
|
|
</template>
|
|
</van-field>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { toRefs } from 'vue';
|
|
|
|
const completionValue = defineModel('completionValue', { default: '', type: String });
|
|
const props = defineProps({
|
|
isPreview: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
element: {
|
|
type: Object,
|
|
default: () => {
|
|
// 补充
|
|
}
|
|
},
|
|
index: {
|
|
type: Number,
|
|
default: 0
|
|
},
|
|
active: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
questionType: { type: [String, Number], default: 4 }
|
|
});
|
|
const errorMessage = defineModel('errorMessage', {
|
|
type: String,
|
|
default: ''
|
|
});
|
|
// 创建一个本地副本以保存更改
|
|
const emit = defineEmits(['update:element']);
|
|
const { element } = toRefs(props);
|
|
const emitValue = () => {
|
|
emit('update:element', element.value);
|
|
};
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.cont {
|
|
.other_input {
|
|
width: 100%;
|
|
height: 89px;
|
|
margin-top: 10px;
|
|
margin-bottom: 10px;
|
|
padding: 12px;
|
|
border: 1px solid #f4f4f4;
|
|
border-radius: 5px;
|
|
outline: none;
|
|
}
|
|
|
|
.other_input::placeholder {
|
|
color: #d7d7d7;
|
|
font-size: 14px;
|
|
}
|
|
}
|
|
|
|
.text_value {
|
|
border: 1px solid #ccc !important;
|
|
}
|
|
</style>
|