vue车牌输入组件使用方法详解

2024-04-02 19:04:59 637人浏览薄情痞子

摘要

一个简单的车牌输入组件（Vue），供大家参考，具体内容如下效果图： vue代码： <template> <div class="enTer">

一个简单的车牌输入组件（Vue），供大家参考，具体内容如下

效果图：

vue代码：


<template>
    <div class="enTer">
      <div class="plateInput" id="plateInput">
        <div class="item" :class="{active: plateInput.input.type === 'p1'}" @click.stop="clickInput('p1')"><span id="p1">{{plateInput.input.value.p1}}</span></div>
        <div class="item" :class="{active: plateInput.input.type === 'p2'}" @click.stop="clickInput('p2')"><span id="p2">{{plateInput.input.value.p2}}</span></div>
        <div class="item" :class="{active: plateInput.input.type === 'p3'}" @click.stop="clickInput('p3')"><span id="p3">{{plateInput.input.value.p3}}</span></div>
        <div class="item" :class="{active: plateInput.input.type === 'p4'}" @click.stop="clickInput('p4')"><span id="p4">{{plateInput.input.value.p4}}</span></div>
        <div class="item" :class="{active: plateInput.input.type === 'p5'}" @click.stop="clickInput('p5')"><span id="p5">{{plateInput.input.value.p5}}</span></div>
        <div class="item" :class="{active: plateInput.input.type === 'p6'}" @click.stop="clickInput('p6')"><span id="p6">{{plateInput.input.value.p6}}</span></div>
        <div class="item" :class="{active: plateInput.input.type === 'p7'}" @click.stop="clickInput('p7')"><span id="p7">{{plateInput.input.value.p7}}</span></div>
        <div class="item" :class="{active: plateInput.input.type === 'p8',new: !plateInput.input.value.p8}" @click.stop="clickInput('p8')"><span id="p8">{{plateInput.input.value.p8}}</span></div>
      </div>
      <div class="bords" v-if="plateInput.input.dialogVisible">
        <div class="bor">
          <div class="btns">
            <button type="primary" size="small" plain @click="hiddenKeybord">取消</button>
            <button type="primary" size="small" plain @click="enterWord">确认</button>
          </div>
          <ul class="keyboard province" id="province" v-if="plateInput.input.dialogVisible && plateInput.input.type === 'p1'">
            <li v-for="i in Keyboard.province" @click.stop="clickKeyboard(i)">{{i}}</li>
            <li class="delete" @click.stop="clickDelete"><i class="icon">&#xe602;</i>删</li>
          </ul>
          <ul class="keyboard province" id="number" v-if="plateInput.input.dialogVisible && plateInput.input.type !== 'p1'">
            <li v-for="i in Keyboard.number" :class="{num: plateInput.input.type === 'p2' && parseInt(i) >= 0 && parseInt(i) <= 9}" @click.stop="clickKeyboard(i)">{{i}}</li>
            <li class="delete deletes" @click.stop="clickDelete"><i class="icon">&#xe602;</i>删</li>
          </ul>
        </div>
      </div>
    </div>
</template>
<style scoped lang="sCSS">
  .enTer{
    .plateInput{
      padding:0 20rpx;
      display: flex;
      justify-content: space-around;
      .item{
        width: 60rpx;
        height: 75rpx;
        border:1rpx solid #FF5100;
        border-radius: 10rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 28rpx;
      }
      .active{
        border-color: #3399ff;
      }
    }
    .bords{
      position: fixed;
      bottom: 0;
      left: 0;
      z-index: 999;
      .bor{
        position: relative;
        .btns{
          width: 100%;
          height: 70rpx;
          background: #fff;
          border-top:1rpx solid rgba(0,0,0,0.05);
          position: absolute;
          display: flex;
          justify-content: space-between;
          align-items: center;
          top: -70rpx;
          left: 0;
          button{
            margin:0;
          }
        }
      }
      // 键盘
      .keyboard{
        position:fixed;
        bottom:0;
        left:0;
        background-color:#ced2d9;
        width:100%;
        height:360rpx;
        margin:0;
        padding:0;
        font-size:36rpx;
        z-index:1;
      }
      .keyboard li {
          list-style:none;
          border-radius:10rpx;
      }
      .keyboard li {
          float:left;
          background-color:#fefefe;
          margin-left:15rpx;
          margin-top:15rpx;
      }
      .num{
        color: rgba(0,0,0,0.15);
      }
      .province{
        position: relative;
      }
      .provinces{
        position: relative;
      }
      .province li{
          width:calc((100% - 15rpx * 11) / 10);
          height:calc((100% - 15rpx * 5) / 4);
          display:flex;
          display:-WEBkit-flex;
          align-items:center;
          -webkit-align-items:center;
          justify-content: center;
          -webkit-justify-content: center;
      }
      .province li.delete{
          width:calc((100% - 15rpx * 11) / 10 * 2 + 15rpx);
      }
      .province li.deletes{
          width:calc((100% - 15rpx * 11) / 10 * 2 + 90rpx);
      }
      .disabled{
        color: rgba(0,0,0,0.15);
      }
    }
  }
</style>

event事件：


export let life = {
  created () {
    // this.currentPlate = this.plateNumber
    // console.log(this.plateNumber)
    // this.EnterPlateNumber.input.firstWord = this.plateNumber.slice(0,1)
    // this.EnterPlateNumber.input.secondWord = this.plateNumber.slice(1,2)
    // this.EnterPlateNumber.input.lastWords = this.plateNumber.slice(2,9)
  }
}
export let event = {
  clickInput (type) {
    this.methods('clickInput',type)
  },
  clickKeyboard (val) {
    if (this.plateInput.input.type === 'p2' && parseInt(val) >= 0 && parseInt(val) <= 9) return
    this.methods('clickKeyboard', val)
    this.methods('setPlateNumber')
    this.methods('setDirectIssuedPlateNumber')
  },
  //删除车牌
  clickDelete () {
    this.methods('clickDelete')
    this.methods('setPlateNumber')
    this.methods('setDirectIssuedPlateNumber')
  },
  hiddenKeybord(){
    this.methods('hiddenKeybord')
  },
  enterWord(){
    this.methods('enterWord')
  }
}
export let watch = {}

methods方法：


export default class {
  clickInput(type){
    this.plateInput.input.type = type
    this.plateInput.input.dialogVisible = true
  }
  hiddenKeybord(){
    this.plateInput.input.dialogVisible = false
  }
  enterWord(){
    this.plateInput.input.dialogVisible = false
  }
  clickKeyboard (val) {
    this.plateInput.input.value[this.plateInput.input.type] = val
    let type = this.plateInput.input.type.split('p')[1]
    if (type !== '8') {
      this.plateInput.input.type = 'p' + (parseInt(type) + 1)
    }
  }
  clickDelete () {
    this.plateInput.input.value[this.plateInput.input.type] = undefined
    let nu = this.plateInput.input.type.split('p')[1]-1
    if(nu>=0){
      this.plateInput.input.value['p'+nu] = undefined
    }
    let type = this.plateInput.input.type.split('p')[1]
    if (type !== '1') {
      this.plateInput.input.type = 'p' + (parseInt(type) - 1)
    }
  }
  setPlateNumber () {
    if (this.plateInput.input.plateNumber) {
      this.plateNumber1 = this.plateInput.input.plateNumber
    }else{
      this.plateNumber1 = undefined
    }
  }
  setDirectIssuedPlateNumber () {
    if (this.plateInput.input.plateNumber) {
      this.plateNumber1 = this.plateInput.input.plateNumber
    }else{
      this.plateNumber1 = undefined
    }
  }

}

model数据：


export let props = ['name','plateNumber','noRightPart']
export let model = {
  currentPlate:undefined,
  plateInput:{
    input:{
      value:{
        p1:'桂',
        p2:'B',
        p3:2,
        p4:2,
        p5:2,
        p6:2,
        p7:2,
        p8:0
      },
      type:'p1',
      dialogVisible:false
    }
  },
  Keyboard: {
    province: ['京', '津', '冀', '晋', '蒙', '辽', '吉', '黑', '沪', '苏', '浙', '皖', '闽', '赣', '鲁', '豫', '鄂', '湘', '粤', '桂', '琼', '渝', '川', '贵', '云', '藏', '陕', '甘', '青','宁','新','台','港','澳','使','领','警','学'],
    number: ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'A', 'B', 'C','D', 'E', 'F', 'G','H', 'J', 'K', 'L', 'M', 'N', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z', '学', '港', '澳']
  },
}
export let computed = {
  plateNumber1 : {
    get () {
      return this.plateNumber||''
    },
    set (val) {
      this.$emit('update:plateNumber', val)
    }
  }
}

因为这里用了独家的框架，所以根据需要把相应的生命周期函数放到正常的vue项目的位置，把event就写成正常的函数，methods就是i正常的methods里面的方法，model就是data里return的数据。

关于vue.js组件的教程，请大家点击专题vue.js组件学习教程进行学习。

更多vue学习教程请阅读专题《vue实战教程》

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程网。

点击免费下载>>软考高级考试备考技巧/历年真题/备考精华资料

--结束END--

本文标题: vue车牌输入组件使用方法详解

本文链接: https://www.lsjlt.com/news/129360.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑，方便收藏和打印～

下载Word文档

去做题

猜你喜欢

vue车牌输入组件使用方法详解

一个简单的车牌输入组件（vue），供大家参考，具体内容如下效果图： vue代码： <template> <div class="enTer">...

99+

2024-04-02
vue车牌搜索组件使用方法详解

一个简单的车牌输入组件（vue），供大家参考，具体内容如下代码： vue代码： <template> <div class="pulls"> ...

99+

2024-04-02
vue3.0翻牌数字组件使用方法详解

本文实例为大家分享了vue3.0翻牌数字组件使用的具体代码，供大家参考，具体内容如下代码 <template> <div class="number-cou...

99+

2024-04-02
Vue分页器组件使用方法详解

本文实例为大家分享了Vue分页器组件的使用，供大家参考，具体内容如下效果图如下：鼠标悬浮时切换为箭头： ①创建自定义分页组件Pager.vue：预设主题色为@themeCol...

99+

2024-04-02
vue验证码组件使用方法详解

本文实例为大家分享了vue验证码组件使用的具体实现代码，供大家参考，具体内容如下代码如下： <template> <div class="join...

99+

2024-04-02
vue滑动解锁组件使用方法详解

本文实例为大家分享了vue滑动解锁组件的使用，供大家参考，具体内容如下这是一个pc端的滑动解锁组件效果图：话不多说，直接上代码 html部分 <template>...

99+

2024-04-02
Vue滑块解锁组件使用方法详解

本文实例为大家分享了Vue滑块解锁组件的使用，供大家参考，具体内容如下依据 JS拖动滑块验证开发的 Vue 滑块解锁组件。 <template> <div ...

99+

2024-04-02
Vue对话框组件使用方法详解

本文实例为大家分享了Vue对话框组件的使用，供大家参考，具体内容如下效果如下图所示：（整体样式模仿ant-design-vue Modal样式，同时阴影覆盖浏览器窗口） ①创建组...

99+

2024-04-02
vue输入框组件开发过程详解

本文实例为大家分享了vue输入框组件开发过程的具体代码，供大家参考，具体内容如下 input-number.js function isValueNumber(value) { ...

99+

2024-04-02
Vue自嵌套树组件使用方法详解

本文实例为大家分享了Vue自嵌套树组件的使用方法，供大家参考，具体内容如下效果图注意事项组件自嵌套，定义名称时就定义为组件名单选和多选用户时...

99+

2024-04-02
vue加载天气组件使用方法详解

本文实例为大家分享了vue加载天气组件的使用方法，供大家参考，具体内容如下首先我们进入中国天气网生成一段代码根据需要设置天气样式复制并修改生成的这段代码到vue中将scr...

99+

2024-04-02
Vue跑马灯marquee组件使用方法详解

本文实例为大家分享了Vue跑马灯marquee组件的具体代码，供大家参考，具体内容如下一、实现效果二、实现过程前言：最开始用间隔器方案制作了一个跑马灯，但是放在移动端中会出现...

99+

2024-04-02
Vue加载中动画组件使用方法详解

本文实例为大家分享了Vue加载中动画组件的使用，供大家参考，具体内容如下（模仿ant-design加载中样式）效果图如下： ①创建Loading.vue组件： <templ...

99+

2024-04-02
vue中keepAlive组件的作用和使用方法详解

前言在面试的时候，很多面试官再问vue的时候可能就会提一嘴，你知道keep-alive有什么作用吗？ keep-alive是vue内置的一个组件，而这个组件的作用就是能够缓存不活动...

99+

2024-04-02
Vue子组件调用父组件方法案例详解

一、直接在子组件中通过this.$parent.event来调用父组件的方法  <template> <div> ...

99+

2024-04-02
uniapp添加车牌组件的实现与使用

目录1.先看效果2.插件实现3.插件使用总结1.先看效果 2.插件实现 <!-- * @Author: dfh * @Date: 2022-04-20 09:43:44 ...

99+

2024-04-02
vue之ele多级联组件的使用方法详解

本文实例为大家分享了vue之ele多级联组件的使用具体代码，供大家参考，具体内容如下多级联组件的使用 html <el-cascader ref="casc...

99+

2024-04-02
vue-seamless-scroll无缝滚动组件使用方法详解

本文实例为大家分享了vue无缝滚动组件vue-seamless-scroll的具体实现代码，供大家参考，具体内容如下下载 cnpm i -S vue-seamless-scrol...

99+

2024-04-02
在 Vue 中控制表单输入方法详解

Vue中v-model的思路很简单。定义一个可响应式的text（通常是一个ref），然后用v-model="text"将这个值绑定到一个input上。这就创造了一...

99+

2023-05-14

vue表单输入绑定 vue绑定表单数据 Vue 中怎么实现表单绑定
aspjpeg组件使用方法284455详解

1、什么是AspJpeg？ AspJpeg是一款功能强大的基于Microsoft IIS环境的图片处理组件，网络上对其进行详细和深入介绍的中文文章并不多，即使有一般也只是牵涉到图片缩...

99+

2023-05-20

aspjpeg组件使用方法