如何仅在文本框的图标上执行 vue.js 鼠标悬停事件
How to perform vue.js mouseover event only on on icon of textbox
<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 的鼠标悬停事件
要捕获鼠标悬停事件,您必须将 @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>
<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 的鼠标悬停事件
要捕获鼠标悬停事件,您必须将 @mouseover.native="someFunction"
作为
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>