Как изменить размер шрифта с помощью пользовательской директивы в vuejs - PullRequest
Новая
       48

Как изменить размер шрифта с помощью пользовательской директивы в vuejs

0 голосов
/ 13 марта 2019

Я хочу изменить размер шрифта элемента, используя пользовательскую директиву

Таким образом, я попробовал приведенный ниже код для этого 

<template>
  <div class="hello"><label v-onhover>CLICK ME TO CHANGE FONT</label></div>
</template>

<script>
export default {
  name: "CustomDirective",
  props: {
    msg: String
  },
  directives: {
    onhover: {
      bind(el, binding) {
        el.onmouseover = function() {
          el.fontSize = "100px";
        };
      }
    }
  }
};
</script>

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

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

Ответы [ 2 ]

1 голос
/ 13 марта 2019

Вы хотите el.style.fontSize вместо el.fontSize. 

Vue.directive('onhover', {
  bind(el, binding) {
    el.onmouseover = function() {
      el.style.fontSize = "100px";
    };
  }
});

new Vue().$mount('#app');
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <div class="hello">
    <label v-onhover>Hover on me to change font</label>
  </div>
</div>
0 голосов
/ 13 марта 2019

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

Ниже приведен мой код для решения 

<template>
  <div class="hello">
    <label v-onhover>{{ msg }}</label>
  </div>
</template>

<script>
export default {
  name: "CustomDirective",
  data() {
    return {
      str: "",
      msg: "Welcome to Your Vue.js App"
    };
  },
  directives: {
    onhover: {
      bind(el, binding) {
        el.onmouseover = function() {
          el.style.fontSize = "100px";
        };
        el.onmouseout = function() {
          el.style.fontSize = "15px";
        };
      }
    }
  }
};
</script>

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

Здесь, в приведенном выше примере, я использовал два разных события mouseover и mouseout, и в зависимости от состояния события мы можем изменить свойство элемента

...