基础用法

基础用法

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

0 / 200

输入的值: 暂无输入

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

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

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

<style scoped>
</style>

隐藏源代码

文档说明

组件简介

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

核心功能

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

基础用法要点

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

配置说明

SunlightTextarea 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
rows	文本域行数	number	3
type	输入框类型	string	'textarea'
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)'