Home avatar

LZWcc's Blog

Vue 3 中使用 getCurrentInstance 获取全局属性动态设置样式

在 Vue 3 的开发中,我们有时需要通过全局属性来动态设置组件的样式,例如页面的最大宽度和最小宽度。本文将结合一个实际案例,详细讲解如何使用 getCurrentInstance 获取全局属性,并通过动态绑定样式实现需求。


在 Vue 3 中,app.config.globalProperties 提供了一种方式,可以定义全局属性供所有组件访问。这些全局属性可以在组件中通过 getCurrentInstance 获取,并用于动态设置样式或其他逻辑。

以下是一个示例场景:

  • 我们需要设置页面的最大宽度和最小宽度。
  • 这些宽度值是全局定义的,方便在不同组件中复用。

首先,在 main.js 中通过 app.config.globalProperties 定义全局属性 bodyMaxWidth 和 bodyMinWidth:

json-server 常用自定义路由和简单配置

在前端开发中,我们经常需要模拟后端接口进行开发和测试。json-server 是一个非常流行的工具,可以快速搭建 RESTful API。然而,在实际使用过程中,我们可能会遇到各种配置问题。本文将记录使用 json-server 过程中的试错经历,以及最终的解决方案。


在项目中,前端的接口路径通常遵循特定的命名规范,例如:

  • /api/user/register
  • /api/user/search
  • /api/user/delete

然而,json-server 默认只会为 db.json 的顶层键生成路由。如果我们希望模拟这些带有 /api/user/ 前缀的接口,就需要进行自定义路由配置。


最初,我尝试在 db.json 中使用嵌套对象来模拟路径结构:

第五届“计协杯”程序设计竞赛暨ACM实验室招新选拔4月赛--题解

现请你输出指定大小的“ACM”字符串。特别地,我们要求输出的字符串是正方形的(行数和列数相等)。

输入的第一行是一个正整数N(N<=20),表示一共有N组数据,接着是N行数据,每行包含一个正整数M(M<=50),表示一行内有M个“ACM”相连。

输出指定的正方形字符串。