找个了题目<<问卷调查>>
1.定义组件checkbox,radio,textarea
input-radios.js radio的组件,传入数组
Vue.component ("input-radios", { template : "<div>" + "<span v-for='(opt,index) in allOpts'>" + "<input type='radio' name='opt' :checked='initOpt==opt.id' :value='opt.id' @click='updateVal'><label>{{opt.id}}-{{opt.name}}</label>" + "</span></div>", props : { allOpts : { type : Array, default : [] }, initOpt:{ type : Number, default : 1 } }, data: function () { return { initOpt : this.initOpt } }, methods : { updateVal:function(e){ this.$emit('change',e.target.value); } }, watch:{ init:{ handler:function(newValue, oldValue) { console.log(newValue) }, deep: true } }, mounted : function () { if(this.id){ this.$emit('btnwatch'); } } });
2.checkbox组件
Vue.component ("input-checkboxs", { template : "<div>" + "<p v-for='(opt,index) in allOpts'>" + "<input type='checkbox' :checked='initOpts.indexOf(opt.id)>-1' :value='opt.id' @click='updateVal'><label>{{opt.id}}-{{opt.name}}</label></p>" + "</div>", props : { allOpts : { type : Array, default : [] }, initOpts:{ type:Array, default:[] } }, data:function(){ return { initOpts:this.initOpts } }, computed:{ }, methods : { updateVal:function(e){ if(e.target.checked){ this.$emit('change',parseInt(e.target.value),true); }else{ this.$emit('change',parseInt(e.target.value),false); } this.$emit('btnwatch'); } }, mounted : function () { this.$emit('btnwatch'); } });
3.textarea组件
Vue.component ("input-textarea", { template : "<div><div>" + "<textarea :value='content' @input='updateVal' @input='updateNotice' style='height: 100px;width:70%'></textarea>" + "</div><span>{{notice}}</span></div>", props:{ content:{ type:String, default : {} }, maxNum:{ type : Number, default : 100 }, minNum:{ type : Number, default : 20 } }, data:function(){ return { content:this.content, notice:"至少还差"+this.minNum+"字" } }, methods:{ updateVal:function(e){ var txt = e.target.value; if(txt.length>this.maxNum){ txt = e.target.value = txt.substring(0, this.maxNum); } this.$emit("change",txt); this.$emit("btnwatch",txt); }, updateNotice:function(e){ var len = e.target.value.length; if(len<this.minNum){ this.notice="至少还差"+(this.minNum-len)+"字"; }else if(len<this.maxNum){ this.notice="最多还可填写"+(this.maxNum-len)+"字"; }else{ this.notice="达到最大字数限制"; } } }, watchs:{ content:function(val){ } } });
4.index.js使用组件构建问卷调查
var app = new Vue({ el : "#app", data:{ sexs:[{id:1,name:"男"},{id:2,name:"女"},{id:3,name:"保密"}], interests:[{id:1,name:"看书"},{id:2,name:"游泳"},{id:3,name:"爬山"},{id:4,name:"看电影"},{id:5,name:"听音乐"},{id:6,name:"跑步"}], i:1, btnstate:{ prevDisabled:true, nextDisabled:true, submitDisabled:true, }, formdata:{ sex:2, interest:[1], introduce : '' } }, methods:{ prevent:function(event){ if(this.i<=3) return; }, submit: function(event) { var fd = this.formdata; var formData = new FormData(event.target); Vue.http.post('/path/to', formData).then(function(resp) { // success callback }, function (resp) { // error callback }); }, setSex:function(value){ this.formdata.sex = value; this.btnstate.nextDisabled = false; }, setInterest:function(value,checked){ if(value){ if(checked) this.formdata.interest.push(value); else{ index = this.formdata.interest.indexOf(value); if (index > -1) { Vue.delete(this.formdata.interest,index) } } } }, watchInterest:function(){ if(this.formdata.interest.length>0){ this.btnstate.nextDisabled = false; }else{ this.btnstate.nextDisabled = true; } }, watchSex:function(){ if(this.formdata.sex){ this.btnstate.nextDisabled = false; }else{ this.btnstate.nextDisabled = true; } }, watchIntroduce:function(){ if(this.formdata.introduce.length>30){ this.btnstate.submitDisabled = false; }else{ this.btnstate.submitDisabled = true; } }, setIntroduce :function(value){ this.formdata.introduce = value; }, prev:function(){ this.i=this.i-1; }, next:function(){ this.i=this.i+1; }, reset:function(){ } } });
6.具体使用index.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> </head> <body> <form @submit.prevent="prevent" id="app"> {{formdata.sex}}-{{formdata.interest}}-{{formdata.introduce}} <div v-if="i==1" style="width: 100%;"> <span>1.请问你的性别:</span> <input-radios v-on:change="setSex" v-on:btnwatch="watchSex" :all-opts="sexs" :init-opt="formdata.sex"></input-radios> </div> <div v-if="i==2" style="width: 100%;"> <span>2.请选择你的兴趣爱好:</span> <input-checkboxs v-on:change="setInterest" v-on:btnwatch="watchInterest" :all-opts="interests" :init-opts="formdata.interest"></input-checkboxs> </div> <div v-if="i==3" style="width: 100%;"> <span>3.请介绍下自己:</span> <input-textarea v-on:change="setIntroduce" v-on:btnwatch="watchIntroduce" :content="formdata.introduce" :min-num="10"></input-textarea> </div> <div style="text-align: center; position: fixed; bottom: 0px; width: 100%"> <button @click="prev" v-if="i>1" style="width: 150px; height: 50px">上一步</button> <button @click="next" v-if="i<3" :disabled="btnstate.nextDisabled" style="width: 150px; height: 50px">下一步</button> <button @click="submit" type="submit" v-if="i==3" :disabled="btnstate.submitDisabled" style="width: 150px; height: 50px">提交</button> <button @click="reset" style="width: 150px; height: 50px">重置</button> </div> </form> <script src="https://unpkg.com/vue/dist/vue.min.js"></script> <script src="https://cdn.bootcss.com/vue-resource/1.5.0/vue-resource.min.js"></script> <script src="input-radios.js"></script> <script src="input-checkboxs.js"></script> <script src="input-textarea.js"></script> <script src="index.js"></script> </body> </html>
评论