Compare commits
3 Commits
c5741c2fc1
...
2c874866a5
| Author | SHA1 | Date | |
|---|---|---|---|
| 2c874866a5 | |||
| 91bde8cc82 | |||
| ecade0cd3e |
36
public/demo-cn.html
Normal file
36
public/demo-cn.html
Normal file
@ -0,0 +1,36 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<script type="module">
|
||||
function saveTextAsFile(text, filename) {
|
||||
const elem = document.createElement('a');
|
||||
elem.href = 'data:text/json;charset=utf-8,' + encodeURIComponent(text);
|
||||
elem.download = filename;
|
||||
elem.click();
|
||||
}
|
||||
const data = await fetch('example.json').then((res) => res.json());
|
||||
data.settings.lang = 'zh-CN';
|
||||
window.addEventListener('message', (event) => {
|
||||
saveTextAsFile(JSON.stringify(event.data), 'response.json');
|
||||
});
|
||||
window.onload = () => {
|
||||
const iframe = document.getElementById('iframe');
|
||||
iframe.contentWindow.postMessage(data, window.origin);
|
||||
};
|
||||
</script>
|
||||
<style>
|
||||
body {
|
||||
font-family: Inter, 'Helvetica Neue', Helvetica, 'PingFang SC',
|
||||
'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<iframe
|
||||
src="index.html"
|
||||
style="width: 100%; height: 100%; border: none; position: absolute; top: 0; left: 0;"
|
||||
id="iframe"></iframe>
|
||||
</body>
|
||||
</html>
|
||||
15
src/App.vue
15
src/App.vue
@ -1,6 +1,7 @@
|
||||
<script>
|
||||
import { ElMessage } from 'element-plus';
|
||||
import { isProxy } from 'vue';
|
||||
import lang from './lang.js';
|
||||
|
||||
/*
|
||||
* Specification of item data structure:
|
||||
@ -44,14 +45,16 @@ export default {
|
||||
},
|
||||
uiStatus: {
|
||||
backButtonDisabled: true,
|
||||
nextButtonText: 'Next',
|
||||
nextButtonText: lang['en-US'].next,
|
||||
nextButtonStatus: 'primary',
|
||||
},
|
||||
settings: {
|
||||
allowBack: true,
|
||||
allowAutoNext: true,
|
||||
darkMode: false,
|
||||
lang: 'en-US',
|
||||
},
|
||||
lang,
|
||||
}
|
||||
},
|
||||
created() {
|
||||
@ -86,10 +89,10 @@ export default {
|
||||
},
|
||||
updateNextButton() {
|
||||
if (this.currentIdx === this.items.length - 1) {
|
||||
this.uiStatus.nextButtonText = 'Submit';
|
||||
this.uiStatus.nextButtonText = lang[this.settings.lang].submit;
|
||||
this.uiStatus.nextButtonStatus = 'success';
|
||||
} else {
|
||||
this.uiStatus.nextButtonText = 'Next';
|
||||
this.uiStatus.nextButtonText = lang[this.settings.lang].next;
|
||||
this.uiStatus.nextButtonStatus = 'primary';
|
||||
}
|
||||
},
|
||||
@ -120,7 +123,7 @@ export default {
|
||||
const item = this.items[this.currentIdx];
|
||||
if (item.type !== 'display' && item.type !== 'checkbox' && item.required && this.itemStatus.answer === undefined) {
|
||||
ElMessage({
|
||||
message: 'This question is required.',
|
||||
message: lang[this.settings.lang].required,
|
||||
type: 'error',
|
||||
});
|
||||
return;
|
||||
@ -194,7 +197,7 @@ export default {
|
||||
<el-main id="display-content" :class="{ nodesc: !itemStatus.item.desc }">
|
||||
<template v-if="itemStatus.item.type === 'text'">
|
||||
<el-input v-model="itemStatus.answer" @keyup.enter="clickNext" autosize autofocus
|
||||
placeholder="Please input" />
|
||||
:placeholder="lang[settings.lang].input" />
|
||||
</template>
|
||||
<template v-else-if="itemStatus.item.type === 'radio'">
|
||||
<el-radio-group v-model="itemStatus.answer" v-for="[index, optText] in iterOptions()" :key="index"
|
||||
@ -229,7 +232,7 @@ export default {
|
||||
<el-button type="info" round :disabled="uiStatus.backButtonDisabled" @click="clickBack">
|
||||
<el-icon class="el-icon--left">
|
||||
<ArrowLeft />
|
||||
</el-icon>Back
|
||||
</el-icon>{{ lang[settings.lang].back }}
|
||||
</el-button>
|
||||
<el-button :type="uiStatus.nextButtonStatus" round @click="clickNext">
|
||||
{{ uiStatus.nextButtonText }}<el-icon class="el-icon--right">
|
||||
|
||||
28
src/item.js
28
src/item.js
@ -1,28 +0,0 @@
|
||||
class Item {
|
||||
static get TYPES() {
|
||||
return ["text", "radio", "checkbox", "scale"];
|
||||
}
|
||||
|
||||
constructor({type, title, optTexts, optValues = null}) {
|
||||
this._title = title;
|
||||
this._type = type;
|
||||
this._texts = optTexts;
|
||||
this._values = optValues;
|
||||
this._response = null;
|
||||
}
|
||||
|
||||
static isValid({type, title, optTexts, optValues = null}) {
|
||||
if (!title || !Item.TYPES.includes(type)) {
|
||||
return false;
|
||||
}
|
||||
if (type === "text") {
|
||||
return true;
|
||||
}
|
||||
if (optTexts && optValues && optTexts.length !== optValues.length) {
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
}
|
||||
}
|
||||
|
||||
export default Item;
|
||||
18
src/lang.js
Normal file
18
src/lang.js
Normal file
@ -0,0 +1,18 @@
|
||||
export default {
|
||||
'en-US': {
|
||||
'submit': 'Submit',
|
||||
'next': 'Next',
|
||||
'back': 'Back',
|
||||
'loading': 'Loading...',
|
||||
'input': 'Please input',
|
||||
'required': 'This field is required',
|
||||
},
|
||||
'zh-CN': {
|
||||
'submit': '提交',
|
||||
'next': '继续',
|
||||
'back': '返回',
|
||||
'loading': '加载中...',
|
||||
'input': '请输入',
|
||||
'required': '此字段不能为空',
|
||||
},
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user