Skip to content

Instantly share code, notes, and snippets.

<template>
<div class="toggle-button-wrapper">
<input
id="toggle-button"
type="checkbox"
name="switch"
:checked="checked"
v-on="listeners"
@change="onChange"
/>
<!doctype html>
<html>
<head>
<style>
canvas {
border: 1px solid black;
}
</style>
</head>
<script>
const getLoadTime = function () {
let loadTime = new Date().getTime()
let unloadTime = localStorage.getItem('timeUnLoad')
let loadPage = localStorage.getItem('timeLoadCount') || 0
let loadCount = isNaN(loadPage) ? 0 : Number(loadPage) /* remember load page count */
localStorage.setItem('timeLoad', loadTime)
localStorage.setItem('timeLoadGap', loadTime - unloadTime)
const gap = loadTime - unloadTime
if (gap > 500 && loadCount === 0) {
import dayjs from 'dayjs'
import 'dayjs/locale/zh-cn'
dayjs.locale('zh-cn')
/**
* 日期格式化
* @param d
* @param format YYYY/MM/DD HH:mm:ss
*/
export const formatDate = (d, format) => {
@leobod
leobod / EventBus.js
Last active March 8, 2023 08:42
事件总线
class EventBus {
constructor() {
this.eventMap = new Map()
}
$on(name, fn, once = false) {
if (!this.eventMap.has(name)) {
this.eventMap.set(name, [])
}
const eventList = this.eventMap.get(name)
@leobod
leobod / CarKeybord.vue3.vue
Created February 21, 2023 10:04
车牌号键盘vue3
<template>
<div>
<div class="keybord-wrap">
<header class="keybord-header">
<span @click="cancel()">{{ $t('取消') }}</span>
<span v-if="previewOnKeyboard" :class="['preview', { 'new-energy': keybord.newEnergy }]">{{ keybord.inputValue.join('') }}</span>
<span :class="[{ gray: keybord.inputValue.length < 7 }]" @click="submit()">{{ $t('完成') }}</span>
</header>
<div class="keybord-keys">
uuidv4: function () {
return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(
/[xy]/g,
function (c) {
var r = (Math.random() * 16) | 0,
v = c == 'x' ? r : (r & 0x3) | 0x8;
return v.toString(16);
}
);
},
@leobod
leobod / expireLocalStorage.js
Last active January 31, 2023 09:21
使用expire来包裹val实现localStorage过期效果
// Storage原型上挂载对应方法 (过期实现,方法一)
// 存值函数
// 接收三个参数:键、值、有效天数
Storage.prototype.setCanExpireLocal = (key, value, expire) => {
// 判断传入的有效期是否为数值或有效
// isNaN是js的内置函数,用于判断一个值是否为NaN(非数值),
// 非数值返回true,数值返回false
// 还可以限制一下有效期为整数,这里就不做了
if (isNaN(expire) || expire < 1) {
throw new Error('有效期应为一个有效数值')
@leobod
leobod / formatHumpLineTransfer.js
Created January 31, 2023 09:15
下划线与驼峰互转
/** 返回数据下划线转化为驼峰命名
* @param {data} 'obj或ary'
* @param {type} 'hump' 为下划线转驼峰,'line' 为驼峰转下划线
* @return {Array||Object}
*/
export const formatHumpLineTransfer = (data, type = 'hump') => {
// 判断传入的值是对象还是数组
const newData =
Object.prototype.toString.call(data) === '[object Object]'
? [JSON.parse(JSON.stringify(data))]
@leobod
leobod / shake.js
Created October 24, 2022 03:20
taro 或 微信小程序 摇一摇
// shake.js
let shakeInfo = {
openFlag: false, // 是否开启摇一摇,如果是小程序全局监听摇一摇,这里默认为true
shakeSpeed: 110, //设置阈值,越小越灵敏
shakeStep: 2000, //摇一摇成功后间隔
lastTime: 0, //此变量用来记录上次摇动的时间
x: 0,
y: 0,
z: 0,
lastX: 0,