自己开发的几个VUE组件

    找个了题目<<问卷调查>>

 

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>