A Vue.js project
# install
npm i mali-vue-input -S
<template>
<div>
<mali-vue-input :label='telLabel' :placeholder="telPlaceholder" :type="telType" @getValue="getTelValue" ></mali-vue-input>
<mali-vue-input :label='emailLabel' :placeholder="emailPlaceholder" :type="emailType" @getValue="getEmailValue" ></mali-vue-input>
<mali-vue-input :label='numberLabel' :placeholder="numberPlaceholder" :type="numberType" @getValue="getNumberValue" ></mali-vue-input>
<mali-vue-input :label='letterLabel' :placeholder="letterPlaceholder" :type="letterType" @getValue="getLetterValue" ></mali-vue-input>
<mali-vue-input :label='letterNumberLabel' :placeholder="letterNumberPlaceholder" :type="letterNumberType" @getValue="getLetterNumberValue" ></mali-vue-input>
<mali-vue-input :label='floatNumberLabel' :placeholder="floatNumberPlaceholder" :type="floatNumberType" @getValue="getFloatNumberValue" ></mali-vue-input>
</div>
</template>
<script>
export default{
data(){
return{
telLabel: '电话',
telPlaceholder:'请输入电话',
telType:'tel',
telValue:null,
emailLabel: '邮箱',
emailPlaceholder:'请输入邮箱',
emailType:'email',
emailValue:null,
numberLabel: '整数',
numberPlaceholder:'请输入整数',
numberType:'number',
numberValue:null,
letterLabel: '字母',
letterPlaceholder:'请输入字母',
letterType:'letter',
letterValue:null,
letterNumberLabel: '数字字母',
letterNumberPlaceholder:'请输入数字,字母',
letterNumberType:'letterNumber',
letterNumberValue:null,
floatNumberLabel: '浮点数',
floatNumberPlaceholder:'请输入整数或小数',
floatNumberType:'floatNumber',
floatNumberValue:null,
}
},
methods:{
getTelValue(val){
this.telValue = val;
console.log('example telvalue:'+this.telValue);
},
getEmailValue(val){
this.emailValue = val;
console.log('example emailValue:'+this.emailValue);
},
getNumberValue(val){
this.emailValue = val;
console.log('example numberValue:'+this.numberValue);
},
getLetterValue(val){
this.letterValue = val;
console.log('example letterValue:'+this.letterValue);
},
getLetterNumberValue(val){
this.letterNumberValue = val;
console.log('example letterNumberValue:'+this.letterNumberValue);
},
getFloatNumberValue(val){
this.floatNumberValue = val;
console.log('example floatNumberValue:'+this.floatNumberValue);
}
}
}
</script>
<style>
</style>