ea-ui

Textarea 文本域 ​

通过鼠标或键盘输入字符

引入 ​

js

js
<script type="module">
  import "./node_modules/easy-component-ui/components/ea-textarea/index.js";
</script>

css

TIP

需要注意的是, 如果需要使用到带有图标的 属性/组件, 需要提前使用 link 标签引入图标文件

html
<link
  rel="stylesheet"
  href="./node_modules/easy-component-ui/components/ea-icon/index.css"
/>

自定义样式 ​

移步到 CSS Part。

基础用法 ​

查看代码
html
<div class="row left">
  <ea-textarea type="textarea" rows="2" placeholder="这不是空的"></ea-textarea>
</div>

可自适应文本高度的文本域 ​

通过设置 autosize 属性可以使得文本域的高度能够根据文本内容自动进行调整。

查看代码
html
<div class="col left">
  <ea-textarea type="textarea" placeholder="这不是空的" autosize></ea-textarea>
</div>

设置高度的最值 ​

可以指定最小行数和最大行数。

查看代码
html
<div class="col left">
  <ea-textarea
    type="textarea"
    placeholder="这不是空的"
    min-rows="2"
    max-rows="10"
  ></ea-textarea>
  <ea-textarea
    type="textarea"
    placeholder="这不是空的"
    min-rows="5"
    max-rows="20"
  ></ea-textarea>
</div>

输入长度限制 ​

查看代码
html
<div class="col left">
  <ea-textarea
    type="textarea"
    placeholder="这不是空的"
    min-length="2"
    max-length="10"
  ></ea-textarea>
  <ea-textarea
    type="textarea"
    placeholder="这不是空的"
    min-length="5"
    max-length="20"
  ></ea-textarea>
</div>

展示字数统计 ​

查看代码
html
<div class="col left">
  <ea-textarea
    type="textarea"
    placeholder="这不是空的"
    rows="5"
    min-length="5"
    max-length="20"
    show-word-limit
  ></ea-textarea>
</div>

Attributes ​

参数说明类型可选值默认值
type类型stringtextareatextarea
rows输入框行数number-2
min-rows最小行数number--
max-rows最大行数number--
min-length最小长度number--
max-length最大长度number--
show-word-limit是否显示字数统计boolean-false
autosize高度是否自适应boolean-false
placeholder输入框占位文本string--
disabled禁用boolean-false

CSS Part ​

用法可参考 MDN ::part()伪类

名称说明
container外层容器
textarea文本域
word-limit字数统计 (仅当 show-word-limit 为 true 时生效)

Events ​

事件名说明参数获取值值的类型
input输入时触发-e.target.valueString
focus输入框聚焦时触发-e.target.valueString
blur输入框失去焦点时触发-e.target.valueString