weex input组件触发回车(即失去焦点)

闪闪棉花糖

于 2019-09-02 15:32:22 发布

阅读量951

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/hsqchdn/article/details/100294080

本文介绍了一个Vue组件的实现，该组件包含一个输入框，具有自动聚焦功能，并在输入后立即清空，同时记录输入值。通过监听input、blur和return事件，实现了输入框的实时响应。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<template>
    <div style="justify-content: center;align-items: center;flex-direction: row;">

        <input ref="barcode" type="text" style="width: 500px;height: 100px;border-width: 2px;" @input="oninput" @blur="onblur" @return="onreturn" v-model="barcode">

    </div>
</template>

<script>
    export default {
        data(){

            return{
                barcode:''
            }
        },methods:{
            onLoad(p){
              //  this.$refs.barcode.focus()
            },
            oninput(e){

                this.$refs.barcode.blur()
            },onblur(e){

               // this.alert('barcode的值：'+this.barcode)
                this.log('barcode的值：'+this.barcode)
                this.barcode=''
                this.$refs.barcode.focus()
            },onreturn(e){
               // this.$refs.barcode.blur()
                this.log('barcode的值：'+this.barcode)
                this.barcode=''
                this.$refs.barcode.focus()
            }


        }
    }
</script>

<style scoped>

</style>