《Vue.js实战》调查问卷App习题答案

最新推荐文章于 2024-06-05 20:43:04 发布

returnadsss

最新推荐文章于 2024-06-05 20:43:04 发布

阅读量239

点赞数 1

分类专栏： vue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/returnadsss/article/details/126431940

版权

vue 专栏收录该内容

15 篇文章 1 订阅

订阅专栏

这题有点小难度，步骤：1、制作静态页面2、考虑数据交互3、考虑逻辑实现。静态页面没啥难度，很快就弄好了，整个组件构思方面我打算把每个按钮做成组件，每个页面也可以做成组件，如果还用书上的slot来嵌套就显得太臃肿了，这里使用components注册为子组件。
接下来的事情就很简单了，先在根组件定义一个page变量实现变换，再在每个页面查看按钮条件，最后稍微实现一下css样式的选择就可以了，这个题目完成了我打算直接上手vue3了，vue3和vue2的变动不会太大，学习方法和思维方式更是相差无几。代码如下。

<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>标签页组件</title>
	<style type="text/css">
	.wrapper{
        margin: 0px 10px;
        width: 400px;
        height: 600px;
        position: relative;
    }
    input[type^="check"]{
        margin-top: 10px;
    }
    button{
            display: inline-block;
            background-color: #39f;
            border: 0;
            padding: 6px;
            text-align: center;
            font-size: 12px;
            border-radius: 4px;
            cursor: pointer;
            outline: none;
            position: absolute;
    }
    button.bignext{
    	width: 35%;
        color: #fff;
        background-color: #39f;
        bottom: 0;
        left: 5%;
    }
    button.bigreset{
    	width: 35%;
        color: black;
        background-color: #EDEEDF;
        bottom: 0;
        right: 5%;
    }
    button.next{
    	width: 25%;
        color: #fff;
        background-color: #39f;
        bottom: 0;
        left: 5%;
    }
    button.reset{
  		width: 25%;
        color: black;
        background-color: #EDEEDF;
        bottom: 0;
        right: 5%;
    }
    button.last{
    	width: 25%;
        color: black;
        background-color: #EDEEDF;
        bottom: 0;
        left: 37.5%;       
    }
    button.submit{
        color: #fff;
        background-color: #39f;
       	width: 25%;
        bottom: 0;
        left: 5%;
    }
    button:disabled{
    	background-color: gray;
    }
	</style>
</head>
<body>
	<div id="app" v-cloak>
		<page1 v-if="page===1" @next="next" @last="last"></page1>
		<page2 v-if="page===2" @next="next" @last="last"></page2>
		<page3 v-if="page===3" @last="last"></page3>
	</div>
	<script src="vue.js"></script>
	<script>
		const nextstep=Vue.component('nextstep',{
			template:'<button :class="myclass" @click="handleNext" :disabled="ableclick">下一步</button>',
			props:['ableclick','isBig'],
			methods:{
				handleNext(){
					this.$emit('next');
				}
			},
			computed:{
				myclass(){
					if(this.isBig){
						return 'bignext'
					}
					else{
						return 'next'
					}
				}
			}
		});
		const last=Vue.component('last',{
			template:'<button class="last" @click="handleLast">上一步</button>',
			methods:{
				handleLast(){
					this.$emit('last')
				}
			}
		});
		const reset=Vue.component('reset',{
			template:'<button :class="myclass" @click="handleReset">重置</button>',
			props:['isBig'],
			methods:{
				handleReset(){
					this.$emit('reset')
				}
			},
			computed:{
				myclass(){
					if(this.isBig){
						return 'bigreset'
					}
					else{
						return 'reset'
					}
				}
			}
		});
		const submit=Vue.component('submit',{
			template:'<button class="submit" @submit="handleSubmit" :disabled="ableclick">提交</button>',
			props:['ableclick'],
			methods:{
				handleSubmit(){
					this.$emit('submit')
				}
			}
		});
		Vue.component('page1',{
			template:`<div class="wrapper">
    <h1>1、请选择您的性别</h1>
    <input type="radio" v-model="sex" value="male" id="male"><label for="male">男</label>
    <input type="radio" v-model="sex" value="female" id="female"><label for="female">女</label>
    <input type="radio" v-model="sex" value="secret" id="secret"><label for="secret">秘密</label>
    <nextstep :ableclick="ableclick" @next="next" isBig="true"></nextstep><reset @reset="reset" isBig="true"></reset>
    </div>`,
    		data(){
    			return {
    			sex:''
    			}
    		},
    		methods:{
    			reset(){
    				this.sex=''
    			},
    			next(){
    				this.$emit('next')
    			}
    		},
    		computed:{
    			ableclick(){
    				return this.sex!==''?false:true
    			}
    		},
    		components:{
    			nextstep,
    			reset
    		}
		});
		Vue.component('page2',{
			template:`<div class="wrapper"><h1>2、请选择您的兴趣爱好</h1>
    <input type="checkbox" v-model="rabbit" value="book" id="book"><label for="book">看书</label></br>
    <input type="checkbox" v-model="rabbit" value="swim" id="swim"><label for="swim">游泳</label></br>
    <input type="checkbox" v-model="rabbit" value="run" id="run"><label for="run">游泳</label></br>
    <input type="checkbox" v-model="rabbit" value="movie" id="movie"><label for="movie">看电影</label></br>
    <input type="checkbox" v-model="rabbit" value="music" id="music"><label for="music">听音乐</label></br>
    <nextstep :ableclick="ableclick" @next="next"></nextstep><last @last="last"></last><reset @reset="reset"></reset></div>`,
    		data(){
    			return {
    				rabbit:[]
    			}
    		},
    		methods:{
    			reset(){
    				this.rabbit=[]
    			},
    			next(){
    				this.$emit('next')
    			},
    			last(){
    				this.$emit('last')
    			}
    		},
    		computed:{
    			ableclick(){
    				return this.rabbit.length>=2&&this.rabbit.length<=3?false:true
    			}
    		},
    		components:{
    			nextstep,
    			last,
    			reset
    		}
		});
		Vue.component('page3',{
			template:`<div class="wrapper"><h1>3、请介绍一下自己</h1>
    <textarea rows="10" cols="50" v-model="text" placeholder="不少于100字"></textarea>
    <submit :ableclick="ableclick"></submit><last @last="last"></last><reset @reset="reset"></reset></div>`,
    		data(){
    			return{
    				text:''
    			}
    		},
    		methods:{
    			reset(){
    				this.text=''
    			},
    			last(){
    				this.$emit('last')
    			}
    		},
    		computed:{
    			ableclick(){
    				return this.text.length>=100?false:true
    			}
    		},
    		components:{
    			submit,
    			last,
    			reset
    		}
		});
		var app=new Vue({
			el:'#app',
			data:{
				page:1
			},
			methods:{
				next(){
					this.page+=1
				},
				last(){
					this.page-=1
				}
			}
		});

	</script>
</body>
</html>