Ant Design Vue 1.7.8 （vu2）自定义路由菜单图标
新建icon component: <template> <svg t="1681699879367" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2329" width="32" height="32" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M643.456 409.056c20.448-48.64 84.864-204.256 84.864-237.248l0-129.76-436.384 0 0 129.76c0 33.088 64 189.664 83.968 237.696-99.392 49.472-167.872 151.776-167.872 270.336 0 166.848 135.264 302.112 302.112 302.112s302.112-135.264 302.1...
vue获取节点的父节点、兄弟节点、子节点
<span @click="getClickInfo(event)"> </span> getClickInfo: function (e) { let clickDom = e.currentTarget; // currentTarget 获取绑定点击事件的节点 let currentDom = e.target; // target 获取当前点击节点 let parent = clickDom.parentElement; // parentElement获取绑定事件节点的父节点 let previous = clickDom.previousElementSibling; // previousElementSibling获取绑定事件节点的前一个节点 let previousInner = previous.innerHTML; // 获取绑定...
vue3+vite3实现路由自动化
import {createRouter, createWebHashHistory} from 'vue-router' const modules = import.meta.glob('/src/pages/**/index.js'); console.log(modules); const routes = []; let components = []; Object.keys(modules).forEach(key => { let component = modules[key]; components.push(component()); let name = key.split('pages/')[1].split('/')[0].toLowerCase(); let path = "/" + name; if (name === 'index') { path = "/"; } ...
h5吹气互动(利用recorderjs获取输入音量大小)
h5吹气互动原理是利用获取麦克风音量，用一段逻辑来判断。研究了半天~ 最开始用的是下面这种方法（在ios下失效）： <!doctype html> <html style="font-size: calc((100vw / 375)*10)"> <head> <meta charset="utf-8" ></meta> <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" /> <title>Disney Spring Web - voice！</title> <script src="./recorder.mp3.min.js">&...
使用html5-qrcode 扫描二维码(vue3)
/* Your code... */ <script> import { Html5Qrcode } from "html5-qrcode"; export default { name: 'HelloWorld', props: { msg: String }, mounted(){ console.log('hello...'); this.getCameras(); }, methods:{ getCameras() { Html5Qrcode.getCameras() .then((devices) => { /** * devices would be an array of objects of type: * { id: "id", label: "label" } */ //alert(JSON.stringify(devices)); if (devices && devices.length) { this.came...
彻底解决不同分辨率下的绝对定位问题/大小问题
原理就是 font-szie + rem <!doctype html> <html style="font-size: calc((100vw/375)*10)"> <head> <meta charset="utf-8"></meta> <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0;"name="viewport"></meta> <title>Disney Spring Web！</title> <style> html,body{ margin:0; padding:0; } .container { max-width:1000px; margin:0 ...
wx.miniProgram.navigateTo不起效果
官方文档地址： https://developers.weixin.qq.com/miniprogram/dev/component/web-view.html <span class="token comment">// javascript</span> wx<span class="token punctuation">.</span>miniProgram<span class="token punctuation">.</span><span class="token function">navigateTo</span><span class="token punctuation">(</span><span class="token punctuation&quo...
WebStorm和 VSCode集成cmder
VS Code配置Cmder 使用 ctrl+, 快捷键打开设置页面，选择右上角的{ }切换到settings.json文件，添加下面的配置即可 { ... "terminal.integrated.shell.windows":"C:\\windows\\System32\\cmd.exe", "terminal.integrated.shellArgs.windows":[ "/k D:\\Tools\\cmder_mini\\vendor\\init.bat" ], ... } WebStorm配置Cmder ctrl+alt+s 打开设置窗口，选择 Tools>Terminal 设置 "cmd.exe" /k "D:\cmder\vendor\init.bat"
js/jquery实现连线拖拽
先看效果图： https://blog.peos.cn/wp-content/uploads/2022/10/2022-10-31-16.03.53.mp4 code: <!DOCTYPE html> <html> <body> <style type="text/css"> body, svg{width: 100vh; height: 100vh;} svg{ position: relative; } </style> <script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script> <h1>My f...
macOS Charles 4.x版本的安装及使用（含破解激活）
下载安装 Charles官网下载安装包，下载成功后根据指示安装即可 官网地址： www.charlesproxy.com Charles激活码： Registered Name: https://zhile.io License Key: 48891cf209c6d32bf4 （转自CSDN：blog.csdn.net/qq_25821067…） 激活步骤： 打开Charles，help→Registered to，输入账号和key提交破解成功就可以正常使用啦！ 设置PC端代理端口号 设置端口号如：8888（也可更改，手机设置代理输入一致即可） 设置手机端代理端口号 查看IP地址 手机连接与Mac相同的无线网...