This commit is contained in:
雨霖铃
+7
-7
@@ -6,9 +6,9 @@ import livereload from 'rollup-plugin-livereload';
|
|||||||
import serve from 'rollup-plugin-serve';
|
import serve from 'rollup-plugin-serve';
|
||||||
|
|
||||||
export default defineConfig({
|
export default defineConfig({
|
||||||
input: 'sidepanel/index.js',
|
input: 'sidepanel/js/index.js',
|
||||||
output: {
|
output: {
|
||||||
file: 'dist/sidepanel.bundle.js',
|
file: 'dist/bundle.js',
|
||||||
format: 'iife',
|
format: 'iife',
|
||||||
},
|
},
|
||||||
plugins: [
|
plugins: [
|
||||||
@@ -17,20 +17,20 @@ export default defineConfig({
|
|||||||
json(),
|
json(),
|
||||||
livereload({
|
livereload({
|
||||||
watch: ['dist', 'sidepanel'],
|
watch: ['dist', 'sidepanel'],
|
||||||
verbose: false
|
verbose: false,
|
||||||
}),
|
}),
|
||||||
serve({
|
serve({
|
||||||
open: true,
|
open: true,
|
||||||
port: 8082,
|
port: 8082,
|
||||||
contentBase: ['.', 'sidepanel'],
|
contentBase: ['.', 'sidepanel'],
|
||||||
headers: {
|
headers: {
|
||||||
'Access-Control-Allow-Origin': '*'
|
'Access-Control-Allow-Origin': '*',
|
||||||
}
|
},
|
||||||
}),
|
}),
|
||||||
],
|
],
|
||||||
watch: {
|
watch: {
|
||||||
include: ['sidepanel/**/*'],
|
include: ['sidepanel/**/*'],
|
||||||
exclude: ['node_modules/**/*'],
|
exclude: ['node_modules/**/*'],
|
||||||
clearScreen: false
|
clearScreen: false,
|
||||||
}
|
},
|
||||||
});
|
});
|
||||||
+5
-99
@@ -5,111 +5,17 @@
|
|||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<title>测试工具</title>
|
<title>测试工具</title>
|
||||||
<link rel="stylesheet" href="index.css" />
|
<link rel="stylesheet" href="style/style.css" />
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div id="app">
|
|
||||||
<!-- 导航栏 -->
|
<!-- 导航栏 -->
|
||||||
<nav class="navbar">
|
<nav class="navbar">
|
||||||
<button id="nav-timestamp-btn" class="nav-button active">时间戳转换</button>
|
<button class="nav-button active">时间戳转换</button>
|
||||||
<button id="nav-other-tools-btn" class="nav-button">其他工具</button>
|
<button class="nav-button">任务清单</button>
|
||||||
<button id="close-panel-btn" class="close-button">X</button>
|
<button id="close-panel-btn" class="close-button">X</button>
|
||||||
</nav>
|
</nav>
|
||||||
|
<div id="app"></div>
|
||||||
|
|
||||||
<!-- 页面内容容器 -->
|
<script src="../dist/bundle.js"></script>
|
||||||
<div class="content">
|
|
||||||
<!-- 时间戳工具页面 -->
|
|
||||||
<div id="page-timestamp" class="page active">
|
|
||||||
<h2>时间戳工具</h2>
|
|
||||||
<div id="current-timestamp">
|
|
||||||
<h2>当前时间戳</h2>
|
|
||||||
<p>
|
|
||||||
<a href="javascript:;" id="current-timestamp-value">1762873747965</a>
|
|
||||||
<span id="current-timestamp-unit">毫秒</span>
|
|
||||||
</p>
|
|
||||||
<div>
|
|
||||||
<button id="toggle-unit-btn">切换单位</button>
|
|
||||||
<button id="copy-timestamp-btn">复制</button>
|
|
||||||
<button id="stop-timer-btn" style="background-color: red;">停止</button>
|
|
||||||
<button id="start-timer-btn" style="display: none">开始</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- 时间戳转日期时间 -->
|
|
||||||
<div>
|
|
||||||
<h2>时间戳转日期时间</h2>
|
|
||||||
<div class="datetime-box">
|
|
||||||
<div class="input-group">
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
id="timestamp-input"
|
|
||||||
placeholder="请输入时间戳"
|
|
||||||
class="input-text"
|
|
||||||
/>
|
|
||||||
<select id="timestamp-input-unit-select" class="select-box">
|
|
||||||
<option value="milliseconds">毫秒(ms)</option>
|
|
||||||
<option value="seconds">秒(s)</option>
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="input-group">
|
|
||||||
<button id="convert-timestamp-to-date-btn" class="convert-button">转换</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="input-group">
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
id="timestamp-conversion-result"
|
|
||||||
placeholder="转换结果"
|
|
||||||
class="input-text"
|
|
||||||
/>
|
|
||||||
<select class="select-box" id="timezone-result"></select>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- 日期时间转时间戳 -->
|
|
||||||
<div>
|
|
||||||
<h2>日期时间转时间戳</h2>
|
|
||||||
<div class="datetime-box">
|
|
||||||
<div class="input-group">
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
id="datetime-input"
|
|
||||||
placeholder="输入日期时间"
|
|
||||||
class="input-text"
|
|
||||||
/>
|
|
||||||
<select class="select-box" id="timezone-input"></select>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="input-group">
|
|
||||||
<button id="convert-date-to-timestamp-btn" class="convert-button">转换</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="input-group">
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
id="date-conversion-result"
|
|
||||||
placeholder="转换结果"
|
|
||||||
class="input-text"
|
|
||||||
/>
|
|
||||||
<select id="date-result-unit-select" class="select-box">
|
|
||||||
<option value="milliseconds">毫秒(ms)</option>
|
|
||||||
<option value="seconds">秒(s)</option>
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- 其他工具页面 -->
|
|
||||||
<div id="page-other-tools" class="page">
|
|
||||||
<h2>其他工具页面</h2>
|
|
||||||
<p>这里可以放置其他工具的内容。</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<script src="../dist/sidepanel.bundle.js"></script>
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@@ -0,0 +1,17 @@
|
|||||||
|
// 导入时间戳工具的初始化函数和事件处理
|
||||||
|
import './timestamp.js';
|
||||||
|
|
||||||
|
// 导入页面切换功能
|
||||||
|
import { switchPage } from '../utils/domUtils.js';
|
||||||
|
|
||||||
|
// 页面切换逻辑
|
||||||
|
import { addEventListenerById } from '../utils/domUtils.js';
|
||||||
|
|
||||||
|
addEventListenerById('nav-timestamp-btn', 'click', () => {
|
||||||
|
switchPage('timestamp');
|
||||||
|
});
|
||||||
|
|
||||||
|
// 计时器页面切换
|
||||||
|
addEventListenerById('nav-other-tools-btn', 'click', () => {
|
||||||
|
switchPage('other-tools');
|
||||||
|
});
|
||||||
@@ -1,9 +1,3 @@
|
|||||||
// document.getElementById('close').addEventListener('click', () => {
|
|
||||||
// window.parent.postMessage({ action: 'indexind' }, '*');
|
|
||||||
// });
|
|
||||||
|
|
||||||
// sidepanel/index.js
|
|
||||||
import { switchPage } from './utils/domUtils.js';
|
|
||||||
import {
|
import {
|
||||||
initTimestampDisplay,
|
initTimestampDisplay,
|
||||||
handleToggleUnit,
|
handleToggleUnit,
|
||||||
@@ -14,19 +8,9 @@ import {
|
|||||||
handleCopyTimestamp,
|
handleCopyTimestamp,
|
||||||
handleClosePanel,
|
handleClosePanel,
|
||||||
handleTimezoneResult,
|
handleTimezoneResult,
|
||||||
handleTimezoneInput
|
handleTimezoneInput,
|
||||||
} from './modules/eventHandlers.js';
|
} from '../modules/eventHandlers.js';
|
||||||
import { addEventListenerById } from './utils/domUtils.js';
|
import { addEventListenerById } from '../utils/domUtils.js';
|
||||||
|
|
||||||
// 页面切换逻辑
|
|
||||||
addEventListenerById('nav-timestamp-btn', 'click', () => {
|
|
||||||
switchPage('timestamp');
|
|
||||||
});
|
|
||||||
|
|
||||||
// 计时器页面切换
|
|
||||||
addEventListenerById('nav-other-tools-btn', 'click', () => {
|
|
||||||
switchPage('other-tools');
|
|
||||||
});
|
|
||||||
|
|
||||||
// 初始化时间戳显示
|
// 初始化时间戳显示
|
||||||
initTimestampDisplay();
|
initTimestampDisplay();
|
||||||
@@ -46,6 +30,6 @@ addEventListenerById('copy-timestamp-btn', 'click', handleCopyTimestamp);
|
|||||||
// 绑定关闭面板按钮事件
|
// 绑定关闭面板按钮事件
|
||||||
addEventListenerById('close-panel-btn', 'click', handleClosePanel);
|
addEventListenerById('close-panel-btn', 'click', handleClosePanel);
|
||||||
// 绑定切换时区事件
|
// 绑定切换时区事件
|
||||||
addEventListenerById('timezone-result', 'change', handleTimezoneResult)
|
addEventListenerById('timezone-result', 'change', handleTimezoneResult);
|
||||||
// 绑定输入时区事件
|
// 绑定输入时区事件
|
||||||
addEventListenerById('timezone-input', 'change', handleTimezoneInput)
|
addEventListenerById('timezone-input', 'change', handleTimezoneInput);
|
||||||
@@ -0,0 +1,229 @@
|
|||||||
|
import {
|
||||||
|
RouteUtils,
|
||||||
|
addClass,
|
||||||
|
removeClass,
|
||||||
|
hasClass,
|
||||||
|
getParamsUrl,
|
||||||
|
closure,
|
||||||
|
genKey,
|
||||||
|
} from '../utils/routeUtils.js';
|
||||||
|
class Router {
|
||||||
|
constructor() {
|
||||||
|
// 路由表
|
||||||
|
this.routes = {};
|
||||||
|
// 路由跳转前执行
|
||||||
|
this.beforeFun = null;
|
||||||
|
// 路由跳转后执行
|
||||||
|
this.afterFun = null;
|
||||||
|
// 路由挂载点
|
||||||
|
this.routerViewId = 'router-view';
|
||||||
|
// 路由重定向hash
|
||||||
|
this.redirectRoute = null;
|
||||||
|
// 多级页面缓存
|
||||||
|
this.stackPages = true;
|
||||||
|
// 路由遍历
|
||||||
|
this.routerMap = [];
|
||||||
|
// 路由状态
|
||||||
|
this.historyFlag = '';
|
||||||
|
// 路由历史
|
||||||
|
this.history = [];
|
||||||
|
// 动画名称
|
||||||
|
this.animationName = 'fade';
|
||||||
|
}
|
||||||
|
|
||||||
|
init(config) {
|
||||||
|
this.routerMap = config ? config.routers : this.routerMap;
|
||||||
|
this.routerViewId = config ? config.routerViewId : this.routerViewId;
|
||||||
|
this.stackPages = config ? config.stackPages : this.stackPages;
|
||||||
|
|
||||||
|
if (!this.routerMap.length) {
|
||||||
|
let selector = this.routerViewId + '.page';
|
||||||
|
let pages = document.querySelectorAll(selector);
|
||||||
|
for (let i = 0; i < pages.length; i++) {
|
||||||
|
let page = pages[i];
|
||||||
|
let hash = page.getAttribute('hash');
|
||||||
|
let name = hash.substring(1);
|
||||||
|
this.routerMap.push({
|
||||||
|
name: name,
|
||||||
|
path: hash,
|
||||||
|
callback: closure(name),
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
window.linkTo = (path) => {
|
||||||
|
console.log('path', path);
|
||||||
|
if (path.indexOf('?') !== -1) {
|
||||||
|
window.location.hash = path + '&key=' + genKey();
|
||||||
|
} else {
|
||||||
|
window.location.hash = path + '?key=' + genKey();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
window.addEventListener(
|
||||||
|
'load',
|
||||||
|
function (event) {
|
||||||
|
this.historyChange(event);
|
||||||
|
},
|
||||||
|
false
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 路由历史纪录变化
|
||||||
|
* @param {*} event
|
||||||
|
*/
|
||||||
|
historyChange(event) {
|
||||||
|
const currentHash = getParamsUrl();
|
||||||
|
const nameString = 'router-' + this.routerViewId + '-history';
|
||||||
|
this.history = window.sessionStorage[nameString]
|
||||||
|
? JSON.parse(window.sessionStorage[nameString])
|
||||||
|
: [];
|
||||||
|
|
||||||
|
let back = false,
|
||||||
|
refresh = false,
|
||||||
|
forward = false,
|
||||||
|
index = 0,
|
||||||
|
len = this.history.length;
|
||||||
|
|
||||||
|
for (let i = 0; i < len; i++) {
|
||||||
|
let h = this.history[i];
|
||||||
|
if (h.hash === currentHash.path && h.key === currentHash.query.key) {
|
||||||
|
index = i;
|
||||||
|
if (i === len - 1) {
|
||||||
|
refresh = true;
|
||||||
|
} else {
|
||||||
|
back = true;
|
||||||
|
}
|
||||||
|
break;
|
||||||
|
} else {
|
||||||
|
forward = true;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (back) {
|
||||||
|
this.historyFlag = 'back';
|
||||||
|
this.history.length = index + 1;
|
||||||
|
} else if (refresh) {
|
||||||
|
this.historyFlag = 'refresh';
|
||||||
|
} else {
|
||||||
|
this.historyFlag = 'forward';
|
||||||
|
this.history.push({
|
||||||
|
key: currentHash.query.key,
|
||||||
|
hash: currentHash.path,
|
||||||
|
query: currentHash.query,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
console.log('historyFlag', this.historyFlag);
|
||||||
|
|
||||||
|
if (!this.stackPages) {
|
||||||
|
this.historyFlag = 'forward';
|
||||||
|
}
|
||||||
|
window.sessionStorage[nameString] = JSON.stringify(this.history);
|
||||||
|
this.urlChange();
|
||||||
|
}
|
||||||
|
|
||||||
|
changeView(currentHash) {
|
||||||
|
const pages = document.querySelectorAll('.page');
|
||||||
|
const previousPage = document.querySelector('.' + this.routerViewId + ' .page.active');
|
||||||
|
let currentPage = null;
|
||||||
|
let currentHash = null;
|
||||||
|
|
||||||
|
for (let i = 0; i < pages.length; i++) {
|
||||||
|
let page = pages[i];
|
||||||
|
let hash = page.getAttribute('hash');
|
||||||
|
page.setAttribute('class', 'page');
|
||||||
|
if (hash === currentHash.path) {
|
||||||
|
currentHash = hash;
|
||||||
|
currentPage = page;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const enterName = 'enter-' + this.animationName;
|
||||||
|
const leaveName = 'leave-' + this.animationName;
|
||||||
|
|
||||||
|
if (this.historyFlag === 'back') {
|
||||||
|
addClass(currentPage, 'current');
|
||||||
|
if (previousPage) {
|
||||||
|
addClass(previousPage, leaveName);
|
||||||
|
}
|
||||||
|
|
||||||
|
setTimeout(() => {
|
||||||
|
if (previousPage) {
|
||||||
|
removeClass(previousPage, leaveName);
|
||||||
|
}
|
||||||
|
}, 300);
|
||||||
|
} else if (this.historyFlag === 'forward' || this.historyFlag === 'refresh') {
|
||||||
|
if (previousPage) {
|
||||||
|
addClass(previousPage, leaveName);
|
||||||
|
}
|
||||||
|
addClass(currentPage, enterName);
|
||||||
|
setTimeout(() => {
|
||||||
|
if (previousPage) {
|
||||||
|
removeClass(previousPage, leaveName);
|
||||||
|
}
|
||||||
|
addClass(currentPage, enterName);
|
||||||
|
removeClass(currentPage, 'current');
|
||||||
|
}, 300);
|
||||||
|
currentPage.scrollTop = 0;
|
||||||
|
this.routes[currentHash].callback ? this.routes[currentHash].callback() : null;
|
||||||
|
}
|
||||||
|
|
||||||
|
this.afterFun ? this.afterFun(currentHash) : null;
|
||||||
|
}
|
||||||
|
|
||||||
|
urlChange() {
|
||||||
|
const currentHash = getParamsUrl();
|
||||||
|
if (this.routes[currentHash.path]) {
|
||||||
|
if (this.beforeFun) {
|
||||||
|
this.beforeFun({
|
||||||
|
to: {
|
||||||
|
path: currentHash.path,
|
||||||
|
query: currentHash.query,
|
||||||
|
},
|
||||||
|
next: () => {
|
||||||
|
this.changeView(currentHash);
|
||||||
|
},
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
this.changeView(currentHash);
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
location.hash = this.redirectRoute;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
map() {
|
||||||
|
for (let i = 0; i < this.routerMap.length; i++) {
|
||||||
|
let route = this.routerMap[i];
|
||||||
|
if (route.name === 'redirect') {
|
||||||
|
this.redirectRoute = route.path;
|
||||||
|
} else {
|
||||||
|
this.redirectRoute = this.routerMap[0].path;
|
||||||
|
}
|
||||||
|
|
||||||
|
let newPath = route.path;
|
||||||
|
let path = newPath.repalce(/\s+/g, '');
|
||||||
|
this.routes[path] = {
|
||||||
|
callback: route.callback,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
beforeEach(callback) {
|
||||||
|
if (Object.prototype.toString.call(callback) === '[object Function]') {
|
||||||
|
this.beforeFun = callback;
|
||||||
|
} else {
|
||||||
|
console.trace('beforeEach callback must be a function');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
afterEach(callback) {
|
||||||
|
if (Object.prototype.toString.call(callback) === '[object Function]') {
|
||||||
|
this.afterFun = callback;
|
||||||
|
} else {
|
||||||
|
console.trace('afterEach callback must be a function');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -227,12 +227,7 @@ export function handleCopyTimestamp() {
|
|||||||
|
|
||||||
copyTimestampBtn.textContent = '已复制';
|
copyTimestampBtn.textContent = '已复制';
|
||||||
copyTimestampBtn.style.fontWeight = 'bold';
|
copyTimestampBtn.style.fontWeight = 'bold';
|
||||||
|
|
||||||
// 添加闪烁动画效果
|
|
||||||
copyTimestampBtn.style.transition = 'all 0.3s';
|
|
||||||
copyTimestampBtn.style.transform = 'scale(1.02)';
|
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
copyTimestampBtn.style.transform = 'scale(1)';
|
|
||||||
copyTimestampBtn.textContent = '复制';
|
copyTimestampBtn.textContent = '复制';
|
||||||
copyTimestampBtn.style.color = '';
|
copyTimestampBtn.style.color = '';
|
||||||
copyTimestampBtn.style.fontWeight = '';
|
copyTimestampBtn.style.fontWeight = '';
|
||||||
|
|||||||
@@ -0,0 +1,67 @@
|
|||||||
|
<div id="page-timestamp" class="page active">
|
||||||
|
<h2>时间戳工具</h2>
|
||||||
|
<div id="current-timestamp">
|
||||||
|
<h2>当前时间戳</h2>
|
||||||
|
<p>
|
||||||
|
<a href="javascript:;" id="current-timestamp-value">1762873747965</a>
|
||||||
|
<span id="current-timestamp-unit">毫秒</span>
|
||||||
|
</p>
|
||||||
|
<div>
|
||||||
|
<button id="toggle-unit-btn">切换单位</button>
|
||||||
|
<button id="copy-timestamp-btn">复制</button>
|
||||||
|
<button id="stop-timer-btn" style="background-color: red">停止</button>
|
||||||
|
<button id="start-timer-btn" style="display: none">开始</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 时间戳转日期时间 -->
|
||||||
|
<div>
|
||||||
|
<h2>时间戳转日期时间</h2>
|
||||||
|
<div class="datetime-box">
|
||||||
|
<div class="input-group">
|
||||||
|
<input type="text" id="timestamp-input" placeholder="请输入时间戳" class="input-text" />
|
||||||
|
<select id="timestamp-input-unit-select" class="select-box">
|
||||||
|
<option value="milliseconds">毫秒(ms)</option>
|
||||||
|
<option value="seconds">秒(s)</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="input-group">
|
||||||
|
<button id="convert-timestamp-to-date-btn" class="convert-button">转换</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="input-group">
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
id="timestamp-conversion-result"
|
||||||
|
placeholder="转换结果"
|
||||||
|
class="input-text"
|
||||||
|
/>
|
||||||
|
<select class="select-box" id="timezone-result"></select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 日期时间转时间戳 -->
|
||||||
|
<div>
|
||||||
|
<h2>日期时间转时间戳</h2>
|
||||||
|
<div class="datetime-box">
|
||||||
|
<div class="input-group">
|
||||||
|
<input type="text" id="datetime-input" placeholder="输入日期时间" class="input-text" />
|
||||||
|
<select class="select-box" id="timezone-input"></select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="input-group">
|
||||||
|
<button id="convert-date-to-timestamp-btn" class="convert-button">转换</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="input-group">
|
||||||
|
<input type="text" id="date-conversion-result" placeholder="转换结果" class="input-text" />
|
||||||
|
<select id="date-result-unit-select" class="select-box">
|
||||||
|
<option value="milliseconds">毫秒(ms)</option>
|
||||||
|
<option value="seconds">秒(s)</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
@@ -0,0 +1,59 @@
|
|||||||
|
/**
|
||||||
|
* 获取路由的路径和详情参数
|
||||||
|
* @returns
|
||||||
|
*/
|
||||||
|
export function getParamsUrl() {
|
||||||
|
let hasDetail = location.hash.split('?');
|
||||||
|
let hasName = hasDetail[0].split('#')[1];
|
||||||
|
let params = hasDetail[1] ? hasDetail[1].split('&') : [];
|
||||||
|
let query = {};
|
||||||
|
|
||||||
|
for (let i = 0; i < params.length; i++) {
|
||||||
|
let param = params[i].split('=');
|
||||||
|
query[param[0]] = param[1];
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
path: hasName,
|
||||||
|
query: query,
|
||||||
|
params: params,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
export function closure(name) {
|
||||||
|
function fun(currentHash) {
|
||||||
|
window.name&&window[name](currentHash)
|
||||||
|
}
|
||||||
|
return fun;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function genKey() {
|
||||||
|
let temp = 'xxxxxxxx';
|
||||||
|
return temp.replace(/[xy]/g, function (c) {
|
||||||
|
let r = Math.random() * 16 | 0, v = c == 'x' ? r : (r & 0x3 | 0x8);
|
||||||
|
return v.toString(16);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
export function hasClass(elem, cls) {
|
||||||
|
cls = cls || '';
|
||||||
|
if (cls.replace(/\s/g, '').length === 0)
|
||||||
|
return false;
|
||||||
|
return new RegExp(' ' + cls + ' ').test(' ' + elem.className + ' ');
|
||||||
|
}
|
||||||
|
|
||||||
|
export function addClass(elem, cls) {
|
||||||
|
if (!hasClass(elem, cls)) {
|
||||||
|
elem.className = elem.className === '' ? cls : elem.className + ' ' + cls;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export function removeClass(elem, cls) {
|
||||||
|
if (hasClass(elem, cls)) {
|
||||||
|
let newClass = ' ' + elem.className.replace(/[\t\r\n]/g, '') + ' ';
|
||||||
|
while (newClass.indexOf(' ' + cls + ' ') >= 0) {
|
||||||
|
newClass = newClass.replace(' ' + cls + ' ', ' ');
|
||||||
|
}
|
||||||
|
elem.className = newClass.replace(/^\s+|\s+$/)
|
||||||
|
}
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user