Input 输入框
基础用法
vue
<script setup lang="ts">
import { ref } from 'vue';
const value = ref('');
const handleFocus = (e) => {
console.log(e);
};
const handleBlur = (e) => {
console.log(e);
};
</script>
<template>
<s-input v-model="value" placeholder="请输入内容" style="width: 200px;" @focus="handleFocus" @blur="handleBlur" />
</template>
可清空的
通过 clearable 属性可启用一键清空按钮
vue
<script setup lang="ts">
import { ref } from 'vue';
const value = ref('');
</script>
<template>
<s-input v-model="value" placeholder="请输入内容" clearable style="width: 200px;" />
</template>
API
Input Attributes
名称 | 说明 | 类型 | 默认值 |
---|---|---|---|
placeholder | 输入框占位文本 | string | '' |
Input Events
名称 | 说明 | 类型 |
---|---|---|
focus | 当选择器的输入框失去焦点时触发 | (e: FocusEvent) => void |
blur | 当选择器的输入框获得焦点时触发 | (e: FocusEvent) => void |
Input CSS
名称 | 说明 | 默认值 |
---|---|---|
--s-input-size-base | 输入框大小基准值 | var(--base-font-size) |
--s-input-size-D | 输入框大小差值 | 0px |
--s-input-padding | 输入框内边距 | 1px 10px |
--s-input-border-radius | 输入框圆角 | 4px |
--s-input-color-border | 输入框边框颜色 | var(--color-border) |