找个了题目<<问卷调查>>
1.定义组件checkbox,radio,textarea
input-radios.js radio的组件,传入数组
Vue.component ("input-radios", {
template : "" +
"" +
"" +
"",
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 : "" +
"" +
"
" +
"",
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 : "" +
"" +
"{{notice}}",
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
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
