tm-password 密码输入框

🎉目录导航

👉使用方法,跟数1,2,3一样简单

基本示例

<tm-password v-model="num" :code-length="4" ></tm-password>

<script>
	export default {
		data() {
			return {
				num:''
			}
		},
		methods: {}
	}
</script>

1
2
3
4
5
6
7
8
9
10
11

👉外框形状

主要通过控制model=[line|box|fill]类型

<tm-password  model="line"></tm-password>

👉内部形状

主要通过控制noval=[mline|round]类型

<tm-password  noval="round"></tm-password>

👉完整的示例

以下可以复制直接运行哦。不同的外框类型注意高亮部分

<template>
	<tm-fullView>
		<template v-slot:default="{info}">
			<view class="grey text " :class="$tm.vx.state().tmVuetify.black?'black bk':''" :style="{minHeight:info.height+'px'}">
				<tm-menubars title="密码输入框" color="bg-gradient-primary-lighten"  :showback="true"></tm-menubars>
				<tm-sheet :shadow="24">
					<view class="text-size-s text-weight-b mb-24">验证码</view>
					<tm-password  v-model="num" :code-length="4" :show-val="true" noval="round"></tm-password>
				</tm-sheet>
				
				<tm-sheet :shadow="24">
					<view class="text-size-s text-weight-b mb-24">个性化</view>
					<tm-password :round="24" :shadow="16" bg-color="white" text-color='primary' :height='110' :width='110' v-model="num" :code-length="4" :show-val="true" noval="mline"></tm-password>
					
				</tm-sheet>
				<tm-sheet :shadow="25">
					<view class="text-size-s text-weight-b mb-24">换个形状</view>
					<tm-password v-model="num" :code-length="5" :show-val="false" noval="mline"></tm-password>
					<view class="py-12"></view>
					<tm-password v-model="num" :code-length="5" :show-val="true" noval="round" model="line"></tm-password>
					<view class="py-32"></view>
					<tm-password v-model="num" :code-length="5" :show-val="false" noval="round" model="box"></tm-password>
					
				</tm-sheet>
				<tm-sheet >
					<view class="text-size-s text-weight-b mb-24 mt-24">暗黑模式</view>
					<tm-password v-model="num" :code-length="5" :black="true" :show-val="true" noval="round" model="box"></tm-password>
				</tm-sheet>
				<view style="height: 50upx;"></view>
			</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

<script>
	export default {
		data() {
			return {
				num:''
			}
		},
		methods: {
			
		}
	}
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13

👉启用暗黑模式

只要:black="true"即可啦

<!-- 完整的示例见上方 -->
<tm-sheet>
	<tm-password :black="true"></tm-password>
</tm-sheet>

1
2
3
4

👉props属性表

属性名称	类型	可选值	默认值	说明
value	String	Number	任意文本	''
black	Boolean	true/false	false	暗黑模式
color	String	任意主题色名	primary	主题色
bg-color	String	任意主题色名	grey-lighten-4	输入框的背景色
code-length	Number	任意数字	4	验证码长度
show-val	Boolean	true/false	false	是否展现/隐藏输入内容
text-color	String	任意主题色名	primary	文字颜色
keyborad-model	String	number/password	number	键盘类型
model	String	line/box/fill	fill	外框的样式
noval	String	mline/round	round	中间填充数据的样式
round	Number	任意数字	4	圆角
width	Number	任意数字	0	项目的宽，默认使用百分比的宽度
height	Number	任意数字	100	项目的高
shadow	Number	任意数字	0	投影

外框的样式model的可选值含意

line	box	fill
线型	边框型	背景色型

中间填充数据的样式noval的可选值含意

mline	round
中间为线型	中间为圆点型

👉事件

事件名称	返回参数	返参类型	说明
@confirm	input	String	键盘上点击确认键触发，并携带该键盘输入的数据，同v-model数据一致

示例如下

<tm-password 
@confirm="confirm"  
v-model="word"></tm-password>

1
2
3

<script>
	export default {
		data() {
			return {
				word:'',
			}
		},
		methods: {
			confirm(val){
				console.log(`我是输入的数据：${val}`);
			}
		}
	}
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

👉更新日志

2021年8月20日14:8:5 初始版本。

tmzdy 于 2022/12/7 编辑报错？ | 评论？

# tm-password 密码输入框

# 👉使用方法,跟数1,2,3一样简单

# 👉外框形状

# 👉内部形状

# 👉完整的示例

# 👉启用暗黑模式

# 👉props属性表

# 👉事件

# 👉更新日志