Как сделать такую функцию vuejs?

187

19 июля 2018, 15:10

На странице есть иконка, при наведение на нее, она исчезает и вместо нее появляется input:

<header id="header">
   <div class="uk-navbar-right">
         <ion-icon @mouseover="show=true" v-show="mouse2" name="search" size="large"></ion-icon>                
         <form action="#" @blur="show=false">
            <div class="uk-inline">
                <ion-icon v-show="mouse" v-bind:class="{{@style}}" name="search" size="large"></ion-icon>
                <input v-show="show" type="text" class="uk-input" placeholder="{{ @message }}">    
            </div>
        </form>
    </div>
</header>
<script>
        new Vue({
            el:"#header",
            data:{
                message: "Hello World",
                show: false,
                mouse: false,
                mouse2: true,
                style: "uk-form-icon uk-form-icon-flip"
            },
            methods:{
                mouseover: function(){
                    this.show = !this.show
                    this.mouse = !this.mouse
                    this.mouse2 = !this.mouse2
                }
            }
        })
    </script>

А как сделать, чтоб при наведение на иконку появлялся input и после того как курсор будет убран с Input'а через 2сек опять появлялась иконка?

Answer 1

Смотри, тебе нужно событие повесить на .uk-navbar-right

<header id="header">
  <div class="uk-navbar-right" @mouseover="onMouseover" @mouseout="onMouseout">
    <ion-icon v-if="!show" name="search" size="large"></ion-icon>                
    <form action="#" v-else>
      <div class="uk-inline">
        <ion-icon v-show="mouse" v-bind:class="{{@style}}" name="search" size="large"></ion-icon>
        <input v-show="show" type="text" class="uk-input" placeholder="{{ @message }}">    
      </div>
    </form>
  </div>
</header>
<script>
    new Vue({
        el:"#header",
        data:{
            message: "Hello World",
            show: false,
            mouse: false,
            mouse2: true,
            style: "uk-form-icon uk-form-icon-flip"
        },
        methods:{
            onMouseover: function(){
                clearTimeout(this._timer)
                this.show = true
            },
            onMouseout: function(){
                clearTimeout(this._timer)
                var self = this
                this._timer = setTimeout(function(){
                    self.show = false
                },2000)
            }
        }
    })
</script>