思路解析 文字内容的父级标签li设置line-height: 2;、overflow: hidden;、height: 2em;，因此 li 标签的高度是当前元素字体大小的2倍，行高也是当前字体大小的2倍，同时内容若溢出则隐藏。 li 标签内部有两个 span 标签，二者的作用分别是：类名为.txt的标签用来展示不需要省略号时的文本，类名为.title用来展示需要省略号时的文本，具体是如何实现的请看第五步。 给.title设置伪类before，将伪类宽度设置为50%，搭配浮动float: right;，使得伪类文本内容靠右，这样设置后，.title和伪类就会各占父级宽度的一半了。 .title标签设置text-align: justify;，用来将文本内容和伪类的内容两端对齐。 给伪类before设置文字对齐方式direction: rtl;，将伪类内的文本从右向左流动，即right to left，再设置溢出省略的css样式就可以了。 .title标签设置了top: -4em,.txt标签设置max-height: 4em;这样保证.title永远都在.txt上面，当内容足够长，.t ...

在 Vue 中使用 ECharts 组件时，遇到路由跳转后图表不显示的问题可能是因为组件销毁和重新创建的原因。当你从一个页面切换到另一个页面时，旧页面上的组件会被销毁，并在新页面上重新创建。 <template> <div> <div ref="chartContainer"></div> </div></template><script>import echarts from 'echarts';export default { data() { return { myChart: null, }; }, mounted() { this.initChart(); }, methods: { initChart() { const chartContainer = this.$refs.chartContain ...

整理几款小而美的前端库，接入成本很低又能满足日常开发需求，同时无论是 npm 方式引入还是直接复制到本地使用都可以。 radashradash是一个实用的工具库，提供更多新功能（tryit，retry 等函数），源码可读性高。同时支持 TypeScript，并且旨在提供强大的函数来解决 JavaScript 中的现代问题。 use-debounceuse-debounce是一个 React Hook Debouce 库，它的体积小，不到1KB，与 underscore / lodash impl 兼容，一次学习，随处使用，并且服务器渲染友好。 timeago.jstimeago.js是一个格式化日期时间库，它非常简洁、轻量级，不到2KB。能够将 datetime 时间转化成类似于“3小时前”的描述字符串，同时支持多语言、自动实时更新、npm 方式和浏览器 script 方式，并且测试用例完善，执行良好。 react-usereact-use是一个强大的 React Hook 库，提供了各种工具函数和副作用钩子，如 createMemo、useToggle、useBoolean ...

在绝大多数情况下，Vue 推荐使用模板语法来创建应用。然而在某些使用场景下，我们真的需要用到 JavaScript 完全的编程能力。这时渲染函数就派上用场了。 在Vue中，可以使用渲染函数（render function）来创建Vue组件。渲染函数提供了一种强大的方法来动态构建Vue组件的DOM渲染。 下面是一个简单的例子，使用渲染函数创建一个显示”Hello, Vue!”的组件： Vue.component('hello-component', { render: function (createElement) { return createElement( 'div', 'Hello, Vue!' ); }}); 或者使用ES6的箭头函数简化代码： Vue.component('hello-component', { render: (createElement) => createElement( ...

为什么要分包？因为小程序有体积和资源加载限制，各家小程序平台提供了分包方式，优化小程序的下载和启动速度。 Uni-app分包的教程可以参考以下步骤： 在原应用的pages目录同级目录下创建新的目录，例如命名为package1，根据需要创建更多这样的目录，例如package2、package3等。 将想要包含在分包中的模块复制到新创建的目录中，这些模块原本位于pages目录中。如果需要，可以创建一个pages目录，但不是必须的。 修改manifest.json文件，增加“optimization”配置，设置“ subPackages `”为true，以开启分包优化。 修改pages.json文件，在pages.json中添加一个名为“ subPackages ”的数组，其中包含“root”和“pages”两个参数，“root”指定子包的根目录，“pages”指定子包包含的页面。 访问分包中的页面时，可以通过构建一个URL来完成，该URL由分包的根目录和路径组成，例如，要访问package1中pages目录下的myDaily页面，可以使用以下代码：uni.navigateTo ...

Pinia 和 Vuex 都是Vue.js的状态管理库，但它们在设计、功能和使用方式上有一些关键的区别： 设计理念： Pinia是一个轻量级的状态管理库，专注于提供一个简单的API来管理应用程序的状态。它基于Vue 3的Composition API构建，这使得它更加灵活和可组合。 Vuex则是一个更完整的状态管理库，提供了模块化、插件和严格模式等功能。它基于Vue 2的Options API构建，因此在某些方面可能会受到限制。 状态管理方式： Pinia采用了类似于React Hooks的方式来管理状态，使用state、getters和action来修改state数据，没有mutation的概念。 Vuex采用了一种基于mutations和actions的方式来管理状态，这可能需要更多的代码来实现相同的功能。 实例化支持： Pinia支持多个store实例，这使得它更加灵活，适合于大型应用程序。 Vuex只支持一个store实例，可能不太适合需要多个独立状态管理的场景。 生态和稳定性： Pinia是一个相对较新的状态管理库，因此它的生态系统可能不够完善，可能存在一些 ...

在Vue中，绑定class和style可以通过对象语法或数组语法来实现。 对象语法适用于静态类名，数组语法适用于条件类名。 绑定静态类名：<div v-bind:class="{ active: isActive, 'text-success': hasSuccess }"></div> export default { data() { return { isActive: true, hasSuccess: false } }} 绑定条件类名数组：<div v-bind:class="[isActive ? activeClass : '', errorClass]"></div> export default { data() { return ...

PageSpy 是一款用来调试远程 Web 项目的工具。基于对原生 API 的封装，它将调用原生方法时的参数进行过滤、转化，整理成格式规范的消息供调试端消费；调试端收到消息数据，提供类控制台可交互式的功能界面将数据呈现出来。 何时使用？任何无法在本地使用控制台调试的场景，都是 PageSpy 可以大显身手的时候 ！一起来看下面的几个场景案例： 本地调试 H5、Webview 应用： 以往有些产品提供了可以在 H5 上查看信息的面板，但移动端屏幕太小操作不便、显示不友好，以及信息被截断等问题； 远程办公、跨地区协同： 传统沟通方式如邮件、电话、视频会议等，沟通效率不高、故障信息不全面，容易误解误判； 用户终端上出现白屏问题： 传统定位问题的方式包括数据监控、日志分析等，这些方式依赖排障人员要理解业务需求场景、技术实现； 如何使用？为了数据安全和方便您的使用，我们提供完整的、开箱即用的部署方案。本地化部署完成后，顶部会出现 接入SDK 菜单，点击菜单查看如何在业务项目中配置并集成。 使用 Docker 部署 docker run -d --restart=always -p 67 ...

Markdown 是一种轻量级标记语言，它的设计初衷是为了让人们能够更加方便地编写格式化文本，同时又不需要像 HTML 那样使用复杂的标签和属性。它使用简单的符号标记不同的标题，引用、列表、代码块等，然后通过转换器转换成 HTML 文档，或者转换成其他格式的文档。 Markdown标题使用#表示，#的数量表示标题的级别，例如# 表示一级标题， 表示二级标题，以此类推。一般来说，我们只会使用到六级标题，因为六级标题以下的标题在网页中显示的字体都是一样的，没有区别。 # 一级标题## 二级标题### 三级标题#### 四级标题##### 五级标题###### 六级标题 显示效果： 一级标题 二级标题 三级标题 四级标题 五级标题 六级标题 注意：#和标题之间要有空格 Markdown段落直接输入文本即可，段落之间使用空行分隔。 字体Markdown 可以使用以下几种字体： 用1个星号*或底线_表示斜体 用2个星号*或底线_表示粗体 用3个星号*或底线_表示粗斜体 语法格式： *斜体*_斜体_**粗体**__粗体__***粗斜体***___粗斜体___ ...

Multipass 是一款非常轻量级的虚拟机命令管理工具，它支持 Linux、Windows 和 macO S等多平台运行环境。 Multipass 安装在 官网 选择对应该的系统版本下载即可： 我这里选择的Windows版本 注意：你需要 Windows 10 专业版/企业版/教育版 v 1803 或更高版本，或任何带有 VirtualBox 的 Windows 10版本 安装之后，查看自己安装的版本 multipass version Multipass使用创建虚拟机 首先查看可以下载使用的 Ubuntu 镜像 multipass find 运行成功后，可以看到对应的镜像列表，包含各种版本的。 启动实例 multipass launch --name foo 然后下载最新版的 Ubuntu 镜像，之后我们就可以直接使用了。 multipass exec foo -- lsb_release -a 操作虚拟机 查看虚拟机列表 multipass list 查看虚拟机信息 multipass info --all 进入虚拟机使用下面的命令查看虚 ...