- 博客(138)
- 收藏
- 关注
RSS订阅原创 Webstorm Module is not installed/Cannot find declaration to go to
Webstorm 点击无法跳转到对应文件
2023-02-17 10:24:13
46
原创 微信小程序 原生支持less、sass、typescript啦
微信小程序已经原生支持less、sass、typescript啦，别在安装什么gulp、导入什么vscode插件乱七八糟的
2022-10-27 20:17:11
545
原创 小程序 scroll-view flex布局下align-items和gap无效
小程序 scroll-view flex布局下align-items无效。
2022-10-27 17:24:10
220
原创 前端跨页面通信的几种方式
前端跨页面通信的几种方式Service WorkerlocalStorage 【共享存储 + 监听】Shared Worker 【共享存储 + 轮询】无法主动通知，需要轮询获取最新数据window.opener 【口口相传】非同源iframe [代理]父A = 非同源应用A （e.g. http://localhost:63342/demo/iframe/page1.html）子A = 非同源iframe
2022-09-21 13:47:01
404
原创 【face-api.js】前端实现，人脸捕获、表情识别、年龄性别识别、人脸比对、视频人脸追踪、摄像头人物识别
face-api.js，实现人脸捕获、人脸识别、表情识别、年龄性别识别、视频人脸追踪、摄像头人物识别
2022-07-27 21:16:50
1561
原创 Vue 使用特殊字体
// App.vue...<style lang="less"> @font-face { font-family: "BebasNeue"; src: url("./font/BebasNeue.otf"); font-weight: normal; font-style: normal; }</style>
2022-05-29 19:30:37
143
原创 Vue keyframe动画不生效
keyframe不要写在scoped里<style scope> // 这里的不生效 @keyframes spin { from{ transform: rotateY(0deg); } to{ transform: rotateY(360deg); } }</style><style> // 这里的生效 @keyframes spin { from{ transfo
2022-05-25 15:44:51
597
原创 Vue、React 封装Lottie
<template> <div v-if="visible" ref="animationRef" :style="{...styles}" :class="['lottie-animate', ...className]" /></template><script> import lottie from 'lottie-web'; export default { props: {
2022-05-25 09:36:48
94
原创 前端 数据埋点
常见的埋点用户某个icon点击次数、观看某个视频的时长埋点的作用大数据杀熟，多次访问后涨价大量用户在5分钟时发送了弹幕，判断这是视频的精彩瞬间，截取这一段来做推广埋点分类展现埋点：服务端记录响应的内容（页面展现的内容信息）曝光埋点：屏幕有限，内容无限，记录用户实际看到的交互埋点：记录用户点赞、播放、暂停等数据监控（监控用户行为）PV（page view）：页面浏览/点击量UV（user view）：访问站点/新闻的不同IP地址人数用户通过什么入口来访问该网页用户在页面中触发的
2022-05-09 00:23:34
449
原创 谷歌浏览器调试技巧
快速重发请求 { editor.ui.registry.addButton('simpleMedia', { text: '<svg width="24" height="24" focusable="false"><path d="M4 3h16c.6 0 1 .4 1 1v16c0 .6-.4 1-1 1H4a1 1 0 01-1-1V4c0-.6.4-1 1-1zm1..
2022-05-06 15:42:22
351
原创 Vue 双向绑定原理
Object.defineProperty 给每个属性添加get、set方法，监听数据的变化Class Observer { constructor(data) { this.observer(data); } observer(data) { if (data && typeof data === 'object') { for (let key in data) { this.defineReactive(data, key
2022-04-18 14:07:36
396
原创 Vue 组件按需引入
【src/router/index.js】import Vue from 'vue';import VueRouter from 'vue-router';// 无论组件有没有用，都会被加载import SectionA from '../views/SectionA';import SectionB from '../views/SectionB';import SectionC from '../views/SectionC';// 组件按需加载const SectionA = (
2022-04-15 23:03:29
317
原创 Vue 图片懒加载
图片懒加载【安装】npm i vue-lazyload -S【main.js】import Vue from 'vue';import App from './App.vue';import VueLazyload from 'vue-lazyload';Vue.use(VueLazyload, { error: './assets/images/error.png', loading: './assets/images/loading.gif'})/* eslint-d
2022-04-15 23:01:07
30
原创 Vue 打包上架刷新404
【src/router/index.js】import Vue from 'vue';import Router from 'vue-router';Vue.use(Router);const router = new Router({ ... mode: 'history', // 刷新404 mode: 'hash' // 可以解决404，但是hash路由不利于SEO})export default router;...
2022-04-15 22:57:38
93
原创 Vue SEO优化之预渲染
预渲染服务端渲染 优 - 首屏加载快（HTML在后端完成，前端请求JS/CSS资源即可） - 利于SEO 缺 - 传输数据量大 预渲染: 针对路由生成HTML 原理: 打包时模拟浏览器提前访问路由对应的页面，生成html文件 优: 有多个界面，利于SEO 缺: 首屏加载慢 服务端渲染：新闻、电商等重SEO客户端渲染：强交互、不重SEO预渲染：只需改善少数页面的SEO【安装】vue add prerender-spa【vue.config.js】
2022-04-15 22:45:38
370
原创 Jquery + dom-to-image 无损打印页面内容、保留页面样式
装插件jquery：yarn add jquerydom-to-image：yarn add dom-to-image把jQuery.print.js 依赖包放到项目里import $ from 'jquery';function getjQueryObject(string) { // Make string a vaild jQuery thing let jqObj = $(""); try { jqObj = $(string) .clone(..
2021-12-30 11:48:35
604
原创 HTML5 ＜track＞ 给视音频添加字幕
灵感来源：https://www.zhangxinxu.com/wordpress/2018/03/html5-video-webvtt-subtitle/HTML5 可以用 <track> 标签 给 <video> 或 <audio> 添加字幕，字幕格式有 WebVTT(.vtt)，TTML(.xml)格式，WebVTT语法简单，推荐使用<video controls src="https://interactive-examples.mdn.
2021-12-20 17:08:57
680
1
原创 link rel=alternate 实现网页主题切换
灵感来源：https://www.zhangxinxu.com/wordpress/2019/02/link-rel-alternate-website-skin/MDN：https://developer.mozilla.org/zh-CN/docs/Web/CSS/Alternative_style_sheets换皮肤的一些方法切换类名<style> .light { background-color: #fff; color: #000; } .
2021-12-17 17:47:05
629
原创 CSS 实现数据埋点上报
灵感来源：https://www.zhangxinxu.com/wordpress/2018/12/css-data-report-html-validate/测试场景统计某些元素的使用率统计某种字体的支持率统计CSS3的支持率统计某些css属性的支持率<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title.
2021-12-16 15:01:21
98
原创 ＜meter＞标签实现 密码强度效果
灵感方法来源：https://www.zhangxinxu.com/wordpress/2021/11/html-meter-password/meter标签 + zxcvbn算法<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body> <inpu.
2021-12-10 17:33:42
533
1
翻译 styled-components 的用法
用于给标签或组件添加样式给标签或组件添加样式import styled from 'styled-components'// styled.button : 给button标签添加样式 const Button = styled.button` background: palevioletred; border-radius: 3px; border: none; color: white;`// styled(Button) : 给Button组件添加样式 const T
2021-11-28 22:56:53
1297
原创 vuepress 使用 less
安装lessyarn add -D less-loader less在组件中使用less.vuepress/components/我自己写的组件<style lang="less"> /* 以下为主要代码 */ .container { position: relative; width: 1000px; height: 600px; background-image: url("./images/bg.j
2021-11-24 10:47:26
504
原创 发布 VuePress 网站到 github
省略新建github仓库、创建vuepress项目修改 docs/.vuepress/config.jsmodule.exports = { ... // 如果你打算发布到 https://<USERNAME or GROUP>.gitlab.io/，则可以省略这一步，因为 base 默认即是 "/" // 如果你打算发布到 https://<USERNAME or GROUP>.gitlab.io/<REPO>/（也就是说你的仓库在 https:
2021-11-17 15:06:14
319
转载 HTML meta标签合集
常用的标签<meta charset="utf-8"><meta name="author" content="作者"><meta name="keywords" content="HTML,CSS,JAVASCRIPT,PHP"><meta name="description" content="文章的描述">适配移动设备<-- initial-scale - 初始的缩放比例 minimum-scale - 允许用户缩放到的最小比例
2021-11-11 11:36:43
35
原创 H5 认识桌面通知 - Notification
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body> <button onclick="getPermission()"> 获取通知权限 </button></body></html><
2021-11-09 16:08:38
688
原创 Antd DatePicker之旬查询（本月上旬、本月中旬、本月下旬）
需求实现旬查询，本月上旬为1-10号，本月中旬11-20号，本月下旬21-月底由于Antd 3.x 的RangePicker没有上月、下月、上年、下年的点击回调，我不能判断当前是哪年哪月，时间范围快捷选择不能动态改变，所以我用监听DOM节点实现代码.main-container { :global { /* 禁用日历日期的点击 */ .ant-calendar-tbody { pointer-events: none !important; } /*
2021-08-18 10:08:19
541
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人