# 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 | - | - |