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-08-08 20:11:46 +08:00
|
|
|
<n-input pair separator="to" v-model="value" clearable :disabled="!active">
|
2019-10-25 11:00:22 +08:00
|
|
|
<template v-slot:affix>
|
2020-05-30 20:28:52 +08:00
|
|
|
<n-icon><cash-outline /></n-icon>
|
2019-10-25 11:00:22 +08:00
|
|
|
</template>
|
|
|
|
</n-input>
|
2019-10-10 14:30:36 +08:00
|
|
|
<n-switch v-model="active" />
|
|
|
|
```
|
|
|
|
```js
|
2020-05-30 20:28:52 +08:00
|
|
|
import cashOutline from 'naive-ui/lib/icons/cash-outline'
|
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: {
|
2020-05-30 20:28:52 +08:00
|
|
|
cashOutline
|
2019-10-25 11:00:22 +08:00
|
|
|
},
|
2019-10-10 14:30:36 +08:00
|
|
|
data() {
|
|
|
|
return {
|
|
|
|
active: false,
|
|
|
|
value: null
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
```
|
|
|
|
```css
|
|
|
|
.n-input {
|
|
|
|
margin-bottom: 8px;
|
|
|
|
}
|
|
|
|
```
|