Input 输入框
通过鼠标或键盘输入字符。
WARNING
Input 为受控组件，它 总会显示 Vue 绑定值。
在正常情况下，input 的输入事件应该被正常响应。 它的处理程序应该更新组件的绑定值 (或使用
v-model
)。 否则，输入框的值将不会改变。不支持
v-model
修饰符基础用法
展开查看
vue
<template>
<div>
<tass-input v-model="inputVal" />
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue';
let inputVal = ref('');
</script>
禁用状态
通过 disabled 属性指定是否禁用 input 组件
展开查看
vue
<template>
<div>
<tass-input v-model="inputVal" disabled />
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue';
let inputVal = ref('');
</script>
一键清空
使用 clearable 属性即可得到一个可一键清空的输入框
展开查看
vue
<template>
<div>
<tass-input v-model="inputVal" clearable />
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue';
let inputVal = ref('');
</script>
密码框
使用 show-password 属性即可得到一个可切换显示隐藏的密码框
展开查看
vue
<template>
<div>
<tass-input v-model="inputVal" show-password />
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue';
let inputVal = ref('');
</script>
带图标的输入框
带有图标标记输入类型
要在输入框中添加图标，你可以简单地使用 prefix-icon 和 suffix-icon 属性。 另外， prefix 和 suffix 命名的插槽也能正常工作。
展开查看
vue
<template>
<div>
<tass-input v-model="inputVal" prefix-icon="upload" />
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue';
let inputVal = ref('');
</script>
尺寸
使用 size 属性改变输入框大小。 除了默认大小外，还有另外两个选项： medium, mini
展开查看
vue
<template>
<div>
<tass-input v-model="inputVal" /> <tass-input v-model="inputVal" size="medium" />
<tass-input v-model="inputVal" size="mini" />
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue';
let inputVal = ref('');
</script>