74 lines
1.6 KiB
Vue
74 lines
1.6 KiB
Vue
<template>
|
|
<div class="cont">
|
|
<van-field
|
|
v-model="element.stem" :label="element.stem" :required="element.config.is_required === 1"
|
|
label-align="top"
|
|
>
|
|
<template #left-icon>
|
|
{{ index + 1 }}
|
|
</template>
|
|
<template #label>
|
|
<contenteditable v-model="element.stem" :active="active" @blur="emitValue"></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({
|
|
element: {
|
|
type: Object,
|
|
default: () => {
|
|
// 补充
|
|
}
|
|
},
|
|
index: {
|
|
type: Number,
|
|
default: 0
|
|
},
|
|
active: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
questionType: { type: [String, Number], default: 4 }
|
|
});
|
|
// 创建一个本地副本以保存更改
|
|
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%;
|
|
min-height: 40px;
|
|
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>
|