uniapp，@input @change @blur 等事件，需要传额外参数的方法

àì夳堔傛蜴生んèń 2022-10-05 13:54 290阅读 0赞

这里以input为例，先看效果

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNTQzMjY0_size_16_color_FFFFFF_t_70][]

目的：我这里的目的是为了减少代码，提高页面加载速度，主要还是自己比较懒~

下面直接上全部代码了

<template>
    	<view class="content" :style="{'height': windowHeight + 'px'}">
    		<view class="login-wrap">
    			<view class="login-item" v-for="item in 3" :key="item">
    				<image class="login-icon" :src="iconLoginLock"></image>
    				<input type="text" :value="item == 1? oldPassword: item == 2? newPassword: item == 3? affirmPassword: ''" placeholder="请输入用户手机号" @input="getPassword($event, item)" />
    			</view>
    		</view>
    	</view>
    </template>
    
    <script>
    	export default {
    		data() {
    			return {
    				iconLoginLock: this.$mAssetsPath.iconLoginLock,
    				windowHeight: 0,
    				oldPassword: '',
    				newPassword: '',
    				affirmPassword: ''
    			}
    		},
    		onLoad() {
    			uni.getSystemInfo({
    				success: res => {
    					this.windowHeight = res.windowHeight + res.windowTop;
    				}
    			})
    		},
    		methods: {
    			// 获取密码
    			getPassword(param, index) {
    				if(index == 1) {
    					this.oldPassword = param.detail.value;
    				} else if(index == 2) {
    					this.newPassword = param.detail.value;
    				} else if(index == 3) {
    					this.affirmPassword = param.detail.value;
    				}
    			}
    		}
    	}
    </script>
    
    <style lang="scss" scoped>
    	.content {
    		background-color: #FFFFFF;
    		
    		/* 输入框 ，不同的输入内容，同样的类名与样式*/
    		.login-wrap {
    			margin: 0 50rpx;
    		
    			.login-item {
    				width: 100%;
    				height: 100rpx;
    				line-height: 100rpx;
    				background-color: #f2f2f2;
    				border-radius: 100rpx;
    				margin-bottom: 40rpx;
    				position: relative;
    		
    				.login-icon {
    					width: 40rpx;
    					height: 40rpx;
    					margin: 30rpx 0 0 40rpx;
    				}
    			}
    		
    			.login-item input {
    				width: 100%;
    				height: 100%;
    				line-height: 100rpx;
    				font-size: 28rpx;
    				padding: 0 40rpx 0 100rpx;
    				box-sizing: border-box;
    				display: block;
    				border: none;
    				position: absolute;
    				top: 0;
    				left: 0;
    			}
    		
    			.login-item.reg-pwd input {
    				padding: 0 100rpx 0 100rpx;
    			}
    		
    			.login-item.reg-code input {
    				padding: 0 200rpx 0 100rpx;
    			}
    		
    		} 
    	}
    </style>

主要代码@input="getPassword($event, item)"

$event这个不要改， 不然拿到的是undefined，亲测

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNTQzMjY0_size_16_color_FFFFFF_t_70]: /images/20221005/58ff1dc36e3243be92ed50255a809966.png