naive-ui/demo/documentation/components/input/enUS/event.demo.md

53 lines
1000 B
Markdown
Raw Normal View History

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