vue组件 .vue_用于电报登录的Vue组件

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