uniapp,@input @change @blur 等事件,需要传额外参数的方法
这里以input为例,先看效果
·
这里以input为例,先看效果
目的:我这里的目的是为了减少代码,提高页面加载速度,主要还是自己比较懒~
下面直接上全部代码了
<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,亲测
如果对你有用,关注一下博主的小程序,登录一下给予支持,以后有什么开源好用的源码都会上传到小程序
更多推荐
已为社区贡献21条内容
所有评论(0)