Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Fix: 修复input组件前缀丢失的问题&添加input组件文档示例 #190

Merged
merged 2 commits into from
Feb 21, 2022
Merged

Fix: 修复input组件前缀丢失的问题&添加input组件文档示例 #190

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
0e6ce34
fix: fix:修复input组件前缀丢失问题
rileycai Feb 21, 2022
fc02941
Merge branch 'feature/input-fix' of https://github.com/zhenzhencai/td…
rileycai Feb 21, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
38 changes: 19 additions & 19 deletions example/pages/input/input.wxml
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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