更新绘画功能

src/component/LoginPage/googleLogin.vue

@@ -0,0 +1,61 @@
+<template>
+    <div class="Container">
+        <!-- 谷歌登录 -->
+        <div class="g_id_signin" id="g_id_signin"></div>
+    </div>
+</template>
+<script>
+	import { defineComponent, ref, reactive, watch, onMounted, nextTick, toRefs } from "vue";
+
+    export default defineComponent({
+        name: "login",
+		setup() {
+			const  handleCredentialResponse = async (response) => {
+                // 获取回调响应的凭证数据 然后拿这个凭证给后台，后台jwt进行解析获取登录信息
+				console.log(response);
+                let code = response.credential
+				console.log(code);
+                // await api.googleLogin(code);
+            }
+			onMounted(()=>{
+				let  GOOGLE_CLIENT_ID = '194770296147-njd68pm7tnapgonkj2h48mhf63n15n3f.apps.googleusercontent.com'
+				// let  GOOGLE_CLIENT_ID = '399537927614-3sd3rs9p79doocsrff7gm5m1f3chvmn2.apps.googleusercontent.com'
+				
+				// 使用谷歌登录的api
+				const script = document.createElement("script");
+				script.src = "https://accounts.google.com/gsi/client"
+				document.body.appendChild(script);
+
+				window.addEventListener('load', () => {
+					window.google.accounts.id.initialize({
+					// 主要就是填写client_id
+						client_id: GOOGLE_CLIENT_ID,
+						auto_select: false,
+						callback: handleCredentialResponse,
+						context:"signin",
+						ux_mode:"popup",
+						itp_support:true,
+					});
+					window.google.accounts.id.renderButton(
+						document.getElementById("g_id_signin"),
+						{
+							type:"standard",
+							shape:"pill",
+							theme:"outline",
+							text:"signin_with",
+							size:"medium",
+							logo_alignment:"left",
+						}
+					);
+				})
+			})
+			return {
+            }
+		},
+    })
+</script>
+<style scoped>
+.Container{
+	width: 45%;
+}
+</style>