<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 标签的 icon 属性上应用 vue.js 的 mouseover 事件

请您参考如下方法:

要捕获鼠标悬停事件,您必须将 @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>


评论关闭
IT源码网

微信公众号号:IT虾米 (左侧二维码扫一扫)欢迎添加!