# ButtonLogin 按钮

登录按钮组件

# 基础用法

<template>
  <qinui-button-login :h5Auth="onClick" :minAfterAuth="onAfterAuth">
    <qinui-button type="primary">登录</qinui-button>
  </qinui-button-login>
</template>

<script lang="ts" setup>
  import { onBeforeMount, ref, shallowRef } from 'vue';

  const onClick = () => {
    console.log('h5 点击');
  };

  const theIsLogin = shallowRef(false);
  const onAfterAuth = (theItem: any) => {
    console.log(theItem, '授权成功');
    theIsLogin.value = true;
  };

  onBeforeMount(() => {
    // #ifndef H5
    qin.login({
      success(resCode) {
        console.log(resCode, 'resCode');
      },
    });
    // #endif
  });
</script>

# 单元格演示

<template>
  <qinui-button-login
    :logined="theIsLogin"
    :h5Auth="onClick"
    :minAfterAuth="onAfterAuth"
  >
    <qinui-cell
      title="单元格1"
      value="组件"
      name="Badge"
      :logined="theIsLogin"
      :beforeClick="onBeforeLink"
      :minAfterAuth="onTabBarAfterAuth"
    />
  </qinui-button-login>
</template>

<script lang="ts" setup>
  import { onBeforeMount, ref, shallowRef } from 'vue';

  const onClick = () => {
    console.log('h5 点击');
  };

  const theIsLogin = shallowRef(false);
  const onAfterAuth = (theItem: any) => {
    console.log(theItem, '授权成功');
    theIsLogin.value = true;
  };

  const onBeforeLink = () => {
    return new Promise((resolve) => {
      resolve(theIsLogin.value);
    });
  };

  const onTabBarAfterAuth = () => {
    return new Promise((resolve) => {
      theIsLogin.value = true;
      resolve(true);
    });
  };

  onBeforeMount(() => {
    // #ifndef H5
    qin.login({
      success(resCode) {
        console.log(resCode, 'resCode');
      },
    });
    // #endif
  });
</script>

# 空状态演示

<template>
  <qinui-empty
    content="登录账号后查看订单"
    :logined="theIsLogin"
    buttonText="登录"
    useLogin
    @emptyButtonClick="onEmptyButtonClick"
    :minAfterAuth="onAfterAuth"
    :h5Auth="onClick"
  />
</template>

<script lang="ts" setup>
  import { onBeforeMount, ref, shallowRef } from 'vue';

  const onClick = () => {
    console.log('h5 点击');
  };

  const theIsLogin = shallowRef(false);
  const onAfterAuth = (theItem: any) => {
    console.log(theItem, '授权成功');
    theIsLogin.value = true;
  };

  const onEmptyButtonClick = () => {
    qin.showToast({
      title: '空状态点击登录',
    });
  };

  onBeforeMount(() => {
    // #ifndef H5
    qin.login({
      success(resCode) {
        console.log(resCode, 'resCode');
      },
    });
    // #endif
  });
</script>

# API


# Props

参数 说明 类型 默认值 可选值
logined 是否登录 Boolean false true | false
h5Auth H5 点击回调 Function - -
minAfterAuth 小程序 点击回调 Function - -
diy-style 自定义外部样式 string - -