weixin_44177413的博客

其实就是里外容器对向滚动，滚动的值为里外容器宽度的差值，如果里容器与外容器等宽，那么差值就为0，视觉上是没有滚动的，就像第一条数据；如果里容器宽度比外容器宽，里容器向左滚动的距离比外容器向右滚动的距离大，就会形成滚动效果，并在里容器translateX为-100%外容器translate为100%时停下，视觉效果就是滚动到文字的最右侧。PS：里容器的float: left;是为了形成块级格式化上下文，避免文字撑不开容器。

先写好两个js文件 直接复制粘贴。

尽量使用width百分比来渲染 尽量不用flex-grow 缩放虽然没问题 但调整浏览器的大小就会有不触发的情况。有个小的地方需要注意 像这种布局。先去mainjs去注册。

上面代码可以计算出文本的宽度 然后圆环图距离左边的位置一般是固定的 我这里得出圆环图中心点距离容器左边框是114px 如图所示。像上图中这样圆环图并不在div的中间时，中心的文本需要居中展示 一开始用left百分比但数据一旦变长或变短就会偏移 像这样。实在是太不美观了 所以我们这里使用动态的left通过文本的长度来计算。999就是你要渲染的值哈 这样就居中拉。所以最终我们可以通过计算得出。

不要用axios发请求 不然处理不了流式数据 我这里使用fetch。首先在对接api时 参数要设置stream: true,然后我们再加一个打字机的光标 用html+css实现。

UI是按照3840*1080进行设计的 要全部正常显示在16:9的电脑上 就会这样。但是高德地图会因为scale还原会变大 目前没找到合适的解决方案 - -肯定是显示不完的 毕竟是按照3840设计的。所以我这边用动态的scale的方式进行处理。然后在data里面定义好数据以及计算属性。这样就可以正常适配屏幕拉。

如果只需要服务端向客户端推送消息，推荐使用SSE。后端使用nodejs+express框架。SSE是基于http/https协议的。SSE比websocket更轻。SSE支持自定义发送的数据类型。前端随便一个HTML都行。IE及小程序不支持SSE。SSE默认支持断线重连。

【代码】前端手写Promise并完美通过promises-aplus-tests 872 项测试。

需求是实时获取后端推送的数据 只收不发。先进行连接 再订阅主题。

这个img的值用img: require("../img/sbhclfx.png"),即可。需求就是这样的哈 拖拽的时候需要有一个预览效果。拖拽的事件:拖拽时动态修改变量值。每个组件应该有自己的img像这样。我们这里使用css的变量来控制。

【代码】前端高德地图导出图片功能。

【代码】vue中使用防抖节流。

思路是通过自定义指令来绑定点击事件，绑定事件后一定要解绑事件不然会内存泄露。

观察者模式，可以监听多个对象，某些需要监听dom大小变化的场景下很便利，还可以配合throttle/debounce进行性能优化。监控页面大小改变通常使用window.resize方法来进行监控。但有时是需要监控一些容器。

这时候我们给表格外面加个盒子 宽度设置100% 绝对定位 然后对最外层盒子设置相对定位就可以了。这里理想效果 用的grid布局(flex布局同样有效)结果宽度设置100%显示的这样。下面的表格拉的很长很长。

前端导出当前页面为PDF或者图片

【代码】前端下载文件方法。

以element框架为例。

给tree组件添加ref然后通过this.$refs.tree.getCheckedKeys()拿到值进行判断。思路是使用自定义表单验证。

思路就是把请求到的数据分别存到两个变量 一个会根据高亮值改变 一个永不改变 然后替换要改变的数据的内容成标签形式 用v-html渲染出来。