Vue 做调查问卷简单实例

需求

调查问卷有三种页面,单选,多选,和多行文本框,下方有上一页下一页和重置的按钮,当为第一页时,只有下一页和重置,最后一页为提交,上一页和重置,且如果单选,多选没有选择时,不可点击下一页.
综合了前面所学的技术.
这个代码运行只有三页,但是当再添加其他问题页时,将十分简单,不需要再进行多余操作,不过依旧是没写css样式
代码奉上

主代码

    
    
    
    
    
    
    


    

        

            
        
            
            
        
        提交
        下一步
        重置


    

    
    

页面组件

Vue.component("radioSelect",{
    //组件里的属性
    props:{
        //限制只能为String,默认值为gender
        name:{
            type:String,
            default:"gender"
        },
         //限制只能为String,默认值为"这是一个单选"
        title:{
            type:String,
            default:"这是一个单选"
        },
        //限制只能为数组,默认值为["这道题是空的"]
        choices:{
            type:Array,
            default:function(){
                return["这道题是空的"];
            }
        },
        
    },
    data:function(){
        let _this=this;
        let values =[];
        //将value追加, 循环拿到name为,给每个组件的name和下标组合起来,这样就不会出现相同的name了
        this.choices.forEach((item,index) => {
            values.push(_this.name+(index+''));
        });
        return{
            //将上面的values付给外面的values
            values:values,
            culValue:""
        }
    },
    template:`
    

        
{{title}}
        

            

                 
                {{item}}
            
        
    
    `,
    watch:{
        culValue:function(val){
            this.$emit("pick",val)
        }
    },
})

Vue.component("multiSelect",{
    props:{
        name:{
            type:String,
            default:"cks"
        },
        title:{
            type:String,
            default:"这是一个多选"
        },
        choices:{
            type:Array,
            default:function(){
                return["这道题是空的"];
            }
        }
        
    },
    data:function(){
        let _this=this;
        let values =[];
        this.choices.forEach((item,index) => {
            values.push(_this.name+(index+''));
        });
        return{
            values:values,
            culValue:[]
        }
    },
    template:`
    

        
{{title}}
        

            

                 
                {{item}}
            
        
    
    `,
    watch:{
        culValue:function(val){
            this.$emit("pick",val)
        }
    },
})

Vue.component("typetext",{
    props:{
        name:{
            type:String,
            default:"text"
        },
        title:{
            type:String,
            default:"这是一个文本"
        },     
    },
    data:function(){
        return {
            text:""
        }
    },
    watch:{
        text:function(val){
            this.$emit("pick",val)
        }
    }
    ,    
    template:`
    

        
{{title}}
        

            
        
    
    `     
})

按钮组件

Vue.component("mybtn",{
    props:{
        banned:{
            type:Boolean,
            default:true
        }
    },
    template:`
        
            
        
    `
    ,
    methods:{
        handeClick:function(){
            this.$emit("click")
        }
    }
})

如有问题建议,欢迎进行批评建议,vue学习告一段落,接下来开始学习notejs了,大家一起加油!!!