vue组件 .vue
Vue电报登录 (Vue Telegram Login)
vue-telegram-login is a Vue component for Telegram Login.
vue-telegram-login是用于Telegram登录的Vue组件。
安装 (Installation)
Install with yarn:
用纱安装:
$ yarn add vue-telegram-login
Install with npm:
使用npm安装:
$ npm i vue-telegram-login --save
or if you just want to try it out, unpkg has ready-to-use packages.
或者,如果您只是想尝试一下, unpkg提供了现成的软件包。
<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/vue-telegram-login"></script>
用法 (Usage)
Import vue-telegram-login
, pass it to the components
and use in your template
导入vue-telegram-login
,将其传递给components
并在模板中使用
<template>
<!-- Callback mode -->
<vue-telegram-login
mode="callback"
telegram-login="YourTelegramBot"
@callback="yourCallbackFunction" />
<!-- Redirect mode -->
<vue-telegram-login
mode="redirect"
telegram-login="YourTelegramBot"
redirect-url="https://your-website.io" />
</template>
<script>
import {vueTelegramLogin} from 'vue-telegram-login'
export default {
name: 'your-component',
components: {vueTelegramLogin},
methods: {
yourCallbackFunction (user) {
// gets user as an input
// id, first_name, last_name, username,
// photo_url, auth_date and hash
console.log(user)
}
}
}
</script>
道具 (Props)
You can play around with options on the official widget page
您可以在官方窗口小部件页面上使用选项
Name | Description | Required | Default |
---|---|---|---|
mode | 'callback' or 'redirect' | True | null |
telegramLogin | Your telegram bot name | True | null |
@callback | Your callback function, it will be called after success if mode is 'callback' | False | true |
redirectUrl | Your redirect URL, user will be redirected if mode is 'redirect' | False | null |
requestAccess | 'write' if you want to get access to send messages from your bot | False | 'read' |
size | 'large', 'medium' or 'small' | False | 'large' |
userpic | Show user photo, true or false | False | true |
radius | Button corner radius (default depends on chosen size) | False | 20\14\10 |
名称 | 描述 | 需要 | 默认 |
---|---|---|---|
模式 | “回调”或“重定向” | 真正 | 空值 |
电报登录 | 您的电报漫游器名称 | 真正 | 空值 |
@打回来 | 您的回调函数,如果模式为“ callback”,则将在成功后调用 | 假 | 真正 |
redirectUrl | 您的重定向URL,如果模式为“重定向”,则将重定向用户 | 假 | 空值 |
申请进入 | 如果您想访问从机器人发送消息的权限,则“写” | 假 | '读' |
尺寸 | “大”,“中”或“小” | 假 | '大' |
用户图片 | 显示用户照片,正确或错误 | 假 | 真正 |
半径 | 按钮角半径(默认取决于所选大小) | 假 | 20 \ 14 \ 10 |
翻译自: https://vuejsexamples.com/vue-component-for-telegram-login/
vue组件 .vue