码迷,mamicode.com
首页 > 其他好文 > 详细

封装vue数字键盘输入框组件

时间:2019-07-04 11:26:02      阅读:107      评论:0      收藏:0      [点我收藏+]

标签:sts   bsp   inf   white   order   ||   键盘输入   false   ima   

图片:

  技术图片

 

 

父组件:

  

<template>

    <div class="pickerDemo">

         <input type="text" v-model="keybValue" />

         <keyBoard :value="keybValue" @keyChange="keyChange" maxlen="6" :valueList="valueList"/>

         <div class="inputPas">

         <div v-for="(item,index) in inputsValue" :key="index">{{item}}</div>

         </div>

<div @click="clickMe">点击我添加验证码</div>

    </div>

</template>

 

<script>

import keyBoard from ‘./keyBoard‘

export default {

    name: ‘date‘,

    data () {

        return {

        valueList:‘‘,

        keybValue:‘‘,

        maxlen:6,

        inputsValue:[,,,,,,]

        }

    },

    components: {

    keyBoard,

    },

    mounted () {

    

    },

    methods: {

    clickMe(){

    this.valueList="124665"

    },

    keyChange(v){

    this.keybValue=v;

  this.inputsValue=[,,,,,,];

    v.split("").map((m,k)=>{

    this.inputsValue[k]=m;

    })

    },

    }

}

</script>

 

 

 

 

子组件:

  

<template>

<div>

<div class="yzmTitle" v-if="valueLists!=‘‘" @click="yzmTitleClick">验证码为“{{valueLists}}”</div>

<div class="keysBox">

<div 

v-for="(m,index) in keys" 

@click="clickKey(m,index)" 

:class="(index==keyIndex?‘active‘:‘‘ )+ (m===‘‘ || m==‘X‘?‘bgHs‘:‘‘)"

>

{{m}}

</div>

</div>

</div>

</template>

 

<script>

export default {

data(){

return {

keys:[1,2,3,4,5,6,7,8,9,"",0,‘X‘],

keyIndex:-1,

values:‘‘,

valueLists:"",

}

},

props:["value","maxlen","valueList"],

watch:{

value(newVal){

this.values=newVal

},

valueList(newVal){

this.valueLists=newVal;

}

},

    mounted(){

this.values=this.value;

if(this.valueList){

this.valueLists=this.valueList;

}else{

this.valueLists="";

}

    },

methods:{

yzmTitleClick(){

this.$emit(‘keyChange‘,this.valueLists)

},

clickKey(m,ind){

if(m==="" || m==undefined){

return

}else{

if(m==‘X‘){

this.clickStyle(ind)

this.values=this.values.substr(0,this.values.length-1)

}else{

if(this.values.length>=this.maxlen){

return false;

}else{

this.clickStyle(ind)

this.values=this.values+m

}

}

this.$emit(‘keyChange‘,this.values)

}

 

},

clickStyle(ind){

this.keyIndex=ind;

setTimeout(()=>{

this.keyIndex=-1

},300)

}

}

}

</script>

 

<style>

.yzmTitle{

height: 30px;

font-size: 16px;

color: #333;

text-align: center;

}

.keysBox{

width: 100%;

height: 400px;

}

.keysBox>div{

width: 33.33%;

height: 50px;

line-height: 50px;

text-align: center;

float: left;

border: 1px solid #f5f5f5;

box-sizing: border-box;

}

.keysBox .active{

background: #eee;

color: #333333;

}

.bgHs{

background: #eee;

}

</style>

  

 

有更好的欢迎沟通,勿喷。

 

 

 

 

封装vue数字键盘输入框组件

标签:sts   bsp   inf   white   order   ||   键盘输入   false   ima   

原文地址:https://www.cnblogs.com/laiqiangjin/p/11131076.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!