介绍
ionic4-reactive-textarea 是一个基于 Ionic 4 开发的响应式文本框 npm 包。通过此 npm 包，前端开发人员可以快速便捷地实现在文本框内输入文字时文本框自适应高度变化的需求，尤其适用于移动端开发。
安装
通过 npm 可以将 ionic4-reactive-textarea 安装到自己的项目中。
npm install ionic4-reactive-textarea
使用
在需要使用的组件中，导入并使用 ionic4-reactive-textarea 组件。
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
------ - ----------- ---------- -------- --------- ---------- - ---- ---------------
------ ---------------- ---- ---------------------------
----- ----- -------- - -- -- -
----- ------ -------- - -------------
------ -
---------
-----------
------------
------------------ -------------------
-------------
------------
------------
----------------- ------------------- ------------ -------------- -- ------------------------- --
-------------
----------
--
--
------ ------- -----API
Props
| 名称 | 类型 | 默认值 | 是否必填 | 描述 |
|---|---|---|---|---|
| placeholder | string | '' | 否 | 文本框的提示语 |
| value | string | '' | 是 | 文本框的值 |
| onIonChange | (event: CustomEvent) => void | 无 | 是 | 当文本框的值发生变化时的回调函数 |
| minRows | number | 1 | 否 | 文本框的最小行数，默认为 1 行 |
| maxRows | number | null | 否 | 文本框的最大行数，默认为 null，即不限制最大行数 |
| growthThreshold | number | 0 | 否 | 文本框高度变化的阈值，只有输入内容超出此值时高度会增加 |
| shrinkThreshold | number | 0 | 否 | 文本框高度变化的阈值，只有输入内容低于此值时高度会减少 |
| debounce | number | 500 | 否 | 防抖时间，输入值变化时将不会触发 onIonChange 回调直到防抖结束 |
| debounceLeading | boolean | false | 否 | 是否启用防抖前缀，即触发 onIonChange 回调时是否先触发一次 |
样式
ionic4-reactive-textarea 的样式可以通过 CSS 进行自定义。
// SCSS
.reactive-textarea {
--height: 80px; // 设置初始高度
--font-size: 16px; // 设置字体大小
--line-height: 1.5; // 设置行高
--transition-duration: 0.2s; // 设置过渡动画时长
--border: 1px solid black; // 设置边框样式
}示例
基本示例
在文本框内输入文字时文本框自适应高度变化。
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
------ ---------------- ---- ---------------------------
----- --- - -- -- -
----- ------ -------- - -------------
------ -
----------------- ------------------- ------------ -------------- -- ------------------------- --
--
--
------ ------- ----带最小行数和最大行数的文本框
设置文本框的最小行数和最大行数，当输入的文字行数超过最大行数时出现滚动条。
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
------ ---------------- ---- ---------------------------
----- --- - -- -- -
----- ------ -------- - -------------
------ -
-----------------
-------------------
------------
-------------- -- -------------------------
-----------
-----------
--
--
--
------ ------- ----带高度变化阈值的文本框
设置文本框的高度变化阈值，只有输入的文字超出阈值时文本框高度才会增加。
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
------ ---------------- ---- ---------------------------
----- --- - -- -- -
----- ------ -------- - -------------
------ -
-----------------
-------------------
------------
-------------- -- -------------------------
--------------------
--
--
--
------ ------- ----带防抖的文本框
设置文本框的防抖时间，以避免过快触发 onIonChange 回调函数。
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
------ ---------------- ---- ---------------------------
----- --- - -- -- -
----- ------ -------- - -------------
------ -
-----------------
-------------------
------------
-------------- -- -------------------------
---------------
--
--
--
------ ------- ----来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066bcf967216659e244dba