如何执行 vue.js仅在文本框图标上鼠标悬停事件

Question

<b-input type="tel" placeholder="Customer Mobile No" name="contactNumber" ref="contactNumber"
          @blur="getCustomer(bill.customer.contactNumber)"
          @input="getCustomer(bill.customer.contactNumber)"
          icon="phone_android"
          tabindex="2"
          title="Customer's mobile number"
          maxlength="10" minlength="10" pattern="d{10}" v-model="bill.customer.contactNumber"
          :disabled="isDefaultCustomer || (bill.couponDiscount > 0 || bill.giftcertificateAmount > 0 || isExchangeCustomer)" required>
        </b-input>

如何应用 vue 的鼠标悬停事件.js仅在 b-input 标签的图标属性上应用

Answer 1

要捕获鼠标悬停事件，您必须将@mouseover.native="someFunction"传递给您的 b-input 组件

Vue.use(Buefy.default)
const example = {
  data() {
    return {
      name: 'John Silver'
    }
  },
  methods: {
    something () {
      alert('hovering over input')
    }
  }
}
const app = new Vue(example)
app.$mount('#app')

<script src="https://unpkg.com/vue@2.5.9/dist/vue.js"></script>
<link href="https://unpkg.com/buefy@0.6.3/lib/buefy.min.css" rel="stylesheet"/>
<script src="https://unpkg.com/buefy@0.6.3/lib/index.js"></script>
<div id="app" class="container">
  <section>
    <b-field label="Name" @mouseover.native="something">
      <b-input v-model="name"></b-input>
    </b-field>
  </section>
</div>