fashion-ssr-vue3/components/common/googleLogin/index.vue

<script setup>
const emit = defineEmits(['success', 'error'])
const { loading, onGoogleLogin } = useGoogleLogin()

async function googleLogin() {
  try {
    const result = await onGoogleLogin()
    console.log('登陆成功后------222')
    emit('success', result)
  }
  catch (error) {
    emit('error', error)
  }
}
</script>

<template>
  <button id="google-login-button" class="b-rd-200px w-100% bg-#fff text-#333 b-1px b-solid b-#D8D8D8 h-48px lh-48px hover:b-#9B6CFF disabled:hover:b-#D8D8D8 cursor-pointer mb-24px text-14px fw-500" :disabled="loading" @click="googleLogin">
    <span v-if="loading">登录中...</span>
    <div v-else class="flex justify-center items-center">
      <img src="@/assets/images/google_logo.png" alt="" class="w-24px h-24px mr-10px">
      Continue with Google
    </div>
  </button>
</template>

<style scoped>
</style>