16k 字 15 分钟

封装组件，支持单选，多选，搜索，根据节点 id 默认选中对应的节点，勾选数据事件触发回调

效果图 (会不断更新 和修复一些 BUG 记得回来看看哦)

认真看组件配置属性，特别是传值的时候 defaultProps 配置的展示 key，因为最后有模拟 JSON 数据所以文章有点长

多选效果图：单选效果图：
imgimg

2.2k 字 2 分钟

# 前言 首先， Vite 中没有 require 相关方法，因为它默认支持 ESM 方式加载模块！ 所以，我们要理清如下两个方法： # 方法 require () Node.JS 原生方法 ，以 CommonJS 方式加载模块 / 文件 / 图片； Webpack 默认支持 ， Vite 不支持； # 方法 require.context () Webpack 特定方法，此方法可实现自定义上下文； Vite 不支持； 但 Vite 提供解决方案，请接着往下看！ # 解决方案 # require () 加载模块 报错 require 未定义 Uncaught (in promise)...
782 字 1 分钟

# 前言 开发基于 Vite + Vue3 的组件库，多个 .vue 文件需要动态加载！ 注意 import.meta.globEager 已经弃用，请使用 import.meta.glob 来代替！ # 使用 Glob # 异步方式 代码第 1 行，注意使用两个 **，匹配当前目录及其嵌套的全部子目录下的文件； 代码第 4 行，异步使用 Promise 加载，所以要在 then 中获取真正的组件对象； const modules = import.meta.glob('./src/components/**/*.vue');for (const path in...
294 字 1 分钟

fixedStep() { this.$nextTick(() => { this.tableData.map(item => { this.batchCompu.forEach(v => { item[`batch${v}`] = (Number(item.num) + (v - 1) * Number(item.step)).toFixed(this.digits) }) return { ...item }...
258 字 1 分钟

在使用 vxe-gantt 制作甘特图时，将 options 内容里面的高度设置为 height：100%；时，滚动条不能正确反应高度距离。 试了将如下方法皆无效： 父元素设置为固定高度 所有父元素如果使用的是拉伸 flex/grid 时，设置 min-height: 0; 用 nextTick 保证在所有页面元素之后渲染 最后，解决办法： 将 .vxe-gantt--gantt-container 按如下设置： ::v-deep .vxe-gantt--gantt-container { height: 100% !important;}
3.1k 字 3 分钟

# 方法一：使用 border (常见)

【解释】不设置宽高，用边框大小控制三角型大小

【分解步骤】

# 设置一个 div 不设宽高

【示例】

<style>
    #triangle{
        width: 0;
        height: 0;
        border: 100px solid;
        border-color: orangered skyblue gold yellowgreen;
    }
</style>

img

3.2k 字 3 分钟

# 前端 1. 引入 jsencrypt # 使用 npm 引入cnpm install jsencrypt2. 创建通用的工具 JS 公钥可以通过此网站在线生成 在线生成公钥私钥对 示例代码使用的密码格式： 密钥长度：1024 bit 密钥格式：PKCS#8 注意：当使用 IDE 将密钥转换成一行时，小心换行符，有的 IDE 不显示。此时可以将文本粘贴到 Chrome Console 检查！ import &#123; JSEncrypt &#125; from 'jsencrypt'/** * 公钥是通过 base64 加密转化的 *...
329 字 1 分钟

报错原因：怕全局 “this” 与局部变量发生混叠。 解决：按照 eslint 官方给出的解决方式在 .eslintrc.js 文件中备注 this 可用的局部变量名称 &#123; '@typescript-eslint/no-this-alias': [ 'error', &#123; allowDestructuring: false, // Disallow `const &#123; props, state &#125; = this`; true by default allowedNames:...
3k 字 3 分钟

作为一个 3D 的项目，从用户打开页面到最终模型的渲染需要经过多个流程，加载的时间也会比普通的 H5 项目要更长一些，从而造成大量的用户流失。为了提升首屏加载的转化率，需要尽可能的降低 loading 的时间。这里就分享一些我们在模型加载优化方面的心得。

# 一、前言

近段时间，我们使用 three.js 完成了 vivo 拟我形象的开发工作，大家可以在 vivo 账号中拟制属于自己的 3D 形象，也可以保存作为自己的头像名片。

作为一个 3D 的项目，从用户打开页面到最终模型的渲染需要经过多个流程，加载的时间也会比普通的 H5 项目要更长一些。然而过长的等待时间会造成大量的用户流失，这部分用户没有体验到具体的功能就退出了页面非常的遗憾，为了提升首屏加载的转化率，需要尽可能的降低 loading 的时间。这里就分享一些我们在模型加载优化方面的心得。

1.8k 字 2 分钟

threejs 使用 stat.js 插件用于性能监听，插件最新下载地址为：http://github.com/mrdoob/stats.js FPS Frames rendered in the last second. The higher the number the better. 上一秒帧率，数量越高越好。序号：0 MS Milliseconds needed to render a frame. The lower the number the better. 渲染一帧需要的时间，越低越好。序号：1 MB MBytes of allocated memory. (Run...