Evokertextarea
多行输入框。
原生组件，使用时请注意相关限制。
Props
| 参数 | 类型 | 默认值 | 必填 | 说明 | |||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| value | string | 是 | 输入框的初始内容（支持 v-model:value） | ||||||||||||||||
| placeholder | string | 否 | 输入框为空时占位符 | ||||||||||||||||
| placeholder-class | string | textarea-placeholder | 否 | 指定 placeholder 的样式类 | |||||||||||||||
| placeholder-style | string | 否 | 指定 placeholder 的样式 | ||||||||||||||||
| disabled | boolean | false | 否 | 是否禁用输入框 | |||||||||||||||
| maxlength | number | 140 | 否 | 最大输入长度，设置为 <= 0 的时候不限制最大长度 | |||||||||||||||
| focus | boolean | false | 否 | 获取焦点 | |||||||||||||||
| auto-height | boolean | false | 否 | 是否自适应高度，设置 auto-height 时，style.height 不生效 | |||||||||||||||
| cursor-spacing | number | 0 | 否 | 指定光标与键盘的距离。取 textarea 距离底部的距离和 cursor-spacing 指定的距离的最小值作为光标与键盘的距离 | |||||||||||||||
| cursor | number | false | 否 | 指定 focus 时的光标位置 | |||||||||||||||
| selection-start | number | -1 | 否 | 光标起始位置，自动聚集时有效，需与 selection-end 搭配使用 | |||||||||||||||
| selection-end | number | -1 | 否 | 光标结束位置，自动聚集时有效，需与 selection-start 搭配使用 | |||||||||||||||
| show-confirm-bar | boolean | true | 否 | 是否显示键盘上方带有”完成“按钮那一栏 | |||||||||||||||
| adjust-position | boolean | true | 否 | 键盘弹起时，如果输入框被键盘遮盖，是否自动上推页面 | |||||||||||||||
| hold-keyboard | boolean | true | 否 | focus时，点击页面的时候不收起键盘 | |||||||||||||||
| disable-default-padding | boolean | false | 否 | 是否去掉 iOS 下的默认内边距 | |||||||||||||||
| confirm-type | string | return | 否 | 设置键盘右下角按钮的文字 | |||||||||||||||
| |||||||||||||||||||
| confirm-hold | boolean | false | 否 | 点击键盘右下角按钮时是否保持键盘不收起 | |||||||||||||||
Events
| 事件名 | 说明 | 回调参数 |
|---|---|---|
| input | 输入的值发生变化时触发 | { value: string } |
| focus | 输入框成为焦点时触发 | { value: string } |
| blur | 输入框失去焦点时触发 | { value: string } |
| confirm | 点击完成按钮时触发 | { value: string } |
| keyboard-height-change | 键盘高度发生变化的时候触发 | { height: number, duration: number } |
| linechange | 输入框行数变化时调用 | { height: number, lineCount: number } |
Example
vue
<template>
<textarea v-model:value="text" placeholder="请输入账号" />
</template>
<script setup lang="ts">
import { ref } from 'vue'
const text = ref('Evoker')
</script>