vue组件练习(调查问卷),主要运用到slot和组件知识_vue线下问卷调查用什么组件-CSDN博客

本文链接：https://blog.csdn.net/qq_39188150/article/details/89915331

vuejs实战,问卷调查练习.
在这里插入图片描述
一、要求:
1、实现上下翻页,提交等功能
2、验证选择框的选择数量等
3、按钮做成组件

二、思路:
1、三个页面,表现形式是相同的,只是内容不同,这种情况选择用作用域插槽比较好,作用域插槽,数据来自于子组件
2、按钮要根据当前页,用v-if或者v-show来控制置灰或者显示,做出组件

三、CSS

<style type="text/css">

        .my-page{
            margin-top: 20px;
            border: 1px solid #1E9FFF;
            height: 420px;
        }

        .my-page-title{
            background-color: #1E9FFF;
            text-align: center;
            font-size: 15px;
            font-family: "Angsana New";
            height: 30px;
        }

        .my-page-title span{
            line-height: 30px;
        }

        .my-page-testpaper{
            margin: 25px auto;
            height: 300px;
            display: flex;
            flex-flow:column  wrap;
            justify-content: center;
            align-items:center;
        }

        .my-page-testpaper-elm-center{
            display: flex;
            flex-flow:row  nowrap;
            justify-content: center;
            align-items:center;
        }

        .my-page-mybtn{
            text-align: center;
        }

        .my-page-mybtnelm{
            margin-left: 10px;
        }

        .computCls{
            opacity:0.5;
            pointer-events:none;
        }

</style>

四、HTML

<body>
    <div id="app" class="container">
        <div class="row">
            <div class="col-md-4"></div>
            <div class="col-md-4">
                <div class="my-page">
                    <div class="my-page-title">
                        <span>调查问卷</span>
                    </div>
                    <testpaper :currentpage="currentpage" :quesnairelist="quesnairelist" :sex="sex" :hobby="hobby" :introduc="introduc">
                        <template slot="my-page-testpaper" scope="props">
                            <div class="my-page-testpaper-elm" v-show="props.quesnaireId==currentpage">
                                <div class="my-page-testpaper-elm-problem" >
                                    <span>{{props.quesnaireId}}.{{props.quesnaireTitle}}</span>
                                </div>
                                <div class="my-page-testpaper-elm-center">
                                    <div class="my-page-testpaper-elm-answer" v-if="props.quesnaireType=='radio'" v-for="(answer,index) in props.quesnaireValue">
                                        <label for="index">{{answer}}</label>
                                        <input id="index" type="radio" :value="answer" v-model="sex">
                                    </div>
                                    <div class="my-page-testpaper-elm-answer" v-if="props.quesnaireType=='checkbox'" v-for="(answer,index) in props.quesnaireValue">
                                        <label for="index">{{answer}}</label>
                                        <input id="index" type="checkbox" :value="answer" v-model="hobby">
                                    </div>
                                    <div class="my-page-testpaper-elm-answer" v-if="props.quesnaireType=='textarea'">
                                        <textarea id="index" placeholder="请输入简介,不少于5个字" v-model="introduc" style="height: 70px"></textarea>
                                    </div>
                                </div>
                            </div>
                        </template>
                    </testpaper>
                    <mybtn :btnlist="btnlist" :currentpage="currentpage" :quesnairelist="quesnairelist" >
                        <template slot="my-page-mybtn" scope="props">
                            <button :id="props.btnid" @click="handlerClick" v-show="props.btnid=='up'" :class="{computCls:currentpage==1}" class="btn btn-primary my-page-mybtnelm">{{props.btnname}}</button>
                            <button :id="props.btnid" @click="handlerClick" v-show="props.btnid=='next' && currentpage!=quesnairelist.length"  class="btn btn-primary my-page-mybtnelm">{{props.btnname}}</button>
                            <button :id="props.btnid" @click="handlerClick" v-show="props.btnid=='rest'"  class="btn btn-primary my-page-mybtnelm">{{props.btnname}}</button>
                            <button :id="props.btnid" @click="handlerClick" v-show="props.btnid=='submit' && currentpage==quesnairelist.length"  class="btn btn-primary my-page-mybtnelm">{{props.btnname}}</button>
                        </template>
                    </mybtn>
                </div>
            </div>
            <div class="col-md-4"></div>
        </div>
    </div>
</body>

五、JS

<script type="text/javascript">
    
    Vue.component('testpaper',{
       template:'\
        <div class="my-page-testpaper">\
            <slot name="my-page-testpaper" v-for="quesnaire in quesnairelist" \
            :quesnaire-id="quesnaire.id" :quesnaire-title="quesnaire.title" \
            :quesnaire-type="quesnaire.type" :quesnaire-preserve="quesnaire.preserve" \
            :quesnaire-introduc="quesnaire.introduc" :quesnaire-value="quesnaire.value"> \
            </slot>\
        </div>\
       ',
        props:{
            quesnairelist:{},
            currentpage:{}
        }
    });

    Vue.component('mybtn',{
       template: '\
            <div class="my-page-mybtn">\
                <slot name="my-page-mybtn" v-for="btn in btnlist" :btnid="btn.id" :btnname="btn.name"></slot>\
            </div>\
       ',
        props:{
            btnlist:{},
            currentpage:{},
            quesnairelist:{}
        }
    });


    var app=new Vue({
        el:"#app",
        data:{
            quesnairelist:[
                {id:1,title:"请问您的性别是?",type:"radio",preserve:'sex',value:['男','女','保留']},
                {id:2,title:"请选择您的兴趣爱好:",type:"checkbox",preserve:'hobby',value:['篮球','足球','排球']},
                {id:3,title:"请问您的性别是?",type:"textarea",preserve:'introduc',value:''}
            ],
            btnlist:[
                {id:"up",name:"上一题"},
                {id:"next",name:"下一题"},
                {id:"rest",name:"重置"},
                {id:"submit",name:"提交"}
            ],
            currentpage:1,
            sex:'',
            hobby:[],
            introduc:''
        },
        methods:{
            handlerClick:function (e) {
                if (e.target.id=='rest') {
                    if (this.currentpage==1){this.sex=''};
                    if (this.currentpage==2){this.hobby=[]};
                    if (this.currentpage==3){this.introduc=''};
                };
                if (e.target.id=='next') {
                    var obj=this.isClick(this.currentpage);
                    if (!obj.isTrue){
                        alert(obj.isString);
                        return false;
                    };
                    this.currentpage++;
                };

                if (e.target.id=='submit') {
                    var obj=this.isClick(this.currentpage);
                    if (!obj.isTrue){
                        alert(obj.isString);
                        return false;
                    };
                    alert("提交成功!,您的性别为:"+this.sex+"<br>"+"您的爱好是:"+this.hobby+"<br>"+"您的简介是："+this.introduc)
                };


                if (e.target.id=='up') {this.currentpage--;};
            },
            isClick:function (page) {
                var dataArr=this.quesnairelist.filter(function (item) {
                    return item.id==page
                });
                var data=dataArr[0];

                var obj={};
                var isString='';
                var isTrue=true;
                if (data.preserve=='sex') {
                    isTrue=this.sex.length==0?false:true;
                    isString='性别没有选择,不能提交!';
                }else if (data.preserve=='hobby') {
                    isTrue=this.hobby.length<2?false:true;
                    isString='爱好少于2个,不能提交!';
                }else {
                    isTrue=this.introduc.length<5?false:true;
                    isString='简介少于5个字,不能提交!';
                };
                obj.isTrue=isTrue;
                obj.isString=isString;
                return obj;
            }
        }
    });
</script>