基础用法

基础用法

SunlightInput 是基于 Element Plus Input 的增强型输入框组件，支持多种主题样式和自定义配置。

输入的值: 暂无输入

<script setup lang="ts">
import { ref } from "vue";
import { SunlightInput } from "sunlight-ui";

// SunlightInput 示例数据
const inputValue = ref("");
const handleInputChange = (val: string) => {
  console.log("输入值变化:", val);
};
</script>

<template>
  <div>
    <div style="margin-bottom: 20px">
      <SunlightInput
        v-model="inputValue"
        :item="{
          placeholder: '请输入内容...',
          clearable: true,
          prefixIcon: 'User',
          wrapperStyle: {
            borderColor: '#c0c4cc',
            focusBorderColor: '#409eff',
            focusBoxShadow: '0 0 0 3px rgba(64, 158, 255, 0.25)',
          },
        }"
        @input="handleInputChange"
      />
    </div>
    <div>
      <p>输入的值: {{ inputValue || "暂无输入" }}</p>
    </div>
  </div>
</template>

隐藏源代码

文档说明

组件简介

SunlightInput 是一个基于 Element Plus Input 组件增强的自定义输入框组件，提供了更丰富的配置选项和更好的用户体验。

核心功能

• 支持双向数据绑定
• 内置多种主题样式
• 支持自定义边框、圆角和聚焦效果
• 支持前缀和后缀图标
• 提供丰富的事件支持

基础用法要点

1. 双向绑定：使用 v-model 实现数据双向绑定
2. 配置对象：通过 item 属性传递配置项
3. 事件监听：支持多种事件监听
4. 主题样式：通过 theme 属性设置主题

配置说明

SunlightInput Props 配置项

属性名	说明	类型	默认值
modelValue	绑定值，支持双向数据绑定	string number	''
item	输入框配置对象，包含各种属性和样式配置	object	{}
theme	主题样式，内置多种预设主题	string	'default'

item 配置对象

属性名	说明	类型	默认值
disabled	是否禁用输入框	boolean	false
readonly	是否只读	boolean	false
clearable	是否显示清除按钮	boolean	false
maxlength	最大输入长度	number	-
showWordLimit	是否显示字数统计	boolean	false
prefixIcon	前缀图标名称	string	-
suffixIcon	后缀图标名称	string	-
placeholder	输入框占位符	string	-
size	输入框尺寸	string	'default'
autofocus	是否自动聚焦	boolean	false
type	输入框类型	string	'text'
customClass	自定义样式类	string	-
customStyle	自定义内联样式	object	-
wrapperStyle	边框和样式配置对象	object	-
config	额外属性配置，支持传入任意属性	object	{}

wrapperStyle 配置对象

属性名	说明	类型	默认值
borderColor	输入框边框颜色	string	'#c0c4cc'
borderRadius	输入框圆角大小	string	'4px'
backgroundColor	输入框背景色	string	'inherit'
boxShadow	输入框阴影效果	string	'inherit'
focusBorderColor	聚焦时边框颜色	string	'#409eff'
focusBoxShadow	聚焦时阴影效果	string	'0 0 0 3px rgba(64, 158, 255, 0.15)'