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

54 lines
935 B
Markdown
Raw Normal View History

2019-10-10 14:30:36 +08:00
# Event
```html
<n-input
v-model="value"
@blur="handleBlur"
@focus="handleFocus"
@change="handleChange"
@keyup="handleKeyUp"
@input="handleInput"
placeholder="Operate to trigger events"
/>
<n-input
v-model="value"
type="textarea"
@blur="handleBlur"
@focus="handleFocus"
@change="handleChange"
@keyup="handleKeyUp"
@input="handleInput"
placeholder="Operate to trigger events"
/>
```
```js
export default {
data() {
return {
2019-10-30 16:21:16 +08:00
value: null,
pair: null
2019-10-10 14:30:36 +08:00
}
},
methods: {
handleFocus() {
this.$NMessage.info("[Event focus]")
},
handleBlur() {
this.$NMessage.info("[Event blur]")
},
handleChange(v) {
this.$NMessage.info("[Event change]" + v)
},
handleKeyUp(e) {
this.$NMessage.info("[Event keyup]")
},
handleInput(v) {
this.$NMessage.info("[Event input] " + v)
}
}
}
```
```css
.n-input {
margin-bottom: 8px;
}
```