最近一直在看vue.js实战,里面有一个项目实践,需求与效果如下:
效果
需求
我现在把此项目分成index.html,question.js,index.js以及style.css四个文件(其中说到的按钮制作成组件,可以自己实现,我这里就没做)。
注:此处是手机端,请调整到手机调试下跑该项目。
index.html
Titleindex.html 注意:v-model是双向绑定的数据,其实这里用v-bind也可以,它与v-model的区别是v-bind是单向数据流,而v-model是双向数据流。也就是子组件可以通过$emit来传递数据回父组件,而v-bind只能是从父组件传递数据到子组件。
question.js
Vue.component('question',{
props:['value'],
template: '
+ '
'+ '
+ '下一步'
+ '重置'
+ '
+ '
+ '
'+ '
+ '下一步'
+ '上一步'
+ '重置'
+ '
+ '
+ '
+ '
+ '提交'
+ '上一步'
+ '重置'
+ '
data:function () {
return{
sex_list:[
{name:'男'},
{name:'女'},
{name:'保密'}
],
hobbies: [
{name:'看书'},
{name:'游泳'},
{name:'跑步'},
{name:'看电影'},
{name:'听音乐'}
],
disabledOne: true,
disabledTwo: true,
disabledThree: true,
buttonone:'buttonOne',
greycolor:'greyColor',
text:'',
page: this.value,
user_data:{
}
}
},
methods:{
radio_change: function (el,index) {
var radio_value = el.target.value;
if( typeof radio_value != 'undefined' && radio_value != '' ){
this.disabledOne = false;
this.sex_list[index].checked = true;
}else{
this.disabledOne = true;
}
},
checkboxChange: function (el,index) {
var boxvalue = el.target.checked;
var count = 0;
if( boxvalue == true ){
this.hobbies[index].checked = true;
}else{
this.hobbies[index].checked = false;
}
this.hobbies.forEach(function (item) {
if( item.checked == true ){
count ++;
}
});
if( count >=2 ){
this.disabledTwo = false;
}else {
this.disabledTwo = true;
}
},
checkLength:function (el) {
var value = el.target.value;
var length = value.length;
if( length >= 10 ){
this.disabledThree = false;
}else{
this.disabledThree = true;
}
this.text = value;
},
restartQuestionOne:function () {
this.sex_list.forEach(function (item) {
item.checked = false;
});
this.disabledOne = true;
},
restartQuestionTwo:function () {
this.hobbies.forEach(function (item) {
item.checked = false;
});
this.disabledTwo = true;
},
restartQuestionThree:function () {
this.text = '';
this.disabledThree = true;
},
nextQuestionTwo:function () {
this.page ++;
var obj = {};
this.sex_list.forEach(function (item) {
if( item.checked ){
obj.sex = item.name;
}
});
this.user_data = obj;
},
nextQuestionThree:function () {
var count = 0;
var obj = this.user_data;
obj.hobbies = [];
this.hobbies.forEach(function (item) {
if( item.checked == true ){
obj.hobbies.push(item.name);
count ++;
}
});
this.user_data = obj;
if(count > 3){
alert('不得超过三项,请重新选择');
}else{
this.page ++;
}
},
lastStepOne:function () {
this.user_data = {};
this.hobbies.forEach(function (item) {
item.checked = false;
});
this.page --;
},
lastStepTwo:function () {
this.text = '';
if( typeof this.user_data.introduction != 'undefined' ) delete this.user_data.introduction;
this.page --;
},
submit:function () {
var obj = this.user_data;
obj.introduction = this.text;
this.user_data = obj;
console.log(this.user_data);
// ajax 发送数据到后台
},
}
});
question.js注意
1、这里我把三个页面整合到一起,能过v-if,v-else-if,v-else 来判断显示模块。
2、需要注意的是单项选择的时候,标签中只要存在checked属性就会被选中,所以这里我用:checked来判断是否有该checked属性。
3、进入下一步之前先要判断当前的选择是否符合需求。单选选中之后再可以进入下一步,重置选项可以清除当前页的选择; 复选框最少要有两个选择,最多则只有三个选择,选择两个的时候显示下一步并判断当前的选项有几个,如果超出三个给出提示,并不能进入下一步。
4、textarea中有属性autofocus是进入当前页,自动聚焦。必须有rows,cols属性才能有blur事件。
5、点击所有的上一步,都要清空当前页的数据。
index.js
var app = new Vue({
el:'#app',
data:{
page:1
},
});
style.css
[v-cloak]{
display: none;
}
body,input,button,textarea,div{
margin:0;
padding:0;
}
#app{
margin:20px 15px;
}
.options{
margin-top:13px;
}
.options input[type=radio]:not(:first-child){
margin-left:13px;
}
.options input[type=radio]{
margin-right:5px;
}
.options input[type=checkbox]:not(:first-child){
margin-top:15px;
}
.options input[type=checkbox]{
margin-right:5px;
}
.not_display{
display: none;
}
textarea{
/*padding:50px 85px;*/
margin-left:11px;
margin-top:9px;
}
.able_color{
color:#3399ff;
}
.disable_color{
color:#808080;
}
.restart-color{
color:#fff;
}
.big-size{
width:200px;
}
.small-size{
width:150px;
}
.step_bottom{
height:35px;
width:100%;
position: absolute;
bottom: 30px;
}
button{
background-color: transparent;
outline: none;
border:1px solid #cccccc;
border-radius: 5px;
}
.buttonOne{
padding:7px 30px;
margin-right:10px;
width:45%;
}
input[type=submit]{
width:29%;
height:32px;
margin-right:7px;
border:1px solid #cccccc;
border-radius: 5px;
}
/*.buttonOne:hover{*/
/*background-color:#cccccc;*/
/*border:1px solid #cccccc;*/
/*}*/
.greyColor{
background-color:#808080;
border:1px solid #808080;
color:#fff;
}
.disabledColor{
background-color:#cccccc;
border:1px solid #cccccc;
}
.second_quesiton button{
padding:7px 30px;
width:30%;
margin-right:5px;
}
最终效果图截图:
最终数据: