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

43 lines
774 B
Markdown
Raw Normal View History

# Pairwise Value
```html
<n-input
pair
separator="-"
v-model="value"
:placeholder="placeholder"
clearable
@blur="handleInputBlur"
@focus="handleInputFocus"
@change="handleInputChange"
@update:modelValue="handleInputInput"
/>
```
```js
export default {
data () {
return {
placeholder: ['From', 'To'],
value: ['0', '100']
}
},
methods: {
handleInputBlur () {
this.$NMessage.info('Pairwise ValueBlur')
},
handleInputFocus () {
this.$NMessage.info('Pairwise ValueFocus')
},
handleInputInput () {
this.$NMessage.info('Pairwise ValueInput')
},
handleInputChange () {
this.$NMessage.info('Pairwise ValueChange')
}
}
}
```
```css
.n-input {
margin-bottom: 8px;
}
```