18 changed files with 311 additions and 114 deletions
@ -0,0 +1,72 @@ |
|||
import { IEVersion } from "@xyx-utils/browser"; |
|||
|
|||
describe("测试 on 与 off", () => { |
|||
it("IE7 版本", () => { |
|||
global.navigator = { |
|||
...global.navigator, // 保留其他可能存在的属性
|
|||
userAgent: 'Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.1)' |
|||
}; |
|||
expect(IEVersion()).toBe(7); |
|||
}); |
|||
it("IE6 版本", () => { |
|||
global.navigator = { |
|||
...global.navigator, // 保留其他可能存在的属性
|
|||
userAgent: 'Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1)' |
|||
}; |
|||
expect(IEVersion()).toBe(6); |
|||
}); |
|||
it("IE8 版本", () => { |
|||
global.navigator = { |
|||
...global.navigator, // 保留其他可能存在的属性
|
|||
userAgent: 'Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1)' |
|||
}; |
|||
expect(IEVersion()).toBe(8); |
|||
}); |
|||
it("IE9 版本", () => { |
|||
global.navigator = { |
|||
...global.navigator, // 保留其他可能存在的属性
|
|||
userAgent: 'Mozilla/4.0 (compatible; MSIE 9.0; Windows NT 5.1)' |
|||
}; |
|||
expect(IEVersion()).toBe(9); |
|||
}); |
|||
it("IE10 版本", () => { |
|||
global.navigator = { |
|||
...global.navigator, // 保留其他可能存在的属性
|
|||
userAgent: 'Mozilla/4.0 (compatible; MSIE 10.0; Windows NT 5.1)' |
|||
}; |
|||
expect(IEVersion()).toBe(10); |
|||
}); |
|||
it("edge", () => { |
|||
global.navigator = { |
|||
...global.navigator, // 保留其他可能存在的属性
|
|||
userAgent: 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/46.0.2486.0 Safari/537.36Edge/13.10586' |
|||
}; |
|||
expect(IEVersion()).toBe("edge"); |
|||
}); |
|||
// it("触发多次click事件", () => {
|
|||
// const mockListener = vi.fn();
|
|||
// const element = document.createElement("div");
|
|||
// on(element, "click", mockListener);
|
|||
|
|||
// const event = new MouseEvent("click");
|
|||
// element.dispatchEvent(event);
|
|||
// element.dispatchEvent(event);
|
|||
|
|||
// expect(mockListener).toBeCalledTimes(2);
|
|||
// });
|
|||
// it("仅触发一次click事件", () => {
|
|||
// const mockListener = vi.fn();
|
|||
// const element = document.createElement("div");
|
|||
// on(element, "click", mockListener);
|
|||
|
|||
// const event = new MouseEvent("click");
|
|||
// element.dispatchEvent(event);
|
|||
|
|||
// off(element, "click", mockListener);
|
|||
|
|||
// element.dispatchEvent(event);
|
|||
// element.dispatchEvent(event);
|
|||
|
|||
// expect(mockListener).toBeCalledTimes(1);
|
|||
// });
|
|||
}); |
@ -1,45 +0,0 @@ |
|||
<template> |
|||
<div> |
|||
<cop info="getExplorerInfo" :text="ExplorerInfo"></cop> |
|||
<cop info="getExplorerInfo" :text="IeInfo === -1 ? '这不是IE' : '这是IE' + IeInfo"></cop> |
|||
<cop info="isHtml5Plus" :text="html5PlusInfo ? '这是html5Plus环境' : '这不是html5Plus环境'"></cop> |
|||
<cop info="isWxMp" :text="wxMpInfo ? '这是微信小程序' : '这不是微信小程序'"></cop> |
|||
<cop info="isWeChat" :text="weChatInfo ? '这是微信浏览器' : '这不是微信浏览器'"></cop> |
|||
<cop info="isMobile" :text="mobileInfo ? '这是手机' : '这不是手机'"></cop> |
|||
<cop info="isWeCom" :text="isWeCom ? '这是企业微信' : '这不是企业微信'"></cop> |
|||
<cop info="isAlipay" :text="isAlipay ? '这是支付宝' : '这不是支付宝'"></cop> |
|||
<cop info="isDingTalk" :text="isDingTalk ? '这是钉钉' : '这不是钉钉'"></cop> |
|||
</div> |
|||
</template> |
|||
<script lang="ts" setup> |
|||
import { getExplorerInfo, IEVersion } from '@xyx-utils/browser/check' |
|||
import { isWeCom, isAlipay, isDingTalk, isHtml5Plus, isMobile, isWeChat, isWxMp } from '@xyx-utils/browser' |
|||
import { defineComponent, h, ref } from 'vue' |
|||
|
|||
const cop = defineComponent({ |
|||
props: ['info', 'text'], |
|||
setup(props: any, ctx) { |
|||
return () => h('div', [ |
|||
h('code', [props.info]), |
|||
h('span', ["检测结果:" + props.text]), |
|||
]) |
|||
}, |
|||
}) |
|||
|
|||
const ExplorerInfo = getExplorerInfo() |
|||
const IeInfo = IEVersion() |
|||
const html5PlusInfo = isHtml5Plus() |
|||
const mobileInfo = isMobile() |
|||
const weChatInfo = isWeChat() |
|||
const wxMpInfo = ref<boolean>(); |
|||
; (async () => { |
|||
try { |
|||
await isWxMp() |
|||
wxMpInfo.value = true |
|||
} catch (error) { |
|||
wxMpInfo.value = false |
|||
} |
|||
})(); |
|||
|
|||
</script> |
|||
<style lang="less" scoped></style> |
@ -1,10 +1,45 @@ |
|||
<template> |
|||
<ClientComp></ClientComp> |
|||
<div> |
|||
<cop info="getExplorerInfo" :text="ExplorerInfo"></cop> |
|||
<cop info="getExplorerInfo" :text="IeInfo === -1 ? '这不是IE' : '这是IE' + IeInfo"></cop> |
|||
<cop info="isHtml5Plus" :text="html5PlusInfo ? '这是html5Plus环境' : '这不是html5Plus环境'"></cop> |
|||
<cop info="isWxMp" :text="wxMpInfo ? '这是微信小程序' : '这不是微信小程序'"></cop> |
|||
<cop info="isWeChat" :text="weChatInfo ? '这是微信浏览器' : '这不是微信浏览器'"></cop> |
|||
<cop info="isMobile" :text="mobileInfo ? '这是手机' : '这不是手机'"></cop> |
|||
<cop info="isWeCom" :text="isWeCom ? '这是企业微信' : '这不是企业微信'"></cop> |
|||
<cop info="isAlipay" :text="isAlipay ? '这是支付宝' : '这不是支付宝'"></cop> |
|||
<cop info="isDingTalk" :text="isDingTalk ? '这是钉钉' : '这不是钉钉'"></cop> |
|||
</div> |
|||
</template> |
|||
<script setup> |
|||
import { defineClientComponent } from 'vitepress' |
|||
<script lang="ts" setup> |
|||
import { getExplorerInfo, IEVersion } from '@xyx-utils/browser/check' |
|||
import { isWeCom, isAlipay, isDingTalk, isHtml5Plus, isMobile, isWeChat, isWxMp } from '@xyx-utils/browser' |
|||
import { defineComponent, h, ref } from 'vue' |
|||
|
|||
const ClientComp = defineClientComponent(() => { |
|||
return import('./demo.vue') |
|||
const cop = defineComponent({ |
|||
props: ['info', 'text'], |
|||
setup(props: any, ctx) { |
|||
return () => h('div', [ |
|||
h('code', [props.info]), |
|||
h('span', ["检测结果:" + props.text]), |
|||
]) |
|||
}, |
|||
}) |
|||
</script> |
|||
|
|||
const ExplorerInfo = getExplorerInfo() |
|||
const IeInfo = IEVersion() |
|||
const html5PlusInfo = isHtml5Plus() |
|||
const mobileInfo = isMobile() |
|||
const weChatInfo = isWeChat() |
|||
const wxMpInfo = ref<boolean>(); |
|||
; (async () => { |
|||
try { |
|||
await isWxMp() |
|||
wxMpInfo.value = true |
|||
} catch (error) { |
|||
wxMpInfo.value = false |
|||
} |
|||
})(); |
|||
|
|||
</script> |
|||
<style lang="less" scoped></style> |
|||
|
@ -1,31 +0,0 @@ |
|||
<template> |
|||
<div> |
|||
<n-space style="margin-bottom: 10px;"> |
|||
<n-button @click="onBindEvent">绑定点击事件</n-button> |
|||
<n-button @click="onRemoveEvent">移除点击事件</n-button> |
|||
</n-space> |
|||
<n-tag><span ref="targetRef">{{ isBind ? '已绑定,点击测试' : '未绑定' }}</span></n-tag> |
|||
</div> |
|||
</template> |
|||
<script lang="ts" setup> |
|||
import { ref } from "vue"; |
|||
import { on, off } from "@xyx-utils/browser/event"; |
|||
|
|||
const targetRef = ref<HTMLElement>(); |
|||
const isBind = ref(false) |
|||
|
|||
function clickNode() { |
|||
alert("click"); |
|||
} |
|||
|
|||
function onBindEvent() { |
|||
on(targetRef.value, "click", clickNode); |
|||
isBind.value = true |
|||
} |
|||
|
|||
function onRemoveEvent() { |
|||
off(targetRef.value, "click", clickNode); |
|||
isBind.value = false |
|||
} |
|||
</script> |
|||
<style lang="less" scoped></style> |
@ -1,10 +1,31 @@ |
|||
<template> |
|||
<ClientComp></ClientComp> |
|||
<div> |
|||
<n-space style="margin-bottom: 10px;"> |
|||
<n-button @click="onBindEvent">绑定点击事件</n-button> |
|||
<n-button @click="onRemoveEvent">移除点击事件</n-button> |
|||
</n-space> |
|||
<n-tag><span ref="targetRef">{{ isBind ? '已绑定,点击测试' : '未绑定' }}</span></n-tag> |
|||
</div> |
|||
</template> |
|||
<script setup> |
|||
import { defineClientComponent } from 'vitepress' |
|||
<script lang="ts" setup> |
|||
import { ref } from "vue"; |
|||
import { on, off } from "@xyx-utils/browser/event"; |
|||
|
|||
const ClientComp = defineClientComponent(() => { |
|||
return import('./demo.vue') |
|||
}) |
|||
</script> |
|||
const targetRef = ref<HTMLElement>(); |
|||
const isBind = ref(false) |
|||
|
|||
function clickNode() { |
|||
alert("click"); |
|||
} |
|||
|
|||
function onBindEvent() { |
|||
on(targetRef.value, "click", clickNode); |
|||
isBind.value = true |
|||
} |
|||
|
|||
function onRemoveEvent() { |
|||
off(targetRef.value, "click", clickNode); |
|||
isBind.value = false |
|||
} |
|||
</script> |
|||
<style lang="less" scoped></style> |
|||
|
@ -1,3 +1,4 @@ |
|||
export * from "./event"; |
|||
export * from "./check"; |
|||
export * from "./scrollTo"; |
|||
// export * from "./sessionStorage";
|
|||
|
@ -1,15 +0,0 @@ |
|||
<template> |
|||
<n-space style="position: fixed;top: 200px;"> |
|||
<n-button @click="onBindEvent(1000)">点击滚动到1000位置</n-button> |
|||
<n-button @click="onBindEvent(0)">点击滚动到顶部</n-button> |
|||
</n-space> |
|||
</template> |
|||
<script lang="ts" setup> |
|||
import { scrollTo } from "@xyx-utils/browser/scrollTo"; |
|||
|
|||
function onBindEvent(height) { |
|||
scrollTo(height, 1000) |
|||
} |
|||
|
|||
</script> |
|||
<style lang="less" scoped></style> |
@ -1,10 +1,15 @@ |
|||
<template> |
|||
<ClientComp></ClientComp> |
|||
<n-space style="position: fixed;top: 200px;"> |
|||
<n-button @click="onBindEvent(1000)">点击滚动到1000位置</n-button> |
|||
<n-button @click="onBindEvent(0)">点击滚动到顶部</n-button> |
|||
</n-space> |
|||
</template> |
|||
<script setup> |
|||
import { defineClientComponent } from 'vitepress' |
|||
<script lang="ts" setup> |
|||
import { scrollTo } from "@xyx-utils/browser/scrollTo"; |
|||
|
|||
const ClientComp = defineClientComponent(() => { |
|||
return import('./demo.vue') |
|||
}) |
|||
</script> |
|||
function onBindEvent(height) { |
|||
scrollTo(height, 1000) |
|||
} |
|||
|
|||
</script> |
|||
<style lang="less" scoped></style> |
|||
|
@ -0,0 +1,30 @@ |
|||
import { on, off } from "@xyx-utils/browser"; |
|||
|
|||
describe("测试 on 与 off", () => { |
|||
it("触发多次click事件", () => { |
|||
const mockListener = vi.fn(); |
|||
const element = document.createElement("div"); |
|||
on(element, "click", mockListener); |
|||
|
|||
const event = new MouseEvent("click"); |
|||
element.dispatchEvent(event); |
|||
element.dispatchEvent(event); |
|||
|
|||
expect(mockListener).toBeCalledTimes(2); |
|||
}); |
|||
it("仅触发一次click事件", () => { |
|||
const mockListener = vi.fn(); |
|||
const element = document.createElement("div"); |
|||
on(element, "click", mockListener); |
|||
|
|||
const event = new MouseEvent("click"); |
|||
element.dispatchEvent(event); |
|||
|
|||
off(element, "click", mockListener); |
|||
|
|||
element.dispatchEvent(event); |
|||
element.dispatchEvent(event); |
|||
|
|||
expect(mockListener).toBeCalledTimes(1); |
|||
}); |
|||
}); |
@ -0,0 +1,7 @@ |
|||
--- |
|||
title: session存储 |
|||
--- |
|||
|
|||
## Demo |
|||
|
|||
<preview path="./index.vue" title="sessionStorage" description="session存储工具"></preview> |
@ -0,0 +1,10 @@ |
|||
<template> |
|||
<div> |
|||
sada |
|||
</div> |
|||
</template> |
|||
<script setup> |
|||
import { session_storage, remove_session_storage_item, clear_session_storage } from "@xyx-utils/browser/sessionStorage" |
|||
|
|||
session_storage("asda", "sada") |
|||
</script> |
@ -0,0 +1,55 @@ |
|||
const _is_session_storage = !!window.sessionStorage; |
|||
let _data_session_dom, _dataSessionDom_name = window.location.hostname || 'sessionUserData'; |
|||
if (!_is_session_storage) { |
|||
try { |
|||
_data_session_dom = document.createElement('input'); |
|||
_data_session_dom.type = 'hidden'; |
|||
_data_session_dom.style.display = "none"; |
|||
_data_session_dom.addBehavior('#default#userData'); //userData的语法
|
|||
document.body.appendChild(_data_session_dom); |
|||
_data_session_dom.expires = new Date($.date().addDays(365)).toUTCString(); //设定过期时间
|
|||
//加载userdata
|
|||
_data_session_dom.load(_dataSessionDom_name); |
|||
} catch (e) { |
|||
_data_session_dom = null; |
|||
console.log("userData初始化失败!"); |
|||
} |
|||
} |
|||
export const session_storage = (key, value) => { |
|||
let _return_value; |
|||
try { |
|||
if (_is_session_storage) { |
|||
if (value != undefined) { |
|||
sessionStorage.setItem(encodeURIComponent(key), encodeURIComponent(value)); |
|||
} else { |
|||
_return_value = sessionStorage.getItem(encodeURIComponent(key)); |
|||
return _return_value ? decodeURIComponent(_return_value) : null; |
|||
} |
|||
} else if (_data_session_dom) { |
|||
if (value != undefined) { |
|||
_data_session_dom.setAttribute(key, value); |
|||
_data_session_dom.save(_dataSessionDom_name); |
|||
} else { |
|||
_return_value = _data_session_dom.getAttribute(key); |
|||
return _return_value ? decodeURIComponent(_return_value) : null; |
|||
} |
|||
} |
|||
} catch (e) { |
|||
return false; |
|||
} |
|||
}; |
|||
export const remove_session_storage_item = (key) => { |
|||
if (_is_session_storage) { |
|||
sessionStorage.removeItem(encodeURIComponent(key)); |
|||
} else if (_data_session_dom) { |
|||
_data_session_dom.removeAttribute(encodeURIComponent(key)); |
|||
_data_session_dom.save(_dataSessionDom_name); |
|||
} |
|||
}; |
|||
export const clear_session_storage = () => { |
|||
if (_is_session_storage) { |
|||
sessionStorage.clear(); |
|||
} else { |
|||
_data_session_dom.remove(); |
|||
} |
|||
}; |
@ -0,0 +1,7 @@ |
|||
--- |
|||
title: demote |
|||
category: 数组 |
|||
source-path: /docs/array/demote.html |
|||
--- |
|||
|
|||
<preview path="./index.vue" title="@niu-tools/core" description="demote"></preview> |
@ -0,0 +1,29 @@ |
|||
<script setup lang="ts"> |
|||
import { demote } from "@xyx-utils/core" |
|||
import { ref } from "vue" |
|||
|
|||
|
|||
const outout = ref<string[]>([]) |
|||
|
|||
console.log = (str) => { |
|||
outout.value.push(str) |
|||
} |
|||
|
|||
function run() { |
|||
console.log(demote([1,2,3, [1,2,3]])); |
|||
} |
|||
|
|||
</script> |
|||
|
|||
<template> |
|||
<div> |
|||
<div> |
|||
[1,2,3, [1,2,3]] |
|||
</div> |
|||
<button @click="run">运行</button> |
|||
<div>输出:</div> |
|||
<div v-for="i in outout"> |
|||
{{ i }} |
|||
</div> |
|||
</div> |
|||
</template> |
@ -1,4 +1,8 @@ |
|||
|
|||
/** |
|||
* 判断是否是数组 |
|||
* @param arr 数组 |
|||
* @returns 是否是数组 |
|||
*/ |
|||
export function isArray(arr) { |
|||
return Array.isArray(arr) |
|||
} |
Loading…
Reference in new issue