hanson247-CSDN博客

原创 vue-trackjs 自定义指令轻松实现前端埋点

vue-trackjs 是一个基于vue自定义指令开发的声明式自动埋点方案，压缩后只有2.5K，对业务代码没有侵入影响。使用localStorage对统计数据进行缓存，默认每60s轮询上报一次数据。入手毫无难度，插件也预留了自定义扩展API，给你充分的发挥空间。前言埋点技术，即在正常的功能逻辑中添加统计逻辑，进行数据收集，后续经过各种自定义的数据整理，为对应的产品提供数据分析，实现数据可视化。常见的前端埋点技术有：代码埋点、可视化埋点、无埋点。代码埋点：手动在需要埋点的节点调用接口发送数据。优.

2021-07-14 23:08:52 3768

原创解决vue中样式不起作用：样式穿透/深度选择器(/deep/)

原因1：组件内部使用组件，添加了scoped属性原因2：动态引入html，也添加了scoped属性；原因3：非以上两种；一、添加了scoped属性:Vue中的scoped属性的效果主要是通过PostCss实现的。以下是转译前的代码:<style lang="less" scoped> .example{ color:red; }</style><template> <div class="example">s

2020-06-09 12:07:54 19303 2

原创一款基于Latex语法和MathJax渲染的零基础公式编辑器，数学公式插件

1. 零基础即可编辑公式2. 支持自定义编辑器配置和风格3. 支持二次编辑公式4. 支持作为插件和富文本编辑器一起使用

2022-04-10 16:47:04 2608 5

原创 MathJax 3 配置和上手渲染数学公式及在Vue中的使用

mathjax是一个用于latex、mathml和ascimath表示法的开源javascript显示引擎。mathjax的3.0版是对mathjax的彻底重写，实现了组件化，可以实现不同需求的定制，使用和配置与mathjax2版本有很大的不同，所以一定要注意版本。最近在重构一个项目时，新增了一个需求支持latex数学公式渲染和编辑。在经过一番调研对比后，目前浏览器兼容性比较好的有两个，分别是KateX和MathJax。性能对比截图MathJax3MathJax2.7KaTex从对比中.

2021-07-18 13:16:36 5795

原创 Typescript实现一个web缓存库 bigbig-cache

最近因为工作需要自己造了很多小轮子，如果放着的话就发霉了，于是就想更新写一个系列博客。先说说为什么要自己造轮子，现在很多第三方库的优点都是“大而全”，但这也会成为缺点。例如，对于一个有特色的项目或者小项目来说，element的很多东西都用不上，为了个弹窗就去引入个element几百K不值当。所以“小而精”就是接下来“小轮子系列”的特色。最近在重构一个项目，其中一个页面里面涉及到多级联动数据切换，每次切换都需要重新调接口取数据，接口响应又不快，体验感贼差。于是就诞生了缓存数据的想法，第一次切换到的组合调.

2021-05-24 23:23:27 353

原创 node.js 自定义项目脚手架

是不是觉得那些会写脚手架的人都是大佬，而自己只会写写页面，调调样式。脚手架太高级了，自己会用就行了。天天都在接触像npm包管理工具，vue-cli，webpack等等。要是自己也能写一个就太棒了，可以减少很多的重复劳动，想想就激动，那么请往下看。技术准备:必备nodejsgithub 账号（远程托管仓库）优化commander模块(命令行参数处理模块)co 模块(异步流程控制模块)co-prompt 模块(消息提示模块)chalk 模块（输出字体颜色模块）常用的node API

2020-09-30 11:22:09 464

原创 vue class风格开发组件 vue-class-component vue-property-decorator vuex-class 解析

vue-class-componentvue-class-component是一个支持es6 class风格来开发组件的vue官方库，并使vue组件可以使用继承、混入等特性。// App.vue<script>import Vue from 'vue'import Component from 'vue-class-component' @Component({ props: { propMessage: String }})export default cla

2020-08-01 18:26:31 7663

原创 vue updated生命周期的使用场景，可以做什么

官方介绍：updated类型：Function详细：由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。当这个钩子被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。然而在大多数情况下，你应该避免在此期间更改状态。如果要相应状态改变，通常最好使用计算属性或 watcher 取而代之。执行依赖于 DOM 的操作，确实让人很疑惑，到底有什么使用场景呢？我思考了很久之后，想到自己之前做的即时聊天项目，打开当前会话加载完消息后需要自动滚动到窗口最底部，

2020-07-25 21:23:00 6171 1

原创 vue 图片加载loading动画及加载出错处理

图片的加载速度往往影响着网页整体的用户体验，尤其对于包含大量图片的网站或者类似微信的会话聊天窗口。对图片添加加载动画，防止出现大面积空白，不失为一个减缓用户焦虑的高效解决方案。vue-image-preview demo地址下面是基于vue自定义指令的实现思路：创建一个自定义指令文件夹directives，新建 imagePreview.jsexport const imagePreview = { inserted(el) { var img = new Image(); im

2020-07-24 22:01:16 1606

原创如何阻止点击其他区域，input框会失去焦点事件

如何阻止点击其他区域，input输入框会失去焦点位置阻止失去焦点通过a标签设置user-select为none：通过js阻止默认事件通过内联js实现在开发过程中，总会碰到以下两个情况：要求点击某个区域，阻止input框 (或者设置了 contenteditable=“true” 的编辑区)失去焦点。要求像微信输入框那种点击选择表情、图片等要求保留原来焦点的位置的情况。因为一失去焦点位置，除非是往最前面或最后面插入，否则要想在原来的地方插入内容是很难的。接下来就分享一下个人的一些方法总结。阻止失

2020-07-21 23:26:00 7107 1

原创 typescript变量声明入门泛型 interface 可索引接口 type

看完这篇typescript变量声明，是时候跟any说再见了～TypeScript 变量声明函数要接收不确定类型的参数ts怎么声明使用对象怎么定义事件Event参数类型vue中怎么定义DOM相关的参数类型开篇呢就先废话一段，写的不好就请各位大佬多多担待。最近面试了好多人，简历都写熟练使用TypeScript，可是聊下来发现声明复杂一点的变量只会any，简直就是来搞笑的！TypeScript 是 JavaScript 的超集，扩展了 JavaScript 的语法，TypeScript中为了使编写的代码

2020-07-04 18:01:34 1262 1

weixin_44041976的博客