输入框```````` } input{ padding: 4px 8px; border-radius: 2px; o

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
      .box{
          padding: 3px;
      }
    input{
        padding: 4px 8px;
        border-radius: 2px;
        outline: none;
        border:1px solid #0000005C;
        height: 22px;
        font-size: 14px;
        transition: box-shadow 300ms ,border 200ms;
    }
    input:hover{
        box-shadow: 0 0 0px 3px #5e7ce040;
    }
    input:focus{
        border:1px solid #5e7ce0;
        box-shadow: 0 0 0px 3px #5e7ce040;
    }
  </style>
</head>
<body>
<div class="box">
  <input type="text">
</div>
<script>
</script>
</body>
</html>

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

<script>
export default {
  name: 'HelloWorld',
  props: {
    value: String
  },
  data(){
    return{
      text:'',
      changeEvent:''
    }
  },
  methods:{},
  mounted() {
    this.changeEvent = this.$listeners.input;
  },
  watch:{
    text(){
      this.changeEvent(this.text)
    },
    value(){
      this.text = this.value;
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>