组件库文档 tmui.design
输入框 Input
通过鼠标或键盘输入字符。
非常重要
使用UNI开发的input组件,一定会在微信小程序中的机型(不敢保证 全部),双向绑定数据输入数据时,会出现字符闪烁或者输入过快时,字符丢失。
解决方案:
- 采用原生的input组件,不要使用本组件。
- v-model改成v-model.lazy,可以有效改善字符丢失的问题。
以上BUG是uni自带的,我无力解决,只能按照方案解决。另外一提,使用微信原生代码开发的自定Input组件,不会出现双向绑定,输入过快时字符丢失问题,是不是很神奇?
🌶️ 输入框 Input 示例
查看模拟效果+
示例模板
vue
<template>
<tm-app>
<tm-sheet>
<tm-text :font-size="24" _class="text-weight-b" label="基础示例,更多见文档"></tm-text>
<tm-divider></tm-divider>
<tm-input></tm-input>
<tm-input :margin="[0, 24]" password placeholder="请输入密码,显示隐藏内容" prefix="tmicon-lock-fill"></tm-input>
<tm-input
:inputPadding="[12]"
placeholder="文本域,输入自动增高。"
confirm-hold
confirm-type="换行"
showCharNumber
:maxlength="100"
:border="1"
color="grey-5"
autoHeight
type="textarea"
></tm-input>
</tm-sheet>
<tm-sheet>
<tm-text :font-size="24" _class="text-weight-b" label="一些其它常见示例"></tm-text>
<tm-divider></tm-divider>
<tm-input v-model="test" prefix="tmicon-user-fill" showClear></tm-input>
<tm-input v-model="test" prefixLabel="字符统计" :margin="[0, 24]" showCharNumber :maxlength="10"></tm-input>
<tm-input v-model="test" suffix="tmicon-clock-fill" showClear></tm-input>
<tm-input prefix="tmicon-dollar" suffixLabel="元" :margin="[0, 24]"></tm-input>
<tm-input :searchWidth="120" @search="search" prefix="tmicon-search" searchLabel="搜索"></tm-input>
</tm-sheet>
<tm-sheet>
<tm-text :font-size="24" _class="text-weight-b" label="样式配置"></tm-text>
<tm-divider></tm-divider>
<tm-input color="primary" prefix="tmicon-user-fill"></tm-input>
<tm-input prefixLabel="聚焦样式" color="white" focusColor="red" :margin="[0, 24]" prefix="tmicon-user-fill"></tm-input>
</tm-sheet>
<tm-sheet color="primary">
<tm-text :font-size="24" _class="text-weight-b" label="其它"></tm-text>
<tm-divider></tm-divider>
<tm-input color="primary" focusColor="green" prefix="tmicon-user-fill"></tm-input>
<tm-input color="primary" focusColor="green" :margin="[0, 24]" prefix="tmicon-lock-fill"></tm-input>
</tm-sheet>
</tm-app>
</template>
<script lang="ts" setup>
import { ref, computed, nextTick } from 'vue'
import { onShow, onLoad } from '@dcloudio/uni-app'
import tmApp from '@/tmui/components/tm-app/tm-app.vue'
import tmSheet from '@/tmui/components/tm-sheet/tm-sheet.vue'
import tmText from '@/tmui/components/tm-text/tm-text.vue'
import tmInput from '@/tmui/components/tm-input/tm-input.vue'
import tmDivider from '@/tmui/components/tm-divider/tm-divider.vue'
const test = ref('')
function search(val: string) {
console.log(val)
}
</script>🌶️ 兼容性
| APP-VUE | APP-NVUE | 小程序 | WEB/H5 | VUE3/TS |
|---|---|---|---|---|
| ✔️ | ✔️ | ✔️ | ✔️ | ✔️ |
🌱 参数
本组件含有公共属性 公共属性
| 参数名 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| followTheme | [Boolean,String] | true | 跟随系统主题 |
| color | String | grey-4 | 颜色 |
| prefixColor | String | '' | 应用于前缀图标及标题色 |
| suffixColor | String | '' | 应用于后缀图标及标题色 |
| focusColor | String | primary | 激活时的主题配色。 |
| fontColor | String | '' | 默认使用自动配色 |
| text | Boolean | true | 是否让背景不浅色,flase时color背景不会被浅化 |
| outlined | Boolean | false | |
| border | Number | 0 | 边框 |
| transprent | Boolean | false | 是否透明 |
| round | Number | 3 | 圆角0-25,单位rpx |
| shadow | Number | 0 | 投影,0-25 |
| margin | Array<number> | [0,0] | 外间距[x,y]x=左右,y=上下 |
| padding | Array<number> | [0,0] | 内间距[x,y]x=左右,y=上下 |
| height | Number | 64 | 高度,单位rpx |
| prefix | String | '' | 前缀图标 |
| prefixLabel | String | '' | 前缀文字 |
| suffix | String | '' | 后缀图标 |
| suffixLabel | String | '' | 后缀文字 |
| fontSize | Number | 30 | 字体大小 |
| search | String | '' | tmicon-search |
| searchLabel | String | '' | 搜索 |
| searchWidth | Number | 0 | 搜索按钮的宽度,默认为0根据文字label自动增加宽. |
| searchFontColor | String | '' | 搜索按钮字体颜色,默认为自动 |
| searchBgColor | String | '' | 搜索按钮背景颜色,默认为主题色 |
| customicon | Boolean | false | 是否为自定义图标 |
| showClear | Boolean | false | 是否显示清空 |
| password | Boolean | false | 是否密码框 |
| disabled | Boolean | false | 是否禁用 |
| placeholder | String | 请输入内容 | 文本框占位文本 |
| placeholderStyle | string | '' | placeholder样式,只支持字符串格式 |
| errorLabel | String | 请输入内容 | 错误时,提示的文本。 |
| align | String | left | 对齐方式。可选值:left,right,center |
| modelValue | [String,Number] | '' | 绑定值,双向绑定时请使用v-model="xx",或者:value.sync |
| inputPadding | Array<number> | [24,0] | 输入框边距,注意如果你开启了搜索按钮此属性失效。你可以根据输入框高度来增加高度。 |
| showCharNumber | Boolean | false | 是否显示字符统计,需要绑定value后才会显示。 |
| maxlength | Number | -1 | 最大长度 |
| type | String | text | 表单类型:digit/text/number/password/idcard/textarea |
| cursorSpacing | Number | 24 | |
| confirmType | String | done | 键盘右下角确认按钮文字:done/go/next/send/search |
| confirmHold | Boolean | false | |
| autoBlur | Boolean | true | 自动失去焦点 |
| holdKeyboard | Boolean | false | |
| adjustPosition | Boolean | true | 是否上推键盘 |
| focus | Boolean | false | 是否聚焦 |
| readonly | Boolean | false | 是否为只读状态,如果你是支付宝或者钉钉小程序,在使用disabled时,文字变灰,可使用此属性代替。 |
| autoHeight | Boolean | false | type=textarea时生效 |
| showTopErrorGap | Boolean | true | 用于隐藏顶部的错误间隙,但保留底部,以减少布局间的空隙 |
| clearAndEyeColor | String | '' | 清除按钮,显示密码按钮的颜色 |
🌹 事件
| 事件名 | 参数 | 返回数据 | 描述 |
|---|---|---|---|
| focus | - | - | 获取焦点时触发。 |
| blur | - | - | 失去焦点事件 |
| confirm | - | - | 提交事件 |
| input | - | - | 输入时触发的函数。 |
| update:modelValue | - | - | 更新表单值相当于v-model |
| clear | - | - | 清除图标被点击时触发。 |
| search | - | - | 查询 |
| keyboardheightchange | - | - | 键盘高度变化 |
| click | - | - | 点击事件 |
🌽 slot插槽
| 插槽名 | 描述 |
|---|---|
| left | 左边可放入的内容 |
| right | 右边可放入的内容 |
🥗 ref方法
无
💏 文档贡献
此页文档由Sunlight贡献,如果对该框架感兴趣的可以参与我们一同进步!
