Press Plus

# MobileLogin 移动端登录

可用来选择QQ、微信登录，包含扫码登录、提示弹窗。

# 引入

import PressMobileLogin from 'press-plus/press-login-mobile/press-login-mobile';

export default {
  components: {
    PressMobileLogin,
  }
}

# 代码演示

# 基础用法

<PressMobileLogin
  :loader="loaderUnity"
  :show-choose-dialog.sync="showChooseDialog"
  :show-scan-dialog.sync="showScanDialog"
  :show-tip-dialog.sync="showTipDialog"
  :current-url="currentUrl"
  :show-q-q="showQQ"
  :show-w-x="showWX"
  :scan-code-type="scanCodeType"
  @jumpToLoginWX="jumpToLoginWX"
  @jumpToLoginQQ="jumpToLoginQQ"
  @closeDialog="closeDialog"
/>

import { loaderUnity } from 't-comm/lib/loader/loader-unity';

export default {
  data() {
    let currentUrl = 'https://baidu.com';
    let showChooseDialog = false;
    // #ifdef H5
    currentUrl = document.location.href;
    showChooseDialog = true;
    // #endif

    return {
      loaderUnity,
      showChooseDialog,
      showScanDialog: false,
      showTipDialog: false,

      currentUrl,
      scanCodeType: 'WX',
      showQQ: true,
      showWX: true,
    };
  },
  methods: {
    jumpToLoginWX() {
      this.onTip('[jumpToLoginWX]');
      this.showChooseDialog = false;
      this.showScanDialog = true;
    },
    jumpToLoginQQ() {
      this.onTip('[jumpToLoginQQ]');
      this.showChooseDialog = false;
      this.showTipDialog = true;
    },
    closeDialog() {
      this.onTip('[closeDialog]');
    },
    showDialog() {
      this.showChooseDialog = true;
    },
    onTip(message) {
      // #ifndef H5
      this.onGTip(message);
      // #endif

      // #ifdef H5
      this.$toast({
        message,
        zIndex: 10000,
      });
      // #endif
    },
  },
};

# API

# Props

参数 说明 类型 默认值
show-q-q 是否显示 QQ boolean true
show-w-x 是否显示微信 boolean true
current-url 当前 URL，会据此生成二维码 string -
loader 动态加载方法 function null
show-choose-dialog 是否显示选择弹窗 boolean false
show-scan-dialog 是否显示扫描弹窗 boolean false
show-tip-dialog 是否显示提示弹窗 boolean false
destroyed-when-closed 是否在关闭后销毁 boolean false
scan-code-type 扫码类型，可选值位 WX, QQ string WX
tip-title 提示弹窗标题 string 微信中不支持QQ区账号登录
tip-image 提示弹窗图片 string https://image-1251917893.file.myqcloud.com/tipcomm/public_dialog-img/wx-zy.jpg
use-tip-class 是否使用 tip-comp 为前缀的类名 boolean false
watch-current-url 是否监听 currentUrl 变化并生成二维码 boolean true

# Events

事件名 说明 参数
jumpToLoginQQ 点击跳转QQ -
jumpToLoginWX 点击跳转微信 -
closeDialog 关闭弹窗 -

# 常见问题

# 规范

为减轻使用者负担，Press UI 中涉及到 QQ、WX 命名的 props 和 event，一律命名为 QQ、WX，不可以出现以下命名：

  • qq
  • Qq
  • Wx
  • wx

# canvas

canvas 图片在某些机型下无法长按保存，该组件采用的方式是，提取 canvas 的图片地址，放到 img 标签上显示。

const qrcode = window.document.getElementById('qrcodeid');
if (qrcode) {
  const canvas = qrcode.getElementsByTagName('canvas');
  if (canvas && canvas.length > 0 && canvas[0]) {
    this.qrcodeSrc = canvas[0].toDataURL('image/png');
    this.hideCanvas = true;
  }
}

← LoginPC →