### 1、新建一个jianpan_test.vue子组件，写入以下代码
```
<template>
<div id="app" style="height: 0;">
    <div class="typer">
        <div>
            <span>车牌前缀</span>
            <font @click="changeTyper"><img width="20" src="/static/images/5.svg"></font>  
        </div>
        <ul>
            <li class="typer-pro" v-for="item in provinces" :class="{'is-closeType':item=='粘贴','is-width':(item=='粘贴' || item=='粤' || item=='鄂' || item=='闽'), 'is-color':carColor==item}" @click="input(item)">{{item}}</li>
        </ul>
    </div>
</div>
</template>
<script>
export default {
    computed: {
        result() {
            return {
                showTyper: this.showTyper,
                carNumber: this.carNumber
            }
        }
    },
    data () {
        return {
            // 输入法的值，0表示不显示，1表示显示输入键盘，2表示手动关闭键盘
            showTyper: 0,
            provinces:[
                "京","津","泸","翼","豫","云","辽","粤",
                "黑","湘","皖","鲁","新","苏","浙","鄂",
                "赣","桂","甘","晋","蒙","陕","吉","闽",
                "贵","川","青","藏","琼","宁","渝","粘贴"
            ],
            // 输入的值
            carNumber:'',
            // 改变颜色的输入值存储器
            carColor:'', 
        }
    },

methods: {
        // 手动关闭键盘
        changeTyper:function () {
            this.showTyper = 2;
            // 传递参数给父组件
            this.$emit('getLinkage', this.result);
        },
        // 键盘点击事件，传入键盘本身的值
        input:function (item) {
            // 过滤掉不能点击的按钮
            if (item == '粘贴') {
            return;
            }
            // 键盘赋值
            this.carNumber = item;
            this.carColor  = item;
            // 为了体验更好，这里不自动关闭键盘
            this.showTyper = 1;
            // 传递参数给父组件-方便即时显示数据
            this.$emit('getLinkage', this.result);
            setInterval(() => { 
                this.carColor  = '';
            }, 500);
            // 为了体验更好，这样不自动关闭键盘
            // this.showTyper = 0;
            return;
        }
    }
  
}
</script>
<style>
.typer{position:fixed;bottom:0;background-color:rgba(204,204,204,1);height:190px;width:100%}
.typer div{width:100%;float:left;height:35px;line-height:35px;background:#fff;}
.typer div span{font-size:14px;color:#666; float:left;margin-left:10px}
.typer div font{float:right;margin-right:10px}
.typer div font img{margin-top:8px}
.typer ul,.typer li{margin:0;padding:0;list-style:none}
.typer li{float:left;color:#333;text-align:center;font-size:14px;background-color:#fff;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;-webkit-box-shadow:2px 2px 1px #a8a8a8;-moz-box-shadow:2px 2px 1px #a8a8a8;box-shadow:2px 2px 1px #a8a8a8}
.typer li.typer-pro{width:8.95%;height:28.5px;margin:5px 0 4.5px 2.2%;line-height:28.5px;background:#fff}
.typer li.typer-pro.is-width{width:18%}
.typer li.typer-pro.is-closeType{background-color:#e4e4e4;float:left}
.typer li.typer-pro.is-color{background-color:#e4e4e4}
</style>
```

### 2、新建一个Test.vue父组件，写入以下代码：
```
<template>
  <div id="app">
    <transition name="fade">
      <jianpan @getLinkage='_showTyperMsg' v-show="showTyper==1"></jianpan>
    </transition>
    <p v-html="carNumber" @click="_showTyper"></p>
  </div>
</template>

export default {
  data(){
    return{
      // 默认情况下子组件是隐藏的
      showTyper: 0,
      carNumber:'粤'
    }
  },
  // 注册子组件
  components:{
    'jianpan':Jianpan, 
  },
  methods:{
    // 接收子组件数据
    _showTyperMsg(msg){ 
      this.showTyper = msg.showTyper
      this.carNumber = msg.carNumber
    },
    // 显示子组件
    _showTyper(){
      this.showTyper = 1
    }
  }
}
</script>

### 3、注意事项
1、showTyper为0时是默认关闭
2、showTyper为1时是显示键盘
3、showTyper为2时是用户点击关闭后

效果如下图：
![](https://blog.junphp.com/public/upload/20181107171411_985.gif)

已有0条评论

添加新评论☺

如果认为本文对您有所帮助请赞助本站

支付宝扫一扫赞助

已有0条评论

添加新评论☺