Skip to content

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)