最近项目中用到了 ant-design-vue，对于内部系统来说，ant 的风格是比较好的，但是组件的使用比较难自定义，这是我个人一个比较深的感受吧，下面记录一下使用中遇到的一些坑。

dropdown

dropdown 组件的 menu 默认会被添加到 body 元素上，使用默认的设置，在列表中会出现点击之后失去焦点位置偏移的问题，解决这个问题的方法是设置一个 menu 的容器

一、对象初始化

早上例行体验一下在做的项目，看看有什么问题。发现编辑界面上周还好好的，这周打开就报错了，还关不掉弹窗那种，不进发问，Vue 你这是怎么啦？上周还运行的好好的。报错如下:

新加入的团队引入了 KPI 制度，上周开了个会说这周我们要出 KPI。开完会有点懵，这个概念大学的时候上管理学的课程有讲过，不过只是知道大概的概念，其他都还给老师了。同事让我周末想一下自己的 KPI，我也不知道要想啥，我当时就觉得说明我做了啥就行了。周一对 KPI，我只给了两点，同事说我这个太简单，请教了同事和经历过 KPI 制度的同学，说这个要写的复杂点，高大上一点，多点。于是我就从两条扩展到了 9 条，又拿给同事和同学看，同学说可以，挺具体的，就是主旨不是很明确，太散，同事说条目太多了。接着我又收窄了一点，合并成了五条，同学说作为 KPI 差不多了，以他们 OKR 制度的角度看还是差一点，没有明确的的结果和数据说明。

阮一峰在上周的周刊中提到他的网站因为广告拦截器的原因，导致有读者看不到页面的部分内容，并且找到了相应的针对他的个人网站的拦截规则集。

这里个人认为一点点可有可无的广告对于读者而言也没有多大的影响，何况这只是周刊中的一些文字广告，相比某些网站的链接，弹框等影响阅读体验的广告好多了。最让我觉得不可思议的是广告拦截软件的权限竟然这么高，甚至可以禁止 js 脚本的执行，这是让人觉得很不可思议的，要知道前端的交互全靠 js，没了 js 就会回到远古网页的时代，哪有什么体验可言，这对于网站开发者来说真的是好不尊重了。

在讲模块机制之前，先来说说 CommonJs 规范，我们知道在打包的时候经常会看到 cjs 这个选项，这里的 cjs，我自己之前是一直以为就是commonJs，实际上这是 node 对 CommonJs 的实现，是 node 的模块机制。

ComonJs 规范范围除了模块规范之外，还有二进制、Buffer、字符集编码、I/O 流、进程环境、文件系统、套接字、单元测试、Web 服务器网关接口以及包管理等规范。

最近有个需求，要求在部署过程中离开界面与用户有一个交互，询问用户是否离开页面，然后还给出了相应的样式让我实现。我寻思着关闭窗口，意味着页面销毁，执行栈都不存在了，何谈交互呢？于是我果断的拒绝了这个需求，并评论道无法实现。

后来跟同事交流了一下，同事说之前遇到过类似的需求，有相应的回调函数可以做到，去 mdn 找了下，还真有，但是很遗憾，不能自定义样式，而且在不同的浏览器可能表现不一致。跟产品沟通了下，说明了这种情况，能接受，就加上了。

圆环进度条是我们工作中经常会碰到的一个需求，首先我们来看看要实现一个圆环我们会怎么做？

<div class="wrapper">
  <div class="circle"></div>
</div>

最近发现很多用过的东西过后很容易忘记使用姿势，久了不用就要去翻一翻文档，有一些知道怎么用，但是记忆也很模糊。于是我就想先从一些基础的知识写起，探究知识点背后的运作原理，加深自己对知识的理解。

说到 instanceof，我们大体知道其使用场景，用于检测对象的具体类型。我们一般会怎么用这个操作符呢？

看到张鑫旭大佬的文章讲禁止图片拖动的，我看了看手头的项目，拖了拖一些 icon，拖动会有虚影。于是准备把图片的拖动禁用掉，第一反应是在 App 文件中等视图加载完毕，获取所有的图片，设置为不可拖动，一劳永逸

mounted() {
  this.$nextTick(() => {
    const imgs = document.querySelectorAll('img');
    imgs.forEach((el, i) => { imgs[i].draggable = false; });
  });
}

滚动条样式在火狐、ie、chrome 等浏览器的样式是不一致的，工作中我们经常需要根据自己的需要定制滚动条，这里给出一个兼容的写法

/* The emerging W3C standard
that is currently Firefox-only */
* {
  scrollbar-width: thin;
  scrollbar-color: blue orange;
}

/* Works on Chrome/Edge/Safari */
*::-webkit-scrollbar {
  width: 12px;
}
*::-webkit-scrollbar-track {
  background: orange;
}
*::-webkit-scrollbar-thumb {
  background-color: blue;
  border-radius: 20px;
  border: 3px solid orange;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: rgb(14, 77, 136);
}