HoshinoKoji/js-exform
1
0
Fork 0
Code Issues Pull Requests Wiki Activity

Refactor App.vue to improve item validation, enhance UI layout with Element Plus, and update button functionality

Browse Source
This commit is contained in:
HoshinoKoji 2025-03-03 13:38:47 +08:00
parent 0d7e7c105e
commit 10e6944532
1 changed files with 202 additions and 168 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

92
src/App.vue
View File

@ -29,6 +29,7 @@
data() {
return {
title: undefined,
started: undefined,
items: [],
currentTitle: undefined,
currentIdx: undefined,
@ -60,6 +61,7 @@
this.currentIdx = 0;
this.updateItem();
this.started = new Date().getTime();
}
});
},
@ -96,8 +98,8 @@
},
iterOptions() {
return this.currentItem.optTexts.map((optText, index) => [
index,
optText,
this.currentItem.optValues ? this.currentItem.optValues[index] : optText,
]);
},
clickNext() {
@ -132,7 +134,12 @@
refilled: item.refilled,
responseTime: item.responseTime,
}));
window.parent.postMessage({ type: 'response', results }, window.origin);
window.parent.postMessage({
type: 'response',
started: this.started,
ended: new Date().getTime(),
results
}, window.origin);
const elem = document.createElement('a');
elem.href = 'data:text/json;charset=utf-8,' + encodeURIComponent(JSON.stringify(results));
elem.download = 'results.json';
@ -144,52 +151,79 @@
<template>
<div v-if="!isReady">Loading...</div>
<div id="container" v-if="isReady">
<span id="display-title">{{ currentTitle }}</span>
<div id="display-content">
<el-container id="main" v-if="isReady">
<el-header height=22pt id="display-title">{{ currentTitle }}</el-header>
<el-container id="display-desc" v-if="true">
<el-text class="mx-1" size="large">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut
labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit
anim id est laborum.</el-text>
</el-container>
<el-main id="display-content">
<template v-if="currentItem.type === 'text'">
<el-input v-model="currentAnswer" style="width: 240px" placeholder="Please input" />
<el-input v-model="currentAnswer" autosize placeholder="Please input" />
</template>
<template v-else-if="currentItem.type === 'radio'">
<div>
<el-radio-group
v-model="currentAnswer"
v-for="[optText, optValue] in iterOptions()"
:key="optValue"
@change="autoNext"
>
<el-radio-button :label="optText" :value="optValue" />
<el-radio-group v-model="currentAnswer" v-for="[index, optText] in iterOptions()" :key="index"
@change="autoNext">
<el-radio-button :label="optText" :value="index" />
</el-radio-group>
</div>
</template>
</div>
<div id="display-buttons">
</el-main>
<el-footer id="display-buttons">
<el-button-group>
<el-button type="primary" round :disabled="uiStatus.backButtonDisabled" @click="clickBack">
<el-icon class="el-icon--left"><ArrowLeft /></el-icon>Back
<el-button type="info" round :disabled="uiStatus.backButtonDisabled" @click="clickBack">
<el-icon class="el-icon--left">
<ArrowLeft />
</el-icon>Back
</el-button>
<el-button :type="uiStatus.nextButtonStatus" round @click="clickNext">
{{ uiStatus.nextButtonText }}<el-icon class="el-icon--right"><ArrowRight /></el-icon>
{{ uiStatus.nextButtonText }}<el-icon class="el-icon--right">
<ArrowRight />
</el-icon>
</el-button>
</el-button-group>
</div>
</div>
</el-footer>
</el-container>
</template>
<style scoped>
#container {
text-align: left;
width: 100%;
#main {
width: 50%;
background-color: #FAFCFF;
margin: 10% 25%;
padding-top: 4ex;
padding-left: 2ex;
padding-right: 2ex;
border-radius: var(--el-border-radius-round);
box-shadow: var(--el-box-shadow-dark);
font-family: var(--el-font-family);
}
#display-title {
font-size: 20px;
text-align: left;
font-size: 18pt;
font-weight: bold;
color: rgb(51.2, 126.4, 204);
}
#display-content {
margin-top: 1ex;
margin-bottom: 2ex;
#display-desc {
width: 90%;
margin: 1ex auto;
}
#display-buttons {
text-align: center;
}
#display-content {
padding-top: 1ex;
}
#display-content el-input {
width: 100%;
font-size: 16pt;
}
</style>