93 lines
2.1 KiB
Vue
93 lines
2.1 KiB
Vue
<template>
|
|
<div class="content">
|
|
<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>
|
|
<div
|
|
:contenteditable="active"
|
|
class="van-field"
|
|
@blur="saveStem($event, element)"
|
|
v-html="element.stem"
|
|
></div>
|
|
</template>
|
|
<template #input>
|
|
<div v-for="(optionItem, optionItemIndex) in element.options" :key="optionItemIndex">
|
|
<div
|
|
v-for="(item, optionIndex) in optionItem"
|
|
:key="optionIndex"
|
|
@click="chooseOption(item)"
|
|
>
|
|
<RateCharacter v-model="answerValue" :config="element.config"></RateCharacter>
|
|
<div class="tips">
|
|
<p>{{ element.config.prompt_left }}</p>
|
|
<p>{{ element.config.prompt_center }}</p>
|
|
<p>{{ element.config.prompt_right }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</van-field>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, onMounted } from 'vue';
|
|
import RateCharacter from './RateCharacter.vue';
|
|
|
|
const props = defineProps({
|
|
element: {
|
|
type: Object
|
|
},
|
|
index: {
|
|
type: Number,
|
|
default: 0
|
|
},
|
|
active: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
sn: { type: String, default: '' },
|
|
questionType: { type: [String, Number], default: 4 }
|
|
});
|
|
|
|
const answerValue = ref()
|
|
// NPS 的答案
|
|
const NPSAnswer = ref({
|
|
'question_index': props.index,
|
|
'answer': {
|
|
'1': answerValue.value
|
|
}
|
|
});
|
|
|
|
const element = ref(props.element);
|
|
const chooseId = ref('');
|
|
// 创建一个本地副本以保存更改
|
|
const localElement = ref({ ...props.element });
|
|
|
|
const saveStem = (e) => {
|
|
localElement.value.stem = e.target.innerHTML;
|
|
};
|
|
|
|
const chooseOption = (item) => {
|
|
chooseId.value = item.id;
|
|
};
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.content {
|
|
background-color: #fff;
|
|
}
|
|
|
|
.tips {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
color: #bfbfbf;
|
|
}
|
|
</style> |