我在登录页面引用同一个组件LoginInput分别实现输入账号和密码的功能,当我点击登录按钮时,怎么分别从input里面获取输入的用户和密码
login.vue
<template>
<div class='login-root' ref='loginRoot'>
<div class='login-info-root'>
<div> <img :src="imgList['nameUrl']">
</div> <div class='username-password-container'>
<div class='border-container'>
<img :src="imgList['borderUrl']">
</div> <div class='input-container'>
<!-- 账号外层 -->
<LoginInput
:marginTop='useInput["marginTop"]'
:description='useInput["description"]'
/>
<!-- 密码外层 -->
<LoginInput
:marginTop='passwordInput["marginTop"]'
:description='passwordInput["description"]'
:type='passwordInput["type"]'
/>
<!-- 登录按钮 -->
<div class='btn-login-container' @click='loginUser()'>
<div class='btn-login'>登录</div>
</div> </div> </div> </div> </div></template>
<script>
import LoginInput from './components/LoginInput/LoginInput'
export default {
name: 'login',
components: {
LoginInput
},
data () {
return {
imgList: {
nameUrl: require('./assets/images/name.png'),
borderUrl: require('./assets/images/border.png'),
usernameUrl: require('./assets/images/username.png'),
passwordUrl: require('./assets/images/password.png'),
inputBorderUrl: require('./assets/images/input_border.png')
},
useInput: {
marginTop: 'mt58',
description: '账号'
},
passwordInput: {
type: 'password',
marginTop: 'mt23',
description: '密码'
}
}
},
created () {
let _this = this
let widthStandard = 1920
let heightStandard = 1080
window.onresize = window.onload = function () {
let widthPage, heightPage
if (!(window.attachEvent && !window.opera)) {
// console.log('clientWidth')
// widthPage = document.documentElement.clientWidth widthPage = document.documentElement.offsetWidth
heightPage = widthPage * (heightStandard / widthStandard)
} else {
// console.log('innerWidth')
widthPage = window.innerWidth
}
_this.$refs.loginRoot.style.height = `${heightPage}px`
_this.$refs.loginRoot.style.backgroundSize = `${widthPage}px ${heightPage}px`
// console.log('widthPage == ', widthPage)
// console.log('heightPage == ', heightPage) }
},
methods: {
loginUser () {
let _this = this
console.log('登录用户按钮')
console.log(_this.$refs.input)
}
}
}
</script>
<style scoped>
@import './assets/styles/login.css';
</style>
LoginInput.vue
<template>
<div class='username-container'
:class='marginTop'
>
<div class='username-bg-container'>
<img :src="imgList['inputBorderUrl']">
</div> <div class='username-input-container'>
<div class='username-image-container'>
<img ref='inputIcon' class='username-image' :src="iconUrl"/>
</div> <div class='username-select-container'>
<!-- <div class='username-select-description'>{{description}}</div> -->
<div class='username-select-input-container'>
<input class='username-select-input'
ref='input'
:placeholder='description'
@focus='focusInput($event)'
@blur='blurInput($event)'
/>
</div> </div> </div> </div></template>
<script>
import * as Helper from '../../../../utils/helper'
export default {
name: 'LoginInput',
props: {
type: {
type: String,
default: 'default'
},
marginTop: {
type: String,
default: 'default'
},
description: {
type: String,
default: 'default'
}
},
data () {
return {
imgList: {
usernameUrl: require('./assets/images/username.png'),
passwordUrl: require('./assets/images/password.png'),
inputBorderUrl: require('./assets/images/input_border.png')
},
descriptionLocal: '',
typeLocal: '',
iconUrl: ''
}
},
watch: {
descriptionLocal: function (newVal, oldVal) {
// console.log('descriptionLocal newVal == ', newVal)
},
typeLocal: function (newVal, oldVal) {
let _this = this
// console.log('typeLocal newVal == ', newVal)
if (newVal === 'password') {
_this.$refs.input.type = 'password'
_this.$data.iconUrl = _this.$data.imgList['passwordUrl']
} else {
_this.$data.iconUrl = _this.$data.imgList['usernameUrl']
}
}
},
created () {
let _this = this
_this.$data.descriptionLocal = _this.description
_this.$data.typeLocal = _this.type
},
methods: {
focusInput ($event) {
// console.log('focus事件被执行了')
let valueInput = Helper.trimValue($event.target.value)
// console.log('valueInput == ' + valueInput)
if (valueInput === '') {
$event.target.placeholder = ''
}
},
blurInput ($event) {
let _this = this
let valueInput = Helper.trimValue($event.target.value)
// console.log('valueInput == ' + valueInput)
if (valueInput === '') {
$event.target.placeholder = _this.$data.descriptionLocal
}
}
}
}
</script>
<style scoped>
@import './assets/styles/login_input.css';
</style>
与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…