Di chuột qua hoặc di chuột vue.js

104

Tôi muốn hiển thị một div khi di chuột qua một phần tử trong vue.js. Nhưng tôi dường như không thể làm cho nó hoạt động.

Có vẻ như không có sự kiện nào cho di chuột hoặc di chuột trong vue.js. Điều này có thực sự đúng?

Có thể kết hợp các phương thức jquery hover và vue không?

javascript vue.js

— Anders Andersen
nguồn

2

Chỉ thị v-on cũng hoạt động cho sự kiện "hover". Nếu bạn thêm vào câu hỏi của mình mã bạn đã viết, chúng tôi có thể giúp bạn làm cho nó hoạt động. Và đúng vậy, Vue rất đơn giản, nhỏ gọn và được tích hợp với các gói khác như jQuery.

— David K. Hess

93

Đây là một ví dụ hoạt động về những gì tôi nghĩ bạn đang yêu cầu.

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;   
        }
    }
});

— Jarrod
nguồn

26

không hoạt động với phiên bản vue mới nhất. @CYB đã cố gắng chỉnh sửa câu trả lời của bạn v-on:mouseover="mouseOver"nhưng không đề cập đến phiên bản vue nào mà cú pháp đã thay đổi

— Aprillion

2

@NICO có giải pháp tốt hơn của tôi và hoạt động với phiên bản hiện tại (1.0.26 tại thời điểm đăng bài này). Hãy tham khảo câu trả lời của anh ấy. Cảm ơn bạn.

— Jarrod

1

Tôi muốn xóa điều này vì tôi vừa nêu, bài đăng dưới đây của @NICO tốt hơn của tôi và cập nhật hơn. Vui lòng cho NICO câu trả lời chính xác, và tôi sẽ xóa của tôi. Cảm ơn bạn!

— Jarrod

2

ví dụ bị hỏng?

— user3743266

3

tôi nghĩ tốt hơn sử dụng ngắn tay @mouseover:mouseover

— Dávod Aslanifakor

176

tôi cảm thấy lôgic ở trên cho di chuột là không chính xác. nó chỉ nghịch đảo khi di chuột. tôi đã sử dụng mã dưới đây. nó dường như hoạt động hoàn toàn ổn.

<div @mouseover="upHere = true" @mouseleave="upHere = false" >
    <h2> Something Something </h2>
    <some-component v-show="upHere"></some-component>
</div>

trên trường hợp vue

data : {
    upHere : false
}

Hy vọng rằng sẽ giúp

— lắc93
nguồn

15

Đây phải là câu trả lời được chấp nhận! Câu trả lời được chấp nhận và câu trả lời được ủng hộ nhiều nhất dẫn đến thành phần nhấp nháy. Mỗi chuyển động của con trỏ trên @ mouseover-div đảo ngược tình trạng hiện tại ...

— Stefan Medack

Nếu bạn đang hiển thị một div ẩn như bong bóng thoại, bạn sẽ bị nhấp nháy khi di chuột qua. Chỉ cần thêm cùng một đoạn mã mouseover / mouseleave tuyệt vời vào div ẩn.

— mcmacerson

Hoạt động đối với tôi, với webpack chỉ cần thay đổi dữ liệu của bạn như sau:data: () => ({ upHere: false })

— Emile Cantero

77

Không cần có phương pháp ở đây.

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
  }
})

— NICO
nguồn

10

Bạn có thể sử dụng một trong hai v-on:mouseoverhoặc các phím tắt @mouseovercho mỗi tài liệu vuejs.org/guide/syntax.html#v-on-Shorthand

— nu everest

1

Bạn có thể thay thế onbằng v-on:hoặc @cho bất kỳ thuộc tính sự kiện html nào. w3schools.com/tags/ref_eventattributes.asp

— nu everest

Vấn đề là gì? Câu hỏi này đang hoạt động và nên được đánh dấu là câu trả lời đúng.

— NICO

Vue 2.2.0 không như thế này - nhổ một cảnh báo "[Vue cảnh báo]: Đừng gắn Vue để <html> hoặc <body> - gắn với các yếu tố bình thường để thay thế."

— Dima Fomin

Để đơn giản, tôi đã tạo <body> một phiên bản vue. Tất nhiên bạn không nên làm điều đó trong ứng dụng thế giới thực của mình.

— NICO

25

Để hiển thị các phần tử con hoặc anh chị em, bạn chỉ có thể sử dụng CSS. Nếu bạn sử dụng :hovertrước khi combinators ( +, ~, >, space). Sau đó, kiểu không áp dụng cho phần tử được di chuột qua.

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; }

— qsc vgy
nguồn

1

Người hỏi đang hỏi cụ thể về vue.js. Vì nó cho phép javascript dễ bị ràng buộc với sự kiện di chuột qua.

— nu everest

5

Tôi đang sử dụng Vue và đây là giải pháp tốt nhất cho tôi. Tôi có một danh sách lồng nhau với các nút chỉ xuất hiện khi di chuột và việc sử dụng các biến bổ sung để theo dõi trạng thái di chuột là quá mức cần thiết. CSS thanh lịch hơn nhiều. Cảm ơn qsc!

— david_nash

13

Với mouseovervàmouseleave sự kiện, bạn có thể xác định một hàm chuyển đổi thực hiện logic này và phản ứng trên giá trị trong kết xuất.

Kiểm tra ví dụ này:

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>

Mở rộng đoạn mã

— fitorec
nguồn

css postprocessors ví dụ như purgecss sẽ không thể nhận các lớp của bạn nếu bạn xây dựng động chúng như thế này. tốt hơn:@mouseover="btn-color='btn-warning' @mouseleave="btn-color='btn-primary' :class="btn btn-block { btn-color}"

— Erich

7

Với mouseoverchỉ phần tử vẫn hiển thị khi chuột rời khỏi phần tử được di chuột, vì vậy tôi đã thêm điều này:

@mouseover="active = !active" @mouseout="active = !active"

<script>
export default {
  data(){
   return {
     active: false
   }
 }
</script>

— máy chủ tốt nhất
nguồn

6

Có thể chuyển đổi một lớp khi di chuột trong khuôn mẫu của một thành phần, tuy nhiên, đó không phải là một giải pháp thực tế vì những lý do rõ ràng. Mặt khác, đối với việc tạo mẫu, tôi thấy hữu ích khi không phải xác định thuộc tính dữ liệu hoặc trình xử lý sự kiện trong tập lệnh.

Dưới đây là một ví dụ về cách bạn có thể thử nghiệm với màu sắc biểu tượng bằng 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>

Mở rộng đoạn mã

— DigitalDrifter
nguồn

2

Tôi đã đưa ra cùng một vấn đề, và tôi đã giải quyết nó!

        <img :src='book.images.small' v-on:mouseenter="hoverImg">

Mở rộng đoạn mã

— LittleStupid
nguồn

2

Có một JSFiddle hoạt động chính xác: http://jsfiddle.net/1cekfnqw/176/

<p v-on:mouseover="mouseOver" v-bind:class="{on: active, 'off': !active}">Hover over me!</p>

— funkvn
nguồn

1

Mặc dù tôi sẽ cung cấp một bản cập nhật bằng cách sử dụng api thành phần mới.

Thành phần

<template>
  <div @mouseenter="hovering = true" @mouseleave="hovering = false">
    {{ hovering }}
  </div>
</template>

<script lang="ts">
  import { ref } from '@vue/compsosition-api'

  export default {
    setup() {
      const hoverRef = ref(false)
      return { hovering }
    }
  })
</script>

Chức năng thành phần có thể tái sử dụng

Tạo một useHoverhàm sẽ cho phép bạn sử dụng lại trong bất kỳ thành phần nào.

export function useHover(target: Ref<HTMLElement | null>) {
  const hovering = ref(false)

  const enterHandler = () => (hovering.value = true)
  const leaveHandler = () => (hovering.value = false)

  onMounted(() => {
    if (!target.value) return
    target.value.addEventListener('mouseenter', enterHandler)
    target.value.addEventListener('mouseleave', leaveHandler)
  })

  onUnmounted(() => {
    if (!target.value) return
    target.value.removeEventListener('mouseenter', enterHandler)
    target.value.removeEventListener('mouseleave', leaveHandler)
  })

  return hovering
}

Đây là một ví dụ nhanh gọi hàm bên trong một thành phần Vue.

<template>
  <div ref="hoverRef">
    {{ hovering }}
  </div>
</template>

<script lang="ts">
  import { ref } from '@vue/compsosition-api'
  import { useHover } from './useHover'

  export default {
    setup() {
      const hoverRef = ref(null)
      const hovering = useHover(hoverRef)
      return { hovering, hoverRef }
    }
  })
</script>

Bạn cũng có thể sử dụng một thư viện @vuehooks/coređi kèm với nhiều chức năng hữu ích bao gồm useHover.

— jsbroks
nguồn

0

Đây là một ví dụ rất đơn giản cho MouseOver và MouseOut:

<div id="app">
   <div :style = "styleobj" @mouseover = "changebgcolor" @mouseout = "originalcolor"> 
   </div>
</div>

new Vue({
  el:"#app",
  data:{
     styleobj : {
       width:"100px",
       height:"100px",
       backgroundColor:"red"
     }
  },
  methods:{
    changebgcolor : function() {
      this.styleobj.backgroundColor = "green";
    },
    originalcolor : function() {
      this.styleobj.backgroundColor = "red";
    }
  }
});

— Hardik Raval
nguồn

0

Vui lòng xem gói vue-mouseover nếu bạn không hài lòng về giao diện của mã này:

<div
    @mouseover="isMouseover = true"
    @mouseleave="isMouseover = false"
/>

vue-mouseover cung cấp một v-mouseoverchỉ thị tự động cập nhật thuộc tính ngữ cảnh dữ liệu được chỉ định khi con trỏ nhập hoặc rời một phần tử HTML mà chỉ thị được đính kèm.

Theo mặc định trong thuộc tính ví dụ tiếp theo isMouseoversẽ là truekhi con trỏ ở trên một phần tử HTML và falsenếu không:

<div v-mouseover="isMouseover" />

Cũng theo mặc định, ban đầuisMouseover sẽ được chỉ định khi v-mouseoverđược đính kèm vào divphần tử, vì vậy nó sẽ không bị hủy gán trước mouseenter/mouseleave sự kiện .

Bạn có thể chỉ định các giá trị tùy chỉnh thông qua v-mouseover-valuechỉ thị:

<div
    v-mouseover="isMouseover"
    v-mouseover-value="customMouseenterValue"/>

hoặc là

<div
    v-mouseover="isMouseover"
    v-mouseover-value="{
        mouseenter: customMouseenterValue,
        mouseleave: customMouseleaveValue
    }"
/>

Các giá trị mặc định tùy chỉnh có thể được chuyển đến gói thông qua đối tượng tùy chọn trong quá trình thiết lập.

— N. Kudryavtsev
nguồn