https://codepen.io/adamchenwei/pen/agbPYJ
在隐身模式下访问示例，单击“打开”按钮以打开示例登录表单，然后单击“注册”按钮以触发挑战。
我不确定在对话框中使用Recaptcha是否是一个不可修复的问题，还是使用CSS和HTML的某种形式的可修复性？尝试在对话框上使用z-index，这根本不起作用。
的HTML
<div id="app">
<div class="container my-4">
<div class="row justify-content-center">
<div class="col-md-8">
<h2 class="text-center mb-4">
Sign Up Form with Google reCAPTCHA
</h2>
<dialog ref="mydialog">
<form
method="post">
<div class="form-group">
<input
type="email"
name="email"
class="form-control"
placeholder="Enter your e-mail address"
required />
</div>
<div class="form-group">
<input
type="password"
name="password"
class="form-control"
placeholder="Enter your password"
required />
</div>
<div class="form-group">
<vue-recaptcha
ref="recaptcha"
size="invisible"
:sitekey="sitekey"
@verify="register"
@expired="onCaptchaExpired"
/>
<button
type="submit"
class="btn btn-primary btn-block"
@click="validate">
Sign Up
</button>
</div>
</form>
</dialog>
<button @click="openDialog">open</button>
</div>
</div>
</div>
</div>
JS
new Vue({
el: '#app',
components: { VueRecaptcha },
data () {
return {
email: null,
password: null,
recaptchaToken: null,
sitekey: '6Lfe33gUAAAAAMCuDwRfhSUV4sGkqGDaGrKqjkmZ'
}
},
methods: {
openDialog() {
this.$refs.mydialog.showModal();
},
register () {
// make post request to the server
},
validate () {
// if validate true exec recaptcha
this.$refs.recaptcha.execute()
},
onCaptchaExpired () {
this.$refs.recaptcha.reset()
}
}
});
最佳答案
所以这件事：
如果使用<dialog></dialog>，则默认情况下它是隐藏的。
使用<dialog open></dialog>在启动时显示对话框，
或通过一些js打开对话框：
// Update button opens a modal dialog
updateButton.addEventListener('click', function() {
dialog.showModal();
});
然而。对dialog元素的支持不是很广泛，所以我会
真的建议您不要使用它。
https://caniuse.com/#feat=dialog
你应该为此而改变
<dialog class="my-dialog"></dialog>至
<div class="my-dialog"></div>然后，您应该在所有浏览器中看到它，这是支持的方法。