Я хотел бы показать div при наведении указателя мыши на элемент в vue.js. Но я не могу заставить его работать.
Похоже, что в vue.js. нет события hover или mouseover. Это правда?
Можно ли объединить методы jquery hover и vue?
Я хотел бы показать div при наведении указателя мыши на элемент в vue.js. Но я не могу заставить его работать.
Похоже, что в vue.js. нет события hover или mouseover. Это правда?
Можно ли объединить методы jquery hover и vue?
Вот рабочий пример того, о чем я думаю, вы просите.
http://jsfiddle.net/1cekfnqw/3017/
<div id="demo">
<div v-show="active">Show</div>
<div @mouseover="mouseOver">Hover over me!</div>
</div>
var demo = new Vue({
el: '#demo',
data: {
active: false
},
methods: {
mouseOver: function(){
this.active = !this.active;
}
}
});
я чувствую, что логика для зависания неверна. он просто инвертируется при наведении мыши. Я использовал ниже код. он работает нормально.
<div @mouseover="upHere = true" @mouseleave="upHere = false" >
<h2> Something Something </h2>
<some-component v-show="upHere"></some-component>
</div>
на экземпляре vue
data : {
upHere : false
}
надеюсь, это поможет
Здесь нет необходимости в методе.
HTML
<div v-if="active">
<h2>Hello World!</h2>
</div>
<div v-on:mouseover="active = !active">
<h1>Hover me!</h1>
</div>
JS
new Vue({
el: 'body',
data: {
active: false
}
})
Чтобы показать дочерние или дочерние элементы, это возможно только с помощью CSS. Если вы используете :hover
перед комбинаторами (+
, ~
, >
, space
). Тогда стиль применяется не к зависающему элементу.
HTML
<body>
<div class="trigger">
Hover here.
</div>
<div class="hidden">
This message shows up.
</div>
</body>
CSS
.hidden { display: none; }
.trigger:hover + .hidden { display: inline; }
С событиями mouseover
и mouseleave
вы можете определить функцию переключения, которая реализует эту логику и реагирует на значение в рендеринге.
Проверьте этот пример:
var vm = new Vue({
el: '#app',
data: {btn: 'primary'}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<div id='app'>
<button
@mouseover="btn='warning'"
@mouseleave="btn='primary'"
:class='"btn btn-block btn-"+btn'>
{{ btn }}
</button>
</div>
С помощью mouseover
только элемент остается видимым, когда мышь покидает парящий элемент, поэтому я добавил следующее:
@mouseover="active = !active" @mouseout="active = !active"
<script>
export default {
data(){
return {
active: false
}
}
</script>
Можно переключать класс при наведении курсора строго в шаблоне компонента, однако это не практичное решение по понятным причинам. Для прототипирования, с другой стороны, я считаю полезным не определять свойства данных или обработчики событий в скрипте.
Вот пример того, как вы можете экспериментировать с цветами значков, используя Vuetify.
new Vue({
el: '#app'
})
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.js"></script>
<div id="app">
<v-app>
<v-toolbar color="black" dark>
<v-toolbar-items>
<v-btn icon>
<v-icon @mouseenter="e => e.target.classList.toggle('pink--text')" @mouseleave="e => e.target.classList.toggle('pink--text')">delete</v-icon>
</v-btn>
<v-btn icon>
<v-icon @mouseenter="e => e.target.classList.toggle('blue--text')" @mouseleave="e => e.target.classList.toggle('blue--text')">launch</v-icon>
</v-btn>
<v-btn icon>
<v-icon @mouseenter="e => e.target.classList.toggle('green--text')" @mouseleave="e => e.target.classList.toggle('green--text')">check</v-icon>
</v-btn>
</v-toolbar-items>
</v-toolbar>
</v-app>
</div>
Я столкнулся с той же проблемой, и я проработает!
<img :src='book.images.small' v-on:mouseenter="hoverImg">
Существует правильный рабочий JSFiddle: http://jsfiddle.net/1cekfnqw/176/
<p v-on:mouseover="mouseOver" v-bind:class="{on: active, 'off': !active}">Hover over me!</p>
<div @mouseover="activarOver" @mouseleave="resetOver "> eventos </div>
data: () => {
return {
countMouseOver: 0
}
},
methods: {
activarOver () {
this.countMouseOver++
if (this.countMouseOver < 2) {
this.setMostrarPopup()
}
console.log(this.countMouseOver)
},
resetOver () {
this.countMouseOver = 0
console.log('reset')
},
}