项目：调查问卷WebApp
描述：制作一个简单的调查问卷HTML 5小应用，每页有一道题目，题目可以是单选题、多选题、填写题等。
目录结构
index.html:
WebApp
questionnaire.js:
Vue.component('questionnaire', {
template: '\
\
{{ page + 1 }} / {{ count }}\
\
提交 \
下一题 \
上一题 \
重置 \
',
props: {
questions: {
type: Array,
default: function () {
return [];
}
}
},
computed: {
count: function () {
return this.questions.length;
}
},
data: function () {
return {
page: 0,
disabledSubmit: true,
disabledNext: true
}
},
mounted: function () {
},
methods: {
handleSubmit: function () {
this.$emit('submit', this.questions);
},
handleNext: function () {
if (this.page < this.count - 1) {
this.page++;
this.updateDisabledNext();
}
},
handlePrev: function () {
if (this.page > 0) {
this.page--;
this.updateDisabledNext();
}
},
handleReset: function () {
question = this.questions[this.page];
switch (question.type) {
case 'radio':
this.$children[this.page].curValue = "";
break;
case 'multi':
this.$children[this.page].curValue = [];
break;
case 'typetext':
this.$children[this.page].value = "";
break;
default:
}
},
handlePick: function (arguments) {
question = this.questions[this.page];
switch (question.type) {
case 'radio':
case 'multi':
this.questions[this.page].picked = arguments[0];
break;
case 'typetext':
this.questions[this.page].text = arguments[0];
break;
default:
}
this.updateDisabledNext();
this.updateDisabledSubmit();
},
updateDisabledNext: function () {
var flag = false;
var item = this.questions[this.page];
if (item.type === 'radio') {
if (item.picked === "")
flag = true;
} else if (item.type === 'multi') {
if (item.picked.length < 2)
flag = true;
} else {
if (item.text.length < 10)
flag = true;
}
this.disabledNext = flag;
},
updateDisabledSubmit: function () {
var flag = false;
this.questions.forEach(function (item) {
if (item.type === 'radio') {
if (item.picked === "")
flag = true;
} else if (item.type === 'multi') {
if (item.picked.length < 2)
flag = true;
} else {
if (item.text.length < 10)
flag = true;
}
});
this.disabledSubmit = flag;
}
}
});
questions.js:
Vue.component('radioselect', {
name: 'radioselect',
props: {
name: {
type: String,
default: "question0"
},
title: {
type: String,
default: "Question"
},
choices: {
type: Array,
default: function () {
return ["C1", "C2", "C3"]
}
}
},
data: function () {
var _this = this;
var values = [];
this.choices.forEach(function (item, index) {
values.push(_this.name + (index + ''));
});
return {
values: values,
curValue: ""
}
},
template: '\
\
{{ title }}\
\
\
\
\
\
',
methods: {
},
watch: {
curValue: function (val) {
this.$emit('pick', val);
}
}
});
Vue.component('multiselect', {
name: 'multiselect',
props: {
name: {
type: String,
default: "question0"
},
title: {
type: String,
default: "Question"
},
choices: {
type: Array,
default: function () {
return ["C1", "C2", "C3"]
}
}
},
data: function () {
var _this = this;
var values = [];
this.choices.forEach(function (item, index) {
values.push(_this.name + (index + ''));
});
return {
values: values,
curValue: []
}
},
template: '\
\
{{ title }}\
\
\
\
\
\
',
methods: {
},
watch: {
curValue: {
handler: function (val) {
this.$emit('pick', val);
},
deep: true
}
}
});
Vue.component('typetext', {
name: 'typetext',
props: {
name: {
type: String,
default: "question0"
},
title: {
type: String,
default: "Question"
},
text: {
type: String,
default: ""
}
},
data: function () {
return {
value: this.text
}
},
template: '\
\
{{ title }}\
\
\
\
\
',
methods: {},
watch: {
value: function (val) {
this.$emit('pick', val);
}
}
});
mybutton.js:
Vue.component('mybutton', {
props: {
fontcolor: {
type: String,
default: "#000"
},
banned: {
type: Boolean,
default: true
}
},
template: '\
\
\
',
methods: {
getStyle: function () {
return {
color: this.fontcolor,
":active color": "#fff"
}
},
handleClick: function () {
this.$emit('click');
}
}
});