php - vuejs在点击它时隐藏模式
问题描述
嘿伙计们，我在vuejs组件中有一个看起来像这样的表单（我意识到这里有很多代码，但要担心的重要事情是阴影类）：
<script>Vue.component('profileinfo', {
template: `<div><div id="profileInfo">
<div class="sectionHeader">Profile</div>
<div class="dataPoint">First: {{firstNameBraintree}}</div>
<div class="dataPoint">Last: {{lastNameBraintree}}</div>
<div class="dataPoint">Company: {{companyBraintree}}</div>
<div class="dataPoint">Email: {{emailBraintree}}</div>
<div class="dataPoint">Phone: {{phoneBraintree}}</div>
<div class="buttonDiv">
<input class="button" type="button" value="Update" v-on:click="showUpdateProfileForm()">
</div>
</div>
<!--Show Update Profile Form-->
<div style="display:none;" v-cloak v-show="showupdateprofileinfoform==true" class="shade"></div>
<div style="display:none;" v-cloak class="updateProfileForm" v-show="showupdateprofileinfoform==true">
<h2>Update Account Information</h2>
<h2>Username: <?php echo $_SESSION['username'];?></h2>
<!--PASSWORD-->
<div class="inputDiv">
<p v-show="passwordLengthMet==true && passwordHasCap==true && passwordHasNum==true || password.length=='' && passwordHasCap==false && passwordHasNum==false">Password * <i class="fa fa-check-circle success"></i> Valid</p>
<p v-show="passwordLengthMet==false && password.length!='' || passwordLengthMet==true && passwordHasCap==false || passwordLengthMet==true && passwordHasNum==false">Password * <i class="fa fa-exclamation-circle tooltip error"><span class="tooltiptext">Password must be at least 8 characters, Have a capital letter and contain a number</span></i></p>
<input type="password" v-model="password" placeholder="********" v-on:focus="showpasswordrequirements">
<ul v-show="dispassr==true">
<li v-show="passwordLengthMet==false || password==''">Must contain at least 8 characters</li>
<li v-show="passwordHasCap==false">Must contain capital letter</li>
<li v-show="passwordHasNum==false">Must contain number</li>
</ul>
</div>
<!--END PASSWORD-->
<!--PASSWORDS MATCH-->
<div class="inputDiv">
<p v-show="passwordsMatch==true">Confirm Password* <i class="fa fa-check-circle success"></i> Passwords Match</p>
<p v-show="passwordsMatch==false">Confirm Password* <i class="fa fa-exclamation-circle tooltip error"><span class="tooltiptext">Please make sure passwords match</span></i></p>
<input type="password" v-model="confirmPassword" placeholder="********" v-on:focus="showconfirmpasswordrequirements">
<ul v-show="disconfr==true">
<li class="blue" v-show="passwordsMatch==false || confirmPassword==''">Please be sure your passwords match</li>
</ul>
</div>
<!--END PASSWORDS MATCH-->
<!--FIRSTNAME-->
<div class="inputDiv">
<p v-show="validFirstname==true">First name* <i class="fa fa-check-circle success"></i> Valid</p>
<p v-show="validFirstname==false && sub==1">First Name* <i class="fa fa-exclamation-circle tooltip error"><span class="tooltiptext">Please enter your firstname</span></i></p>
<p v-show='validFirstname==false && sub!="1"'>First Name* <i class="fa fa-question-circle tooltip" style="color:darkblue;"><span class="tooltiptext blue" style="background-color:darkblue;">Please enter a firstname</span></i></p>
<input v-model="firstName" placeholder="Firstname" v-on:focus="showfirstnamerequirements">
<ul v-show='disfnamer==true'>
<li v-show="validFirstname==false">Please enter a firstname</li>
</ul>
</div>
<!--END FISTNAME-->
<!--LASTNAME-->
<div class="inputDiv">
<p v-show="validLastname==true">Last Name* <i class="fa fa-check-circle success"></i> Valid</p>
<p v-show="validLastname==false && sub==1">Last Name* <i class="fa fa-exclamation-circle tooltip error"><span class="tooltiptext">Please enter your lastname</span></i></p>
<p v-show='validLastname==false && sub!="1"'>Last Name* <i class="fa fa-question-circle tooltip" style="color:darkblue;"><span class="tooltiptext blue" style="background-color:darkblue;">Please enter a lastname</span></i></p>
<input v-model="lastName" placeholder="Last name" v-on:focus="showlastnamerequirements">
<ul v-show='dislnamer==true'>
<li v-show="validLastname==false">Please enter a lastname</li>
</ul>
</div>
<!--END LASTNAME-->
<!--EMAIL-->
<div class="inputDiv">
<p v-show="validEmail==true">Email* <i class="fa fa-check-circle success"></i> Valid</p>
<p v-show="validEmail==false && email!=='' || email=='' && sub==1">Email* <i class="fa fa-exclamation-circle tooltip error"><span class="tooltiptext">Please enter a valid email</span></i></p>
<p v-show="email=='' && sub==0">Email* <i class="fa fa-question-circle tooltip" style="color:darkblue;"><span class="tooltiptext blue" style="background-color:darkblue;">Please enter a valid email</span></i></p>
<input v-model="email" placeholder="jchang@example.com" v-on:focus="showemailrequirements">
<ul v-show='disemailr==true'>
<li v-show="validEmail==false">Please enter a valid email</li>
</ul>
</div>
<!--END EMAIL-->
<!--PHONE -->
<div class="inputDiv">
<p v-show="phoneLength==true && phoneHasNum==true && phoneNumber!=''">Phone* <i class="fa fa-check-circle success"></i> Valid</p>
<p v-show="phoneLength==false && phoneNumber!='' || phoneHasNum==false && phoneNumber!='' || phoneNumber=='' && sub==1">Phone* <i class="fa fa-exclamation-circle tooltip error"><span class="tooltiptext">Phone Number must have at least 10 numbers and have no letters, parenthis or dashes</span></i></p>
<p v-show="phoneNumber=='' && sub==0">Phone* <i class="fa fa-question-circle tooltip" style="color:darkblue;"><span class="tooltiptext blue" style="background-color:darkblue;">Phone Number must have at least 10 numbers and have no letters it cannot contain parenthis or dashes</span></i></p>
<input v-model="phoneNumber" placeholder="Phone Number 1234567890" v-on:focus="showphonenumberrequirements" id="phoneNumber">
<ul v-show="disphoner==true">
<li v-show="phoneLength==false">Phone number must be 10 numbers long</li>
<li v-show="phoneHasNum==false || phoneNumber==''"> Phone number must contain only numbers</li>
</ul>
</div>
<!--END PHONE-->
<!--COMPANY NAME-->
<div class="inputDiv">
<p v-show="validCompanyName==true">Company Name* <i class="fa fa-check-circle success"></i> Valid</p>
<p v-show="validCompanyName==false && companyName!='' || companyName==false && companyName=='' && sub==1">Company Name* <i class="fa fa-exclamation-circle tooltip error"><span class="tooltiptext">Please enter your company name</span></i></p>
<p v-show="companyName=='' && sub==0">Company Name* <i class="fa fa-question-circle tooltip" style="color:darkblue;"><span class="tooltiptext blue" style="background-color:darkblue;">Please enter your company name</span></i></p>
<input v-model="companyName" placeholder="Company Name" v-on:focus="showcompanynamerequirements">
<ul v-show="discompr==true">
<li v-show="validCompanyName==false">Please enter your company name</li>
</ul>
</div>
<!--END COMPANY NAME-->
<div class="inputDiv">
<div class="sliderWrapper">
<div><strong>Subscribe to Email List</strong></div>
<label class="switch">
<input type="checkbox" v-model="subscribe" value="1">
<span class="slider"></span>
</label>
</div>
</div>
<div class="inputButton">
<input v-on:click="updateAccount()" type="button" class="saveProfileButton" value="Update">
</div>
<div class="inputButton">
<input v-on:click="hideUpdateProfileForm()" type="button" class="cancelProfileButton" value="Cancel">
</div>
</div>
<!--End Update Profile Form--></div>`,
data() {
return {
showSpinner: false,
showupdateprofileinfoform: false,
password: '',
confirmPassword: '',
firstName: '',
lastName: '',
email: '',
sub: '',
subscribe:'',
dispassr: '',
disconfr: '',
disfnamer: '',
dislnamer: '',
disemailr: '',
disphoner: '',
discompr: '',
phoneNumber: '',
companyName: '',
customerId: '<?php echo $customer->id; ?>',
companyBraintree:'<?php echo $customer->company; ?>',
firstNameBraintree:'<?php echo $customer->firstName; ?>',
lastNameBraintree:'<?php echo $customer->lastName; ?>',
phoneBraintree:'<?php echo $customer->phone; ?>',
emailBraintree:'<?php echo $customer->email; ?>',
phone:'',
updated: ''
}
},
computed: {
passwordsMatch: function() {
this.confirmPassword=this.confirmPassword.replace(/\s/g, '');
if(this.password == this.confirmPassword) {
return true;
} else {
return false;
}
},
passwordLengthMet: function() {
this.password=this.password.replace(/\s/g, '');
if(this.password.trim().length >0 && this.password.trim().length >= 8) {
return true;
} else {
return false;
}
},
passwordHasCap: function(){
if(/[A-Z]/.test(this.password)){return true;} else{return false;}
},
passwordHasNum: function(){
if(/[\d]/.test(this.password)){return true;} else{return false;}
},
validEmail: function() {
this.email=this.email.replace(/\s/g, '');
var reg = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
if (!reg.test(this.email)) {
return false;
}
return true;
},
validLastname: function() {
this.lastName=this.lastName.replace(/\s/g, '');
if(this.lastName.trim().length<1){return false;} else {return true;}
},
validFirstname: function() {
this.firstName=this.firstName.replace(/\s/g, '');
if(this.firstName.trim().length<1){return false;} else{return true;}
},
validCompanyName: function(){
if(this.companyName.trim().length<1){return false;} else{return true;}
},
phoneHasNum: function(){
if(isNaN(this.phoneNumber)){return false;} else {return true;}
},
phoneLength: function(){
this.phoneNumber=this.phoneNumber.replace(/[^0-9]+/g, '');
if(this.phoneNumber.trim().length==10){return true;} else{return false;}
}
},
created: function() {
this.subscribe=1;
this.firstName='<?php if(isset($_SESSION['firstname'])){echo $_SESSION['firstname'];}?>';
this.lastName='<?php if(isset($_SESSION['lastname'])){echo $_SESSION['lastname'];}?>';
this.email='<?php if(isset($_SESSION['email'])){echo $_SESSION['email'];}?>';
this.companyName='<?php if(isset($_SESSION['companyname'])){echo $_SESSION['companyname'];}?>';
this.phoneNumber='<?php if(isset($_SESSION['phonenumber'])){echo $_SESSION['phonenumber'];}?>';
},
methods: {
showUpdateProfileForm: function(){
this.showupdateprofileinfoform=true;
},
hideUpdateProfileForm: function(){
this.showupdateprofileinfoform=false;
},
updateAccount: function() {
this.sub=1;
if(this.validFirstname && this.validLastname && this.validEmail && this.passwordsMatch && this.validCompanyName && this.phoneHasNum && this.firstName!='' && this.lastName!='' && this.email!='' && this.phoneNumber!='' && this.companyName!='' && this.passwordLengthMet && this.passwordHasNum && this.passwordHasCap && this.password!='' && this.confirmPassword!='' || this.validFirstname && this.validLastname && this.validEmail && this.passwordsMatch && this.validCompanyName && this.phoneHasNum && this.firstName!='' && this.lastName!='' && this.email!='' && this.phoneNumber!='' && this.companyName!='' && this.password=='' && this.confirmPassword=='') {
var jsonString = JSON.stringify({
firstName: this.firstName,
lastName: this.lastName,
password: this.password,
email: this.email,
phoneNumber: this.phoneNumber,
companyName: this.companyName,
subscribe: this.subscribe
});
$.ajax({
url: 'updateAccountInfoBackend.php',
dataType: 'json',
type: 'post',
contentType: 'application/json',
dataType: 'json',
data: jsonString,
error: function(data){
alert('error');
// window.location.href='successfullycreated.php';
},
success: function(data){
console.log(data);
alert('success');
if(data.updated==1){location.reload();}
if(data.updated==0){location.reload();}
}.bind(this)
});
}
},
showpasswordrequirements: function(){
this.sub=0;
this.dispassr=true;
this.disconfr=false;
this.disfnamer=false;
this.dislnamer=false;
this.disemailr=false;
this.disphoner=false;
this.discompr=false;
},
showconfirmpasswordrequirements: function(){
this.sub=0;
this.dispassr=false;
this.disconfr=true;
this.disfnamer=false;
this.dislnamer=false;
this.disemailr=false;
this.disphoner=false;
this.discompr=false;
},
showfirstnamerequirements: function(){
this.sub=0;
this.dispassr=false;
this.disconfr=false;
this.disfnamer=true;
this.dislnamer=false;
this.disemailr=false;
this.disphoner=false;
this.discompr=false;
},
showlastnamerequirements: function(){
this.sub=0;
this.dispassr=false;
this.disconfr=false;
this.disfnamer=false;
this.dislnamer=true;
this.disemailr=false;
this.disphoner=false;
this.discompr=false;
},
showemailrequirements: function(){
this.sub=0;
this.dispassr=false;
this.disconfr=false;
this.disfnamer=false;
this.dislnamer=false;
this.disemailr=true;
this.disphoner=false;
this.discompr=false;
},
showphonenumberrequirements: function(){
this.sub=0;
this.disphoner=true;
this.dispassr=false;
this.disconfr=false;
this.disfnamer=false;
this.dislnamer=false;
this.disemailr=false;
this.discompr=false;
},
showcompanynamerequirements: function(){
this.sub=0;
this.disphoner=false;
this.dispassr=false;
this.disconfr=false;
this.disfnamer=false;
this.dislnamer=false;
this.disemailr=false;
this.discompr=true;
}
}
});
此组件包含在以下 vueapp 中：
<?php session_start(); ob_start();
if(!isset($_SESSION['username'])){header('Location:logout.php');}
require_once 'lib/Braintree.php';
require_once('head.php');
require_once('header.php');
$gateway = new Braintree_Gateway([
'environment' => 'sandbox',
'merchantId' => 'key',
'publicKey' => 'key',
'privateKey' => 'key'
]);
$customer = $gateway->customer()->find($id);
$plans = $gateway->plan()->all();
$plansArray = array();
foreach ($plans as $plan) {
array_push($plansArray, $plan);
}
$subscriptions = array();
foreach ($customer->creditCards as $card) {
foreach ($card->subscriptions as $subscription) {
array_push($subscriptions, $subscription);
}
}
?>
<script src="vue.js"></script>
<script src="jquery-3.3.1.js"></script>
<?php include('components.php');?>
</head>
<body>
<div id="app">
<div id="profileContainer">
<profileinfo></profileinfo>
</div>
</div>
<script>
var app=new Vue({
el:'#app',
data:{
},
});
</script>
<?php include('foot.php');?>
</body>
</html>
我让组件以模式弹出，并且背景是阴影的。
但是，当他们单击模式时，我希望它运行一个使其消失的功能。最后是阴影类的 css 和updateProfileForm：
.updateProfileForm{
box-shadow: 1px 5px 20px -2px rgba(0,0,0,0.2);
width: 500px;
height: auto;
position: fixed;
background-color: white;
top: 90px;
left: 50%;
margin-left: -265px;
z-index: 100;
padding: 30px 0 0 30px;
}
.shade {
position: fixed;
background-color: black;
top: 0;
left: 0;
height: 100%;
width: 100%;
opacity: 0.5;
z-index: 99;
}
解决方案
有很多代码需要查看，如果您可以发布仅限于相关部分的内容，或者将工作代码嵌入或链接到 jsfiddle，它可能会提供更好的答案。
无论如何，您可以做的是拥有模态的“阴影”部分，这样您就可以从同一个组件管理状态和功能。也使用单独的可重用模态组件可能会有所帮助（但不需要）
这是官方 vue 示例页面 https://vuejs.org/v2/examples/modal.html上内容的略微修改版本
我已经更改了第 5 行<div class="modal-wrapper" @click="$emit('close')">
和第 6 行<div class="modal-container" @click.stop="">
需要line@click.stop=""来防止模态内容的传播，正如@nuts 指出的那样，这是一个问题。
https://jsfiddle.net/zkmd64b3/
此示例使用插槽进行扩展，但您可以在没有它的情况下执行相同操作，方法是在关闭操作时调用与单击模态包装器时相同的函数
推荐阅读
- python - Python - 在开始、中间和结束时从链表中删除节点
- app-store - App Store Rejection With Reason：您的应用要求用户注册个人信息以购买非基于账户的应用内购买产品
- javascript - 如何使用 NodeJS 从网站获取 HTML？
- c++ - 为什么数组的第 n 个元素“是”0，C++？
- javascript - 通过 Javascript 中的循环操作颜色
- python - Kivy：将 kwarg 传递给 Kv 中定义的子小部件（初始化时）
- laravel - 来自api的vue apexchart动态数据集面临问题
- django - 带有 Axios 的 Django CSRF 令牌
- weblogic - Weblogic：集群中的节点关闭，没有发送 JMS 消息
- github - github：“下载或克隆”按钮在哪里？