自己开发的几个VUE组件
程序员文章站
2024-01-13 11:29:34
...
找个了题目<<问卷调查>>
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>
