Input
An input enables a person to type in text information.
Size
Size
Mini, Compact, Default, Large
<template>
<div style="display: flex; flex-direction: column; gap: 5px">
<v-input size="mini" />
<v-input size="compact" />
<v-input size="default" />
<v-input size="large" />
</div>
</template>
State
State
Positive, Error, Disabled, Readonly, Claerble
<template>
<div style="display: flex; flex-direction: column; gap: 5px">
<v-input positive placeholder="Controlled Input" v-model="content.positive" />
<v-input error placeholder="Controlled Input" v-model="content.error" />
<v-input disabled placeholder="Controlled Input" v-model="content.disabled" />
<v-input readonly placeholder="Controlled Input" v-model="content.readonly" />
<v-input clearable placeholder="Controlled Input" v-model="content.clearable" />
</div>
</template>
<script setup lang="ts">
const content = {
positive: 'Positive input',
error: 'Error input',
disabled: 'Disabled input',
readonly: 'Readonly input',
clearable: 'Clearable input',
};
</script>
Type
Type
Text, Password
<template>
<div style="display: flex; flex-direction: column; gap: 5px">
<v-input size="default" type="text" value="text" />
<v-input size="default" type="password" value="password" />
</div>
</template>
Event
Input
Input Times: 0
Event
Params: current inputs val
<template>
<v-input size="default" type="text" value="text" @input="num++" />
<p>Input Times: {{ num }}</p>
</template>
<script setup>
import { ref } from 'vue';
const num = ref(0);
</script>
Change
Change Times: 0
Event
Params: current inputs val
<template>
<v-input size="default" type="text" value="text" @change="num++" />
<p>Change Times: {{ num }}</p>
</template>
<script setup>
import { ref } from 'vue';
const num = ref(0);
</script>
Blur
Blur Times: 0
Event
Params: MouseEvent
<template>
<v-input size="default" type="text" value="text" @blur="num++" />
<p>Blur Times: {{ num }}</p>
</template>
<script setup>
import { ref } from 'vue';
const num = ref(0);
</script>
Focus
Focus Times: 0
Event
Params: MouseEvent
<template>
<v-input size="default" type="text" value="text" @focus="num++" />
<p>Focus Times: {{ num }}</p>
</template>
<script setup>
import { ref } from 'vue';
const num = ref(0);
</script>
Clear
Clear Times: 0
Event
Params: null
<template>
<v-input size="default" type="text" value="text" @clear="num++" clearable />
<p>Clear Times: {{ num }}</p>
</template>
<script setup>
import { ref } from 'vue';
const num = ref(0);
</script>
V-Model
v-model: default
Event
Params: current inputs val
<template>
<v-input size="default" type="text" v-model="value" />
<p>v-model: {{ value }}</p>
</template>
<script setup>
import { ref } from 'vue';
const value = ref('default');
</script>