2019-10-10 14:30:36 +08:00
|
|
|
# Event
|
|
|
|
```html
|
2020-10-22 12:12:11 +08:00
|
|
|
<n-space vertical align="stretch">
|
|
|
|
<n-input
|
|
|
|
v-model:value="value"
|
|
|
|
@blur="handleBlur"
|
|
|
|
@focus="handleFocus"
|
|
|
|
@change="handleChange"
|
|
|
|
@keyup="handleKeyUp"
|
|
|
|
@input="handleInput"
|
|
|
|
placeholder="Operate to trigger events"
|
|
|
|
/>
|
|
|
|
<n-input
|
|
|
|
v-model:value="value"
|
|
|
|
type="textarea"
|
|
|
|
@blur="handleBlur"
|
|
|
|
@focus="handleFocus"
|
|
|
|
@change="handleChange"
|
|
|
|
@keyup="handleKeyUp"
|
|
|
|
@input="handleInput"
|
|
|
|
placeholder="Operate to trigger events"
|
|
|
|
/>
|
|
|
|
</n-space>
|
2019-10-10 14:30:36 +08:00
|
|
|
```
|
|
|
|
```js
|
|
|
|
export default {
|
2020-10-22 12:12:11 +08:00
|
|
|
inject: ['message'],
|
|
|
|
data () {
|
2019-10-10 14:30:36 +08:00
|
|
|
return {
|
2019-10-30 16:21:16 +08:00
|
|
|
value: null,
|
|
|
|
pair: null
|
2019-10-10 14:30:36 +08:00
|
|
|
}
|
|
|
|
},
|
|
|
|
methods: {
|
|
|
|
handleFocus() {
|
2020-10-22 12:12:11 +08:00
|
|
|
this.message.info("[Event focus]")
|
2019-10-10 14:30:36 +08:00
|
|
|
},
|
|
|
|
handleBlur() {
|
2020-10-22 12:12:11 +08:00
|
|
|
this.message.info("[Event blur]")
|
2019-10-10 14:30:36 +08:00
|
|
|
},
|
|
|
|
handleChange(v) {
|
2020-10-22 12:12:11 +08:00
|
|
|
this.message.info("[Event change]" + v)
|
2019-10-10 14:30:36 +08:00
|
|
|
},
|
|
|
|
handleKeyUp(e) {
|
2020-10-22 12:12:11 +08:00
|
|
|
this.message.info("[Event keyup]")
|
2019-10-10 14:30:36 +08:00
|
|
|
},
|
|
|
|
handleInput(v) {
|
2020-10-22 12:12:11 +08:00
|
|
|
this.message.info("[Event input] " + v)
|
2019-10-10 14:30:36 +08:00
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
```
|