Как я могу навести курсор мыши на <ul>в VueJS? - PullRequest
Новая
       8

Как я могу навести курсор мыши на <ul>в VueJS?

0 голосов
/ 03 октября 2018

Может ли кто-нибудь помочь в реализации функции наведения мыши для UL, у меня есть набор тегов UL в моем шаблоне, который использует тот же класс, но когда я пытаюсь реализовать наведение мыши (изменяет цвет границы при наведении мыши), всеТеги UL с этим классом выделяются.Я довольно новичок в VUE.

Шаблон 

<ul v-bind:class="[sbitmcls]"  @mouseover="mouseOver" @mouseleave="mouseOut">
  <img src="../assets/notification.png" alt="" height="30" width="30">
  <span> Notification  </span>
</ul>

<ul v-bind:class="[sbitmcls]"  @mouseover="mouseOver" @mouseleave="mouseOut">
  <img src="../assets/message.png" alt="" height="30" width="30">
  <span> Message  </span>
</ul>

script 

data() {
  return {
    sbitmcls: "image",
    active: true
    };
  },
  methods: {
    onClick() {
    this.$router.push("/homepage");
  },
  mouseOver: function(name) {
    this.sbitmcls = "imageSelected"
  },
  mouseOut: function() {
    event.target.style.background = "#4a4b45";
  }
}

style: 

.image {
  display: relative;
  background-color: #4a4b45;
  color: white;
  font-family: Rubik, "Bookman", Garamond, "Times New Roman", Times, serif;
  font-size: 1.2em;
  font-style: bold;
  line-height: 2em;
  height: 5%;
  border-left: 5px solid #4a4b45;
  margin-right: 50px;
  margin: 1px 0;
  padding-left: 1em;
}

.imageSelected {
  display: relative;
  background-color: #575a51;
  color: white;
  font-family: Rubik, "Bookman", Garamond, "Times New Roman", Times, serif;
  font-size: 1.2em;
  font-style: bold;
  line-height: 2em;
  height: 5%;
  border-left: 5px solid blue;
  margin-right: 50px;
  margin: 1px 0;
  padding-left: 1em;
}

Есть ли лучший способреализовать это?

Спасибо,

Ответы [ 2 ]

0 голосов
/ 03 октября 2018

Попробуйте связать класс со значением данных, например: 

 <ul :class="{'imageSelected': selected === true, 'image': selected ===
 false}" @mouseover="mouseOver" @mouseleave="mouseOut"> ... data() {
 return {   selected: false   }; }, methods: {    mouseOver:
 function(name) {    this.selected = true; },
0 голосов
/ 03 октября 2018

Вы можете почти полностью сделать это в CSS с помощью :hover псевдокласса . 

.image {
  /* your CSS for the image class */
}

.image.hovered, .image:hover {
  border-left-color: blue;
}

.image:hover {
  background-color: #575a51;
}

Вашему шаблону просто нужно 

<ul class="image" @mouseover.once="$event.target.classList.add('hovered')">

Это добавляетhovered класс для вашего элемента, когда он впервые обработан мышью, который сохраняет цвет синей рамки, в то время как цвет фона возвращается к значению по умолчанию. 

new Vue({el: '#app'})
.image {
  display: relative;
  background-color: #4a4b45;
  color: white;
  font-family: Rubik, "Bookman", Garamond, "Times New Roman", Times, serif;
  font-size: 1.2em;
  font-style: bold;
  line-height: 2em;
  height: 5%;
  border-left: 5px solid #4a4b45;
  margin-right: 50px;
  margin: 1px 0;
  padding-left: 1em;
}

.image.hovered, .image:hover {
  border-left-color: blue;
}

.image:hover {
  background-color: #575a51;
}
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.min.js"></script>
<div id="app">
  <ul class="image" @mouseover.once="$event.target.classList.add('hovered')">
    <img src="https://picsum.photos/30" alt="" height="30" width="30">
    <span> Notification  </span>
  </ul>

  <ul class="image" @mouseover.once="$event.target.classList.add('hovered')">
    <img src="https://picsum.photos/30" alt="" height="30" width="30">
    <span> Message  </span>
  </ul>
</div>
...