如何仅在文本框的图标上执行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>

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

Answer 1

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;