我用vue-3开发一个前端应用程序,需要实现用google登录。 我设法让整个流程正常工作,但有一件事真正让我烦恼,即页面加载后按钮会闪烁一次:
这是我的简化代码:
<template>
<div>
<div style="height: 44px; width: 250px">
<div id="g_id_onload"
:data-client_id="googleClientId"
data-callback="handleGoogleCredentialResponse"
data-auto_prompt="false"></div>
<div class="g_id_signin" data-type="standard"></div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
googleClientId: import.meta.env.VITE_API_GOOGLE_CLIENT_ID,
};
},
mounted() {
this.loadGoogleSdk();
},
methods: {
// Load the Google SDK and render the button
loadGoogleSdk() {
const script = document.createElement('script');
script.src = 'https://accounts.google.com/gsi/client';
script.onload = () => {
google.accounts.id.initialize({
client_id: this.googleClientId,
callback: this.handleGoogleCredentialResponse,
});
google.accounts.id.renderButton(
document.querySelector('.g_id_signin'),
{theme: 'outline', size: 'large', shape: 'pill'}
);
};
document.head.appendChild(script);
},
},
};
</script>
知道如何解决这个问题吗?
您同时使用 HTML 和 JavaScript 使用 Google SDK 登录。您只需要使用其中一个即可。我猜这就是您看到闪烁问题的原因。