2019-10-10 14:30:36 +08:00
|
|
|
# Disabled
|
|
|
|
Input can be disabled.
|
|
|
|
```html
|
2020-10-26 12:31:14 +08:00
|
|
|
<n-space vertical>
|
2020-10-22 12:12:11 +08:00
|
|
|
<n-input
|
|
|
|
v-model:value="value"
|
|
|
|
type="input"
|
|
|
|
size="small"
|
|
|
|
placeholder="Oops! It is disabled."
|
|
|
|
:disabled="!active"
|
|
|
|
round
|
|
|
|
/>
|
|
|
|
<n-input
|
|
|
|
v-model:value="value"
|
|
|
|
type="textarea"
|
|
|
|
size="small"
|
|
|
|
placeholder="Oops! It is disabled."
|
|
|
|
:disabled="!active"
|
|
|
|
round
|
|
|
|
/>
|
|
|
|
<n-input pair separator="to" v-model:value="value" clearable :disabled="!active">
|
|
|
|
<template v-slot:affix>
|
|
|
|
<n-icon><cash-icon /></n-icon>
|
|
|
|
</template>
|
|
|
|
</n-input>
|
|
|
|
<n-switch v-model:value="active" />
|
|
|
|
</n-space>
|
2019-10-10 14:30:36 +08:00
|
|
|
```
|
|
|
|
```js
|
2020-11-07 00:07:02 +08:00
|
|
|
import { CashOutline as CashIcon } from '@vicons/ionicons-v5'
|
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-10-22 12:12:11 +08:00
|
|
|
CashIcon
|
2019-10-25 11:00:22 +08:00
|
|
|
},
|
2020-10-22 12:12:11 +08:00
|
|
|
data () {
|
2019-10-10 14:30:36 +08:00
|
|
|
return {
|
|
|
|
active: false,
|
|
|
|
value: null
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
```
|