0

我想使用自定义指令更改元素的字体大小

因此，我为此尝试了以下代码

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

在绑定内部，我得到了完整的标签元素，但不知道如何让它在鼠标悬停时更改用户定义的字体大小

4

2 回答 2

2

你想要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>

于 2019-03-13T04:49:26.580 回答
-1

在尝试了几种不同的方法后，我已经解决了这个问题

以下是我的解决方案代码

<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 事件，根据事件状态，我们可以改变元素的属性

于 2019-03-13T04:53:24.537 回答