等下吃什么？-CSDN博客

前端跨页面通信的几种方式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 1362

原创 fabric.js 交互式的canvas

fabric.js 交互式的canvas。

2022-09-09 11:23:02 592 1

原创浏览器API 文字转语音

浏览器API，实现文字转语音

2022-08-17 21:31:45 859

原创 luckysheet的一点使用心得

luckysheet的一些使用心得

2022-08-15 23:52:59 6980 4

原创 input placeholder 文字提示样式

input placeholder 文字提示样式。

2022-08-07 22:00:38 232

原创 Vant picker组件多列联动

Vant picker组件多列联动

2022-07-30 15:37:44 1706

原创【face-api.js】前端实现，人脸捕获、表情识别、年龄性别识别、人脸比对、视频人脸追踪、摄像头人物识别

face-api.js，实现人脸捕获、人脸识别、表情识别、年龄性别识别、视频人脸追踪、摄像头人物识别

2022-07-27 21:16:50 5508 1

原创 vue-3d-model 使用总结

vue-3d-model 使用总结

2022-06-05 14:53:38 6692 11

原创 Vue 插值语法中用可选链

Vue 插值语法中用可选链

2022-06-02 17:05:31 494

原创 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 286

原创 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 1354

原创 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 181

原创前端数据埋点

常见的埋点用户某个icon点击次数、观看某个视频的时长埋点的作用大数据杀熟，多次访问后涨价大量用户在5分钟时发送了弹幕，判断这是视频的精彩瞬间，截取这一段来做推广埋点分类展现埋点：服务端记录响应的内容（页面展现的内容信息）曝光埋点：屏幕有限，内容无限，记录用户实际看到的交互埋点：记录用户点赞、播放、暂停等数据监控（监控用户行为）PV（page view）：页面浏览/点击量UV（user view）：访问站点/新闻的不同IP地址人数用户通过什么入口来访问该网页用户在页面中触发的

2022-05-09 00:23:34 592

原创谷歌浏览器调试技巧

快速重发请求![image.png](https://img-blog.csdnimg.cn/img_convert/c8f29854a3b44dc604fb39ad7a387867.png#clientId=u37dfe73e-2717-4&crop=0&crop=0&crop=1&crop=1&from=paste&height=600&id=ua62309ee&margin=[object Object]&name=image.

2022-05-08 00:04:36 152

原创 TinyMCE 自定义视频插入按钮

tinymce.PluginManager.add('simpleMedia', function(editor) { 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 702

原创 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 422

原创 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 400

原创 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 47

原创 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 119

原创 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 495

原创 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 798

原创 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 1602 1

空空如也

空空如也