front-components-snk

A simple Vue components for page login and footer.

Building manually

After checking out the repo, install dependencies:

npm install @oasis-games/front-components-snk

Then build a minified, distributable JS file:

npm run build

Example Usage In Vue Project

Vue Global registration:

import Fcdg from @oasis-games/front-components-snk
Vue.use(Fcdg)

<template>
   <fcdg-login-reg
            :options="loginRegConfig"
            :dialog-visible="dialogVisible"
            @close="close"
            @loginCallBack="loginCallBack"
   ></fcdg-login-reg>
     <fcdg-footer :options="footerConfig">
        <template #img1> //slot
          <img class="ip-logo" src="../assets/mo/game/iPocket.png" alt="" />
        </template>
        <template #img2>//slot
          <img class="snk-logo" src="../assets/mo/game/snk.png" alt="" />
        </template>
        <template #link1>//slot link1-link4
          <a href="......."></a>
        </template>
      </fcdg-footer>
</template>

<script>
export default {
   name: "app",
   data() {
        return {
            footerConfig: {
                lang: "tw",
                defaultIcon: true,
                link: true
            },

            loginRegConfig: {
                lang: "en",
                appId: "1756171161203882",
                client: "mtest5xen",
                isDebug: true,
                cookieUser: "damo_user",
                cookieRefresh: true,
                domain: ".damo.games",
                googleClientId: "",
                loginQr: false,
                showChangeType: false,
                styleConfig: {
                    showTopLine: false,
                    showBottomLine: false,
                    mainColor: "red",
                    logboxStyle: {
                        // backgroundImage: "url(" + img + ")",
                        borderRadius: 0
                    }
                },
                insConfig: {
                    insId: "2766481293653457",
                    insRequestOrigin: "http://localhost:8080"
                }
            },
            dialogVisible: false
        };
    },
   methods: {
        close(dialogVisible) {
            this.dialogVisible = dialogVisible;
        },
        loginCallBack(e) {
            console.log(e);
            this.dialogVisible = false;
        }
    }
};
</script>

footer Attributes

| 属性 | 类型 | 说明 | 默认值 | | :---------- | :------ | :------------------------ | :----- | | lang | string | 语言包 | en | | defaultIcon | boolean | 是否展示标底 icon，可替换 | true | | link | boolean | 是否展示标底链接，可替换 | true |

Login Attributes

| 属性 | 类型 | 说明 | 默认值 | | :------------- | :------ | :----------------------------------------------------------- | :----------------- | | lang | string | 语言包 | en | | appId | string | faceBook 登录方式所需 应用的 id | | | client | string | 接入的游戏 | | | isDebug | boolean | 测试/线上环境 | false | | cookieUser | string | 自定义登录用户 cookie 名 | | | cookieRefresh | boolean | 是否启用 cookie 过期刷新机制、该参数依赖 cookieUser 是否设置 | false | | domain | string | cookie 根域 | | | dialogVisible | boolean | 登录框显隐 | | | loginQr | boolean | 是否启用扫码登录 | false | | googleClientId | string | google 登录方式所需 client 的 id | 预配置的 client id | | styleConfig | object | 登录框自定义样式 ｜ - ｜ |

Login Events

| 事件名 | 说明 | 参数 | | :------------ | :----------------------------- | :------------ | | close | 用户关闭登录插件时所触发的事件 | dialogVisible | | loginCallBack | 用户登录成功时所触发的事件 | e |