tm-input 输入框
技巧提醒
作为重量级组件，我非常重视它！
我已经内置了非常丰富的样式自定功能。因此你看到它在界面方面非常的强大。你会喜欢上它的，不管是组件化还是个性化 它都能满足你的要求。比约大多数组件库市场上的输入框要完美。
建议看完整示例运行起先来，看效果。
🎉目录导航
👉使用方法,跟数1,2,3一样简单
基本示例
<tm-input></tm-input>
1
<script>
export default {
data() {
return {
}
},
methods: {}
}
</script>
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
👉完整的示例
可以复制到页面直接运行
<template>
<tm-fullView>
<template v-slot:default="{info}">
<view class="grey text " :class="tmVuetify.black?'black bk':''" :style="{minHeight:info.height+'px'}">
<tm-menubars title="输入框" color="bg-gradient-blue-accent" :showback="true"></tm-menubars>
<tm-sheet :shadow="24">
<view class="text-size-s text-weight-b mb-24 ">基本输入框</view>
<tm-input ></tm-input>
<tm-input :border-bottom="false" :vertical="true" title="输入你的名称" border-color="grey-lighten-1"></tm-input>
</tm-sheet>
<tm-input :vertical="true" :height="120" title="意见" :maxlength="512" :border-bottom="false" :required="true" placeholder="请输入你的意见." input-type="textarea" v-model="val_1" bg-color="grey-lighten-5" clear></tm-input>
<tm-input :border-bottom="false" bg-color="grey-lighten-5" title="你的名称" border-color="grey-lighten-3"></tm-input>
<tm-input prefix-text="你的名称" :border-bottom="false" bg-color="grey-lighten-5" border-color="grey-lighten-3"></tm-input>
<tm-sheet :shadow="24">
<view class="text-size-s text-weight-b mb-24">上下</view>
<tm-input bg-color="grey-lighten-5" :border-bottom="false" title-class="text-size-n text-weight-b text-primary" title="请输入金额" prefixp-icon="icon-lock" suffix="元" :vertical="true" placeholder="请输入产品价格"></tm-input>
<tm-input bg-color="grey-lighten-5" :border-bottom="false" input-type="number" required :round="0" title-class="text-size-n text-weight-b text-primary" title="输入手机号码" :vertical="true" placeholder="请输入数字类型手机号码">
<template v-slot:default="{title}">
{{title}}<text class="text-red">（必填项）</text>
</template>
<template v-slot:rightBtn>
<tm-button theme="bg-gradient-blue-accent" @click="$refs.daojishi.start()" :round="0" :font-size="24" :height="84" block :width="120">
<tm-countdown ref="daojishi" :autoStart="false" :time="60*1000">
<template v-slot:default="{timeData}">
{{timeData.finish==false&&timeData.data.seconds!=='00'?'剩'+timeData.data.seconds+'秒':'验证码'}}
</template>
</tm-countdown>
</tm-button>
</template>
</tm-input>
</tm-sheet>
<tm-sheet :shadow="24">
<view class="text-size-s text-weight-b mb-24">必填、校验项。去除背景，右对齐</view>
<tm-input :required="true" title="金额" v-model="val_1" placeholder="请输入产品价格" align="right"></tm-input>
<tm-pickersDate @confirm="dateChange" :default-value="val_2" end="2021-12-31">
<view class="fulled">
<tm-input :required="true" :disabled="true" title="日期" v-model="val_2" right-icon="icon-angle-right" placeholder="请输入产品价格" align="right"></tm-input>
</view>
</tm-pickersDate>
</tm-sheet>
<tm-sheet color="blue" :shadow="24">
<view class="text-size-s text-weight-b mb-24">个性化输入框</view>
<tm-sheet :margin="[0,0]" :padding="[0,0]" classname="overflow" :shadow="24">
<tm-input clear :required="true" title="金额" v-model="val_1" placeholder="请输入产品价格" align="right"></tm-input>
<tm-pickersDate @confirm="dateChange" :default-value="val_2" end="2021-12-31">
<view class="fulled">
<tm-input :required="true" :disabled="true" title="日期" v-model="val_2" right-icon="icon-angle-right" placeholder="请输入产品价格" align="right"></tm-input>
</view>
</tm-pickersDate>
</tm-sheet>
</tm-sheet>
<tm-sheet :shadow="24">
<view class="text-size-s text-weight-b mb-24">个性化输入框</view>
<view class="mb-32">
<tm-input title="汽车价格" align="right" suffix="元" :border-bottom="false" :bg-round="24" :bg-shadow="24" :round="0" color="grey" left-icon="icon-lock"></tm-input>
</view>
<view>
<tm-input title="配置名称" align="right" :border-bottom="false" :bg-round="24" :bg-shadow="24" :round="0" color="grey" left-icon="icon-lock"></tm-input>
</view>
</tm-sheet>
<tm-sheet color="bg-gradient-blue-grey-lighten" :shadow="24">
<view class="text-size-s text-weight-b mb-24 ">更多个性化</view>
<tm-input text-color="white" title-class="text-white" bg-theme="" :required="true" title="金额" v-model="val_1" placeholder="请输入产品价格" align="right"></tm-input>
<tm-input text-color="white" title-class="text-white" bg-theme="" title="日期" v-model="val_2" placeholder="请输入产品价格" align="right"></tm-input>
</tm-sheet>
</view>
</template>
</tm-fullView>
</template>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
<script>
export default {
data() {
return {
val_1:'',
val_2:'2021-8-24',
}
},
methods: {
dateChange(e){
this.val_2 = e.year + '-' + e.month + '-' + e.day;
}
}
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
👉props属性表
| 属性名称 | 类型 | 可选值 | 默认值 | 说明 |
|---|---|---|---|---|
| black | Boolean | true/false | false | 暗黑模式 |
| required | Boolean | true/false | false | 是否是必填。如果必填写将会触发基础的校验，不能为空。 |
| adjust-position | Boolean | true/false | false | 是否上推键盘 |
| auto-focus | Boolean | true/false | false | 自动获得焦点 |
| disabled | Boolean | true/false | false | 是否显示聚焦状态。 |
| focus-show | Boolean | true/false | false | 禁用 |
| password | Boolean | true/false | false | 密码模式 |
| clear | Boolean | true/false | false | 显示清除图标 |
| border-bottom | Boolean | true/false | false | 是否显示下划线 |
| vertical | Boolean | true/false | false | 是否上下排列 |
| flat | Boolean | true/false | false | 是否去除所有边框 |
| confirm-type | String | done/go/next/send/search | 'done' | 键盘右下角确认按钮文字 |
| title-class | String | 任意类名 | 'text-grey-darken-4' | 自定左边标题或者上标题的类 |
| input-type | String | digit/text/number/password/idcard/textarea1.1.6 | text | 输入模式,textarea为多行文本输入 |
| value | String | digit/text/number/password/idcard | text | 输入内容,建议：v-model,value双向绑定时必须value.sync |
| right-icon | String | - | - | 后缀图标 |
| left-icon | String | - | - | 外层(标题)前缀图标 |
| prefixp-icon | String | - | - | 输入框内部前缀图标 |
| prefixp-icon-color | String | '' | - | 输入框内部前缀图标颜色，默认使用主题色 |
| prefixp-text1.1.9 | String | - | - | 输入框内部前缀文字 |
| suffix | String | - | - | 后缀文字 |
| suffixp-icon1.1.8 | String | '' | - | 输入框内后缀图标 |
| suffixp-icon-color1.1.8 | String | - | - | 输入框内后缀图标颜色，默认使用主题色 |
| title | String | - | - | 标题 |
| title-font-size | String | xxs,xs,s,n,g,lg,xl,任意数字 | 'n' | 标题文字，也可以是数字，单位rpx |
| font-size | String/Number | xxs,xs,s,n,g,lg,xl,任意数字 | 'n' | 输入框文字大小，也可以是数字，单位rpx |
| align | String | left,center,right | left | 输入框文字对齐方式 |
| bg-theme | String | 任意主题名称 | white | 整体个输入框背景 |
| color | String | 任意主题名称 | primary | 主题色名称 |
| bg-color | String | 任意主题名称 | grey-lighten-5 | 输入框背景色 |
| border-color | String | 任意主题名称 | "" | 输入框边框类型主题颜色名称 |
| text-color | String | 任意主题名称 | "black" | 输入框文字颜色 |
| placeholder | String | - | " 请输入" | 占位文字 |
| maxlength | Number | 任意数字 | -1 | 最大输入字符数 |
| round | Number | 任意数字 | 2 | 输入框圆角 |
| bg-round | Number | 任意数字0-25 | 0 | 整体框圆角 |
| height1.1.6 | Number | 任意数字 | 100 | 单位rpx,输入框高度 |
| bg-shadow | Number | 任意数字0-25 | 0 | 整体框投影 |
| padding | Array[Number] | 任意数字0-25 | [24,12] | 输入框的左右，上下间距 |
| name1.1.7 | String | '' | '' | 提交表单时的的字段名称标识 |
| placeholder-class | String | '' | '' | 点位符的自定义类 |
| verify | Function | - | 见下方 | 校验规则函数 |
| showIndent | Boolean | true/false | true | 是否显示两间隙，当宽度100%可以去除缩进。 |
校验函数的写法有点不一样
因uniapp的vue2不支持在props中传递函数，因此可以使用hack方法，双return来解决这个兼容性的问题。
verify:()=>{
//返回一个校验函数。
return (val)=>{
//...你的代码
//注意此处的this上下文，为组件内部input的上下文，而非你的页面上下文。
return {
check: val=='10010',//如果变量不为10010就为假，否则为真。
text: "请输入10010。"
};
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
👉事件
| 事件名称 | 返回参数 | 返参类型 | 说明 |
|---|---|---|---|
| @click | - | - | 点击输入框时触发发的函数。 |
| @blur | - | - | 获取焦点时触发。 |
| @clear | - | - | 清除图标被点击时触发。 |
| @input | 当前输入的数据 | - | 输入时触发的函数。 |
👉Slot插槽属性表
| 属性名称 | 类型 | 数据 | 说明 |
|---|---|---|---|
| default | String | title | 标题数据 |
| rightBtn | - | - | 右边可放入的内容 |
👉更新日志
2021年8月20日14:8:5 初始版本。