feg-vuebase
v0.0.6
Published
> 基于Vue3项目的基础库,目前包含 组件加载器 和 组件描述声明文件
Downloads
5
Readme
Vue3项目基础库
基于Vue3项目的基础库,目前包含 组件加载器 和 组件描述声明文件
已有组件
| 名称 | 模块名 | 功能说明 | | ---- | ---- | ---- | | 一键启动 | nie.vue3.gamestart | Vue3的游戏一键启动组件 | | 版权 | nie.vue3.copyright | Vue3的版权组件,兼容PC和移动 |
Vue项目引用方式(html)
如需同时引用旧版的
jquery
或zepto
,需将vuebase.js
引用位置在后面
<script src="https://nie.res.netease.com/comm/js/vuebase.js"></script>
TypeScript声明文件引用
// vite-env.d.ts
// 顶部 vite 下 引入下面这句
/// <reference types="feg-vuebase/client" />
全局方式
//main.ts
Promise.all([import("vue"),import("axios"),import("axios-jsonp")]).then(async (rets)=>{
[window.Vue, window.axios, window.axiosJsonpAdapter] = rets;
const [GameStart,CopyRight] = await VueBase.require(["nie.vue3.gamestart","nie.vue3.copyright"]);
app.use(GameStart);
app.use(CopyRight);
app.mount("#app");
});
<template>
<feg-gamestart product="yys"></feg-gamestart>
<feg-copyright product="yys"></feg-copyright>
</template>
局部方式(不推荐)
//main.ts
Promise.all([import("vue"),import("axios"),import("axios-jsonp")]).then((rets)=>{
[window.Vue, window.axios, window.axiosJsonpAdapter] = rets;
app.mount("#app");
});
<template>
<component :is="GameStart" product="yys"></component>
</template>
<script lang="ts" setup>
const GameStart = ref(null);
const loadComponents = async ()=>{
GameStart.value = await VueBase.require("nie.vue3.gamestart",true);
}
loadComponents();
</script>
API
属性(props)
| 参数 | 说明 | 类型 | 默认值 | 备注 | | ---- | ---- | ---- | ---- | ---- | | isHomeDomain | 是否国内域名 | Boolean | 无 | 无 | | report | 章鱼统计相关 | Object | 无 | 对象函数参考下面说明 | | cookie | cookie操作相关 | Object | 无 | 对象函数参考下面说明 | | storage | localstorage操作相关 | Object | 无 | 对象函数参考下面说明 | | browser | 浏览器相关信息与操作 | Object | 无 | 对象函数参考下面说明 | | include | 加载文件操作相关 | Object | 无 | 对象函数参考下面说明 |
函数事件(events)
| 名称 | 功能说明 | 参数 | | ---- | ---- | ---- | | require | 加载vue3组件 | modules : String|String[] // 模块名/列表 isRaw : boolean // 是否为局部组件加载 |
report(events)
| 名称 | 功能说明 | 参数 | | ---- | ---- | ---- | | clickStat | 打点统计上报 | params : { activity : String ; // 页面地址 monitor : String ; // 上报关键字 desc : String ; // 关键字中文描述 } | | add | 兼容旧版章鱼的点击统计 | monitor : String // 点击统计名称 desc : String // 统计描述 |
cookie(events)
| 名称 | 功能说明 | 参数 | | ---- | ---- | ---- | | get | 获取cookie | name : String // cookie名 | | set | 设置cookie | name : String // cookie名 value : String // cookie值 options?: { path?: string; expires?: number | Date; domain?: string; secure?: boolean; raw?: string;} |
storage(events)
| 名称 | 功能说明 | 参数 | | ---- | ---- | ---- | | get | 获取localstorage | name : String // storage名 | | set | 设置localstorage | name : String // storage名 value : String // storage值 |
browser(props)
| 参数 | 说明 | 类型 | 默认值 | 备注 | | ---- | ---- | ---- | ---- | ---- | | msie | 是否IE浏览器 | Boolean | false | 无 | | webkit | 是否Webkit内核 | Boolean | false | 无 | | pc | 是否PC端 | Boolean | false | 无 | | mobile | 是否移动端 | Boolean | false | 无 | | ios | 是否ios | Boolean | false | 无 | | android | 是否android | Boolean | false | 无 | | weixin | 是否微信内 | Boolean | false | 无 | | mini | 是否小程序内 | Boolean | false | 无 |
browser(events)
| 名称 | 功能说明 | 参数 | 返回值 | | ---- | ---- | ---- | ---- | | query | 获取URL参数 | key : String // 参数名 object?: string // 查询对象,默认是location.search | String |
include(events)
| 名称 | 功能说明 | 参数 | 返回值| | ---- | ---- | ---- | ---- | | loadScript | 加载js远程文件 | url : String // 参数名 | Promise | | loadStyles | 获取URL参数 | url : String // 参数名 | 无 |
load(props)
| 参数 | 说明 | 类型 | 默认值 | 备注 | | ---- | ---- | ---- | ---- | ---- | | startTime | window load startTime | Date | 0 | 无 |