@tanzhenxing/zx-textarea v1.0.5

zx-textarea 文本域组件

基于 uni-app 官方 textarea 组件封装的增强型文本域组件，提供了丰富的功能和良好的跨平台兼容性。

功能特性

• ✅ 完全兼容 uni-app 官方 textarea 组件的所有功能
• ✅ 支持 v-model 双向数据绑定
• ✅ 字数统计功能，支持自定义显示格式
• ✅ 清除按钮功能
• ✅ 多种边框样式（四周边框、底部边框、无边框）
• ✅ 自适应高度
• ✅ 丰富的自定义样式选项
• ✅ 完整的事件支持
• ✅ 输入长度限制
• ✅ 多种输入模式支持
• ✅ 平台兼容性优化（H5、小程序、App）
• ✅ 禁用状态支持
• ✅ 自定义占位符样式

基础用法

<template>
  <zx-textarea 
    v-model="value" 
    placeholder="请输入内容"
    @input="onInput"
    @change="onChange"
  />
</template>

<script setup>
import { ref } from 'vue';
import zxTextarea from '@/components/zx-textarea/zx-textarea.vue';

const value = ref('');

const onInput = (val) => {
  console.log('输入值:', val);
};

const onChange = (val) => {
  console.log('变化值:', val);
};
</script>

API

Props

扩展属性

confirm-type 有效值

inputmode 有效值

Events

使用示例

基础用法

<zx-textarea 
  v-model="value" 
  placeholder="请输入内容"
/>

带字数统计

<zx-textarea 
  v-model="value" 
  placeholder="最多输入100个字符"
  :count="true"
  :maxlength="100"
/>

清除按钮

<zx-textarea 
  v-model="value" 
  placeholder="带清除按钮的输入框"
  :clearable="true"
  @clear="onClear"
/>

自适应高度

<zx-textarea 
  v-model="value" 
  placeholder="输入区域高度自适应"
  :auto-height="true"
/>

不同边框样式

<!-- 四周边框 -->
<zx-textarea 
  v-model="value1" 
  border="surround"
/>

<!-- 底部边框 -->
<zx-textarea 
  v-model="value2" 
  border="bottom"
/>

<!-- 无边框 -->
<zx-textarea 
  v-model="value3" 
  border="none"
/>

自定义样式

<zx-textarea 
  v-model="value" 
  placeholder="自定义样式"
  font-size="16px"
  color="#333"
  background-color="#f8f9fa"
  border-color="#007bff"
  border-radius="8px"
  padding="12px"
/>

不同输入模式

<!-- 数字输入 -->
<zx-textarea 
  v-model="numericValue" 
  placeholder="数字输入模式"
  inputmode="numeric"
/>

<!-- 邮箱输入 -->
<zx-textarea 
  v-model="emailValue" 
  placeholder="邮箱输入模式"
  inputmode="email"
/>

自定义占位符样式

<zx-textarea 
  v-model="value" 
  placeholder="红色占位符文字"
  placeholder-style="color: #f56c6c; font-style: italic;"
/>

注意事项

1. 平台兼容性：

   • 微信小程序、百度小程序、抖音小程序等平台中，textarea 是原生组件，层级高于前端组件
   • 小程序端 CSS 动画对 textarea 组件无效
   • H5 平台只能在用户交互时修改 focus 生效

2. 输入限制：

   • 当设置 maxlength 时，超出长度的输入会被自动截断
   • 字数统计会根据输入长度实时更新，超出时会显示红色警告

3. 键盘处理：

   • 软键盘的弹出和收起逻辑遵循各平台的默认行为
   • 如需禁止点击其他位置收起键盘，可以监听 touch 事件并使用 prevent 修饰符

4. 样式定制：

   • 组件支持通过 props 定制大部分样式
   • 如需更复杂的样式定制，可以通过 CSS 变量或深度选择器实现

5. 事件处理：

   • blur 事件会晚于页面上的 tap 事件执行
   • 如果需要在按钮点击事件中获取 textarea 的值，建议使用 form 的 @submit 事件

更新日志

v1.0.0

• 初始版本发布
• 完整实现 uni-app textarea 组件的所有功能
• 添加字数统计、清除按钮等增强功能
• 支持多种边框样式和自定义样式
• 完善的平台兼容性处理