mali-vue-input v0.1.0

mali-vue-input

A Vue.js project

Build Setup

# 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>