giao-text

小程序文本输入组件,高度自定义，可拓展性。

代码片段示例

导入代码片段 https://developers.weixin.qq.com/s/Sjal5pm87mfC

github https://github.com/oloshe/giao-text

快速开始

安装

npm i giao-text

添加引用

{
  "usingComponents": {
    "giao-text": "../../component/giao-text/index"
  }
}

基础用法

<text-control stringSet="1234567890." placeholder="请输入内容"/>

自定义字符集

<text-control stringSet="112,233,dds,566,#^@,dsd,<>?>,【】,55" separator="," placeholder="请输入内容"/>

自定义Slot

<text-control id="custom" stringSet="123456789" columns="3" placeholder="请输入内容">
  <view slot="right" class="btn">确定</view>
</text-control>
<text-control id="custom" stringSet="123456789" columns="3" placeholder="请输入内容">
  <icon slot="left" class="icon" type="search" size="25" />
</text-control>

自定义按钮样式

<text-control stringSet="1234567890" columns="5" btn-class="custom-btn" hover-class="custom-hover" collapse-class="collapse" collapseSlot placeholder="请输入内容">
    <icon slot="collapse" type="download" size="25" />
</text-control>

API

Props

|参数|说明|类型|默认值| |-|-|-|-| |string-set|字符集|String|-| |separator|分隔符，用于分割stringSet|String|''| |columns|列数，每行的最大按钮个数|Number|6| |distinct|是否去重|Boolean|false| |combo|当前字符长度为2时，是否将光标移至中间,如"()" "[]"|Boolean|false| |clearable|是否显示清除按钮|Boolean|false| |type|可设置为任意原生类型, 如 number idcard textarea digit|String|'text'| |password|是否是密码类型|Boolean|false| |maxlength|最大长度，设置为-1为不限|Number|-1| |random|按钮是否随机分配位置（在每次输入框获取焦点时）|Boolean|false| |keep|按钮面板是否保持显示|Boolean|false| |collapse-label|收起按钮显示文本|String|'收起'| |collapse-slot|使用收起按钮slot时需设置此属性|Boolean|false| |scroll|是否为滚动显示（单行）|Boolean|false| |hoverStayTime|按钮点击态持续时间|Number|100| |placeholder|输入框为空时占位符|String|-| |placeholder-style|指定 placeholder 的样式|String|-| |placeholder-class|指定 placeholder 的样式类|String|-| |disabled|是否禁用|Boolean|false|

输入框 API 参考 微信官方文档

Events

|事件|说明|返回参数| |-|-|-| |bind:change|内容改变事件|value = event.detail| |bind:input|输入框输入事件，点击按钮不触发|value = event.detail| |bind:focus|输入框获取焦点事件|-| |bind:blur|输入框失去焦点事件|-| |bind:confirm|点击完成按钮时触发|value = event.detail.value| |bind:keyboardheightchange|键盘高度发生变化的时候触发此事件|-|

注：部分输入法由于输入时不主动触发input事件，所以会导致不好的体验