更新记录

1.0.0(2024-07-18) 下载此版本

更新日志

更新 1.0.0版本
初始版本

平台兼容性

Vue2 Vue3
×
App 快应用 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
HBuilderX 3.7.3 × × × × ×
钉钉小程序 快手小程序 飞书小程序 京东小程序
× × × ×
H5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox PC-Safari
× × × × × × × × ×

phone-login

描述

将手机号快捷登录弹窗、用户隐私协议进行统一封装。
1、通过show属性控制显隐
2、组件支持高度自定义,弹窗高度、背景颜色、圆角支持自定义
3、登录按钮支持样式自定义
4、隐私协议和用户服务协议提示语支持自定义
5、组件依赖官方uni-popup  uni-popup属性均对外放开

更新日志

更新 1.0.0版本
初始版本

安装

请在uniapp插件市场安装

注意:此组件依赖官方uni-popup弹窗 请先安装uni-popup

引入

本组件符合easycom组件规范,直接在页面中使用

兼容性

端:只微信小程序
vue2 vue3 支持

USE

<template>
    <view class="phoneLogin-box">
        <view class="text">
            手机快捷登录弹窗示例
        </view>
        <view class="btn" @click="openLogin">
            打开弹窗
        </view>
        <phone-login
            :show="show"
            privacyUrl="/pages/login/privacy"
            userAgreementUrl="/pages/login/userAgreement"
            @maskClick="maskClick"
            @loginSuccessFun="loginSuccessFun">
        </phone-login>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                show: false
            }
        },
        methods: {
            openLogin() {
                this.show = true;
            },
            maskClick() {
                this.show = false;
            },
            loginSuccessFun(code) {
                this.show = false;
                uni.showToast({
                    icon: 'none',
                    duration: 10000,
                    title:'获取手机code==>' + code
                });
            }
        }
    }
</script>

Props

属性

说明:

  • @property {Boolean} show 登录弹窗是否展示
  • @property {Boolean} safeArea 是否启用底部安全区域
  • @property {String} openType 登录弹窗弹出位置 默认bottom 可选位置 同uni-popup官方
  • @property {String} title 弹窗标题
  • @property {String} btnTip 登录按钮提示
  • @property {String} btnCustomStyle 登录按钮自定义样式
  • @property {String} backColor 弹窗背景颜色
  • @property {String} height 弹窗高度
  • @property {String} borderRadius 弹窗圆角
  • @property {String} showPrivacy 是否展示隐私协议 为true时privacyUrl、userAgreementUrl必传
  • @property {String} agreeTip 隐私协议提示语
  • @property {String} privacyName 隐私协议名称
  • @property {String} privacyUrl 隐私协议跳转页面url
  • @property {String} userAgreementName 用户服务协议名称
  • @property {String} userAgreementUrl 用户服务协议url
  • @event {Function} loginSuccessFun 获取手机号code成功的回调,e=code
  • @event {Function} maskClick 点击遮罩触发

Author

liuhaixu

V1.0.0

updata log,

V1.0.0
手机号快捷登录弹窗

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

插件不采集任何数据

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

暂无用户评论。

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问