VUE实现密码验证与提示功能

<template>
 <div style="position: absolute; top: 40%; left:40%">
 <el-row style="width: 300px;">
 <el-col :span="24">
 <el-input v-model="password" @focus.capture.native='changePasswordTip(true)' @blur.capture.native='changePasswordTip(false)' auto-complete="new-password" type="password" placeholder='请输入密码' ></el-input>
 <div style="position: absolute">
  <verify-pass-word-tip :password="password" :isShowTip = 'isShowTip'></verify-pass-word-tip>
 </div>
 </el-col>
 </el-row>
 </div>
</template>
<script>
 import verifyPassWordTip from './verifyPassWordTip'
 export default {
 name: "VerifyPassWord",
 components: {
 verifyPassWordTip
 },
 data() {
 return {
 password: '',
 isShowTip: false
 }
 },
 methods: {
 /**
 * 改变密码提示是否显示
 **/
 changePasswordTip(isShow) {
 if (isShow) {
  this.isShowTip = true;
 } else {
  this.isShowTip = false;
 }
 },
 }
 }
</script>