Skip to content

Commit

Permalink
Merge pull request #190 from zhenzhencai/feature/input-fix
Browse files Browse the repository at this point in the history 
Fix: 修复input组件前缀丢失的问题&添加input组件文档示例
  • Loading branch information
@lixingdecai
lixingdecai authored Feb 21, 2022
2 parents 8a523aa + fc02941 commit 51dc926
Show file tree
Hide file tree
Showing 3 changed files with 74 additions and 51 deletions.
38 changes: 19 additions & 19 deletions example/pages/input/input.wxml
View file
Original file line number Diff line number Diff line change
@@ -1,36 +1,36 @@
<!--示例页面-->
<!--示例页面 -->
<view class="input-example">
<view class="demo-title">Input 输入框</view>
<view class="demo-desc">用于单行文本信息输入。</view>
<t-demo title="01 类型" desc="基础文本框">
<t-input model:value="{{firstValue}}" name="标签文字" placeholder="请输入文字" />
<t-input model:value="{{firstValue}}" label="标签文字" placeholder="请输入文字" />
</t-demo>
<t-demo title="" desc="必填、选填文本框">
<t-input name="slot" placeholder="请输入文字">
<text slot="name">标签文字<text style="color: #e34d59"> *</text> </text>
<t-input placeholder="请输入文字" label="slot">
<text slot="label">标签文字<text style="color: #e34d59"> *</text> </text>
</t-input>
<t-input name="标签文字" placeholder="请输入文字(选填)" />
<t-input label="标签文字" placeholder="请输入文字(选填)" />
</t-demo>
<t-demo title="" desc="无标题文本框">
<t-input placeholder="请输入文字" />
</t-demo>
<t-demo title="" desc="带提示信息文本框">
<t-input name="标签文字" placeholder="请输入文字" suffixIcon="error-circle-filled" />
<t-input label="标签文字" placeholder="请输入文字" suffixIcon="error-circle-filled" />
</t-demo>
<t-demo title="" desc="长标题文本框">
<t-input name="超长需换行的标签" placeholder="预设文本" />
<t-input label="超长需换行的标签" placeholder="预设文本" />
</t-demo>
<t-demo title="02 状态" desc="文本框状态">
<t-input name="标签文字" placeholder="请输入文字" value="已输入文字" />
<t-input name="标签文字" value="一段错误填写的内容" error-message="提示信息" />
<t-input name="标签文字" value="不可编辑文字" disabled />
<t-input label="标签文字" placeholder="请输入文字" value="已输入文字" />
<t-input label="标签文字" value="一段错误填写的内容" error-message="提示信息" />
<t-input label="标签文字" value="不可编辑文字" disabled />
</t-demo>
<t-demo title="03 特殊类型" desc="特殊文本类型">
<view class="cell">
<t-input name="输入密码" password value="{{textPassword}}" clearable bind:clear="onClear" />
<t-input label="输入密码" password value="{{textPassword}}" clearable bind:clear="onClear" />
</view>
<view class="cell">
<t-input placeholder="请输入验证码" name="验证码">
<t-input placeholder="请输入验证码" label="验证码">
<view slot="suffix">
<image
style="width: 72px; height: 36px; display: block; margin-top: -6px; margin-bottom: -6px"
Expand All @@ -53,7 +53,7 @@
</view>
<view class="cell">
<t-input
name="价格"
label="价格"
placeholder="0.00"
suffix="元"
bindchange="onPriceInput"
Expand All @@ -63,26 +63,26 @@
/>
</view>
<view class="cell">
<t-input name="数量" placeholder="填写个数" suffix="个" type="number" />
<t-input label="数量" placeholder="填写个数" suffix="个" type="number" />
</view>
</t-demo>
<t-demo title="04 规格" desc="文本框尺寸规格">
<view class="cell">
<t-input name="小规格H48" placeholder="请输入文字" />
<t-input label="小规格H48" placeholder="请输入文字" />
</view>
<view class="cell">
<t-input name="中规格H56" placeholder="请输入文字" size="medium" />
<t-input label="中规格H56" placeholder="请输入文字" size="medium" />
</view>
</t-demo>
<t-demo title="05 内容位置" desc="文本框内容位置">
<view class="cell">
<t-input name="左对齐" placeholder="请输入文字" />
<t-input label="左对齐" placeholder="请输入文字" />
</view>
<view class="cell">
<t-input name="居中" placeholder="请输入文字" align="center" />
<t-input label="居中" placeholder="请输入文字" align="center" />
</view>
<view class="cell">
<t-input name="右对齐" placeholder="请输入文字" align="right" />
<t-input label="右对齐" placeholder="请输入文字" align="right" />
</view>
</t-demo>
<t-demo title="06 字数限制" desc="文本框字数限制">
Expand Down
80 changes: 51 additions & 29 deletions src/input/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,29 @@ isComponent: true
<img src="https://tdesign.gtimg.com/miniprogram/readme/input-1.png" width="375px" height="50%">

```html
<t-input name="标签文字" placeholder="请输入文字" />
<!-- 无标题输入框 -->
<t-input placeholder="请输入文字" />

<!-- 带标题输入框 设置属性：label -->
<t-input label="标签文字" placeholder="请输入文字" />

<!-- 自定义标题输入框 设置属性：label="slot" slot="label"-->
<t-input placeholder="请输入文字" label="slot">
<text slot="label">
标签文字<text style="color: #e34d59"> *</text>
</text>
</t-input>

<!-- 带后缀输入框 设置属性：slot="suffix" -->
<t-input
placeholder="请输入手机号码"
value="{{phoneNumber}}"
type="number"
error-message="{{phoneError ? '手机号输入不正确' : ''}}"
bindchange="onPhoneInput"
>
<view slot="suffix" class="verify">发送验证码 </view>
</t-input>
```

### 双向绑定
Expand All @@ -34,34 +56,34 @@ isComponent: true
## API
### Input Props

名称 | 类型 | 默认值 | 说明 | 必传
-- | -- | -- | -- | --
adjust-position | Boolean | true | 键盘弹起时，是否自动上推页面 | N
align | String | left | 文本内容位置，居左/居中/居右。可选项：left/center/right | N
clearable | Boolean | false | 是否可清空 | N
confirm-hold | Boolean | false | 点击键盘右下角按钮时是否保持键盘不收起点 | N
confirm-type | String | done | 设置键盘右下角按钮的文字，仅在 type='text'时生效。可选项：send/search/next/go/done | N
disabled | Boolean | false | 是否禁用输入框 | N
error-message | String | - | 错误提示文本，值为空不显示 | N
external-classes | Array | - | 组件类名，用于设置组件外层元素、输入框、占位符、错误信息等元素类名。`['t-class', 't-class-input', 't-class-placeholder', 't-class-error-msg']` | N
focus | Boolean | false | 自动聚焦 | N
label | String / Slot | - | 左侧文本 | N
maxcharacter | Number | - | 用户最多可以输入的字符个数，一个中文汉字表示两个字符长度。`maxcharacter` 和 `maxlength` 二选一使用 | N
maxlength | Number | - | 用户最多可以输入的文本长度。值小于等于 0 的时候，则不限制输入长度。`maxcharacter` 和 `maxlength` 二选一使用 | N
placeholder | String | undefined | 占位符 | N
prefix-icon | String / Slot | - | 组件前置图标，值为字符串则表示图标名称 | N
size | String | small | 输入框尺寸。可选项：small/medium。TS 类型：`'medium' | 'small'` | N
suffix | String / Slot | - | 后置图标前的后置内容 | N
suffix-icon | String / Slot | - | 后置文本内容，值为字符串则表示图标名称 | N
type | String | text | 输入框类型。可选项：text/number/idcard/digit/safe-password/password | N
value | String / Number | - | 输入框的值。TS 类型：`InputValue`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/input/type.ts) | N
| 名称 | 类型 | 默认值 | 说明 | 必传 |
| ---------------- | --------------- | --------- | ---------------------------------------------------------------------------------------------------------------------------------------------- | ---- |
| adjust-position | Boolean | true | 键盘弹起时，是否自动上推页面 | N |
| align | String | left | 文本内容位置，居左/居中/居右。可选项：left/center/right | N |
| clearable | Boolean | false | 是否可清空 | N |
| confirm-hold | Boolean | false | 点击键盘右下角按钮时是否保持键盘不收起点 | N |
| confirm-type | String | done | 设置键盘右下角按钮的文字，仅在 type='text'时生效。可选项：send/search/next/go/done | N |
| disabled | Boolean | false | 是否禁用输入框 | N |
| error-message | String | - | 错误提示文本，值为空不显示 | N |
| external-classes | Array | - | 组件类名，用于设置组件外层元素、输入框、占位符、错误信息等元素类名。`['t-class', 't-class-input', 't-class-placeholder', 't-class-error-msg']` | N |
| focus | Boolean | false | 自动聚焦 | N |
| label | String / Slot | - | 左侧文本，要是用Slot，请设置label="slot" | N |
| maxcharacter | Number | - | 用户最多可以输入的字符个数，一个中文汉字表示两个字符长度。`maxcharacter` 和 `maxlength` 二选一使用 | N |
| maxlength | Number | - | 用户最多可以输入的文本长度。值小于等于 0 的时候，则不限制输入长度。`maxcharacter` 和 `maxlength` 二选一使用 | N |
| placeholder | String | undefined | 占位符 | N |
| prefix-icon | String / Slot | - | 组件前置图标，值为字符串则表示图标名称 | N |
| size | String | small | 输入框尺寸。可选项：small/medium。TS 类型：`'medium'、'small'` | N |
| suffix | String / Slot | - | 后置图标前的后置内容 | N |
| suffix-icon | String / Slot | - | 后置文本内容，值为字符串则表示图标名称 | N |
| type | String | text | 输入框类型。可选项：text/number/idcard/digit/safe-password/password | N |
| value | String / Number | - | 输入框的值。TS 类型：`InputValue`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/input/type.ts) | N |

### Input Events

名称 | 参数 | 描述
-- | -- | --
blur | `(value: InputValue, context: { e: FocusEvent })` | 失去焦点时触发
change | `(value: InputValue` | 输入框值发生变化时触发
clear | - | 清空按钮点击时触发
enter | `(value: InputValue, context: { e: KeyboardEvent })` | 回车键按下时触发
focus | `(value: InputValue, context: { e: FocusEvent })` | 获得焦点时触发
| 名称 | 参数 | 描述 |
| ------ | ---------------------------------------------------- | ---------------------- |
| blur | `(value: InputValue, context: { e: FocusEvent })` | 失去焦点时触发 |
| change | `(value: InputValue` | 输入框值发生变化时触发 |
| clear | - | 清空按钮点击时触发 |
| enter | `(value: InputValue, context: { e: KeyboardEvent })` | 回车键按下时触发 |
| focus | `(value: InputValue, context: { e: FocusEvent })` | 获得焦点时触发 |
7 changes: 4 additions & 3 deletions src/input/input.wxml
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,11 @@
<view
class="{{classPrefix}} {{!!errorMessage ? classBasePrefix + '-is-error' : ''}} {{classPrefix}}--size-{{size}} {{classPrefix + '--bordered'}} t-class"
>
<view wx:if="{{name}}" class="{{classPrefix + '__name'}}">
<slot name="name" wx:if="{{name === 'slot'}}" />
<text wx:else>{{name}}</text>
<view wx:if="{{label}}" class="{{classPrefix + '__name'}}">
<slot name="label" wx:if="{{label === 'slot'}}" />
<text wx:else>{{label}}</text>
</view>

<view class="{{classPrefix}}__wrap">
<view class="{{classPrefix}}__content">
<input
Expand Down

0 comments on commit 51dc926

Please sign in to comment.