2019-10-10 14:30:36 +08:00
|
|
|
# Disabled
|
|
|
|
Input can be disabled.
|
|
|
|
```html
|
|
|
|
<n-input
|
|
|
|
v-model="value"
|
|
|
|
type="input"
|
|
|
|
size="small"
|
|
|
|
placeholder="Oops! It is disabled."
|
|
|
|
:disabled="!active"
|
|
|
|
round
|
|
|
|
/>
|
|
|
|
<n-input
|
|
|
|
v-model="value"
|
|
|
|
type="textarea"
|
|
|
|
size="small"
|
|
|
|
placeholder="Oops! It is disabled."
|
|
|
|
:disabled="!active"
|
|
|
|
round
|
|
|
|
/>
|
2020-02-10 22:07:02 +08:00
|
|
|
<n-input split seperator="to" v-model="value" clearable :disabled="!active">
|
2019-10-25 11:00:22 +08:00
|
|
|
<template v-slot:affix>
|
|
|
|
<n-icon><ios-calendar /></n-icon>
|
|
|
|
</template>
|
|
|
|
</n-input>
|
2019-10-10 14:30:36 +08:00
|
|
|
<n-switch v-model="active" />
|
|
|
|
```
|
|
|
|
```js
|
2019-10-25 12:48:10 +08:00
|
|
|
import iosCalendar from 'naive-ui/lib/icons/ios-calendar'
|
2019-10-25 11:00:22 +08:00
|
|
|
|
2019-10-10 14:30:36 +08:00
|
|
|
export default {
|
2019-10-25 11:00:22 +08:00
|
|
|
components: {
|
|
|
|
iosCalendar
|
|
|
|
},
|
2019-10-10 14:30:36 +08:00
|
|
|
data() {
|
|
|
|
return {
|
|
|
|
active: false,
|
|
|
|
value: null
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
```
|
|
|
|
```css
|
|
|
|
.n-input {
|
|
|
|
margin-bottom: 8px;
|
|
|
|
}
|
|
|
|
```
|