自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(107)
  • 收藏
  • 关注

原创 vite+vue+ts+element-plus从零开发管理后台框架(22)-路由组件缓存

现在虽然缓存了,但要在关闭页签时清除缓存,免得不能加载新数据。一开始加载然后缓存,关闭页签后重新打开又重新加载。不管切换几次它都只加载了一次,说明缓存成功了。加一,这样它下次打开时就会重新加载。切换几次就加载了几次。,给每个路由配置一个。方法,即在关闭时路由。,添加一行调试信息。

2025-03-26 10:45:21 191

原创 vite+vue+ts+element-plus从零开发管理后台框架(21)-多页签点击切换

浏览器测试点击不同的页签可以切换了。

2025-03-13 14:03:43 121

原创 vite+vue+ts+element-plus从零开发管理后台框架(20)-多页签移除和跳转

浏览器测试应该可以正常关闭页签,关闭后会跳转前一个页签的路由,并且当只有一个页签时不会显示关闭按钮。时不能移除,添加移除事件监听。

2025-03-13 14:02:48 252

原创 vite+vue+ts+element-plus从零开发管理后台框架(19)-多页签

发现多页签正常显示了,并且当页签超过内容时鼠标移上去会显示滚动条。,可以设置任意值,如果不设置布局就会出问题。,在合适的时机插入页签数据。下最后面添加如下代码。

2025-03-12 15:04:38 322

原创 vite+vue+ts+element-plus从零开发管理后台框架(18)-主颜色优化

发现鼠标滑过后颜色出问题了,这是因为按钮样式使用了主颜色相关的变量,而主颜色相关的变量不止。所以我们要把这些主颜色相关的变量都动态设置。刷新浏览器,现在发现主颜色及相关的。,添加一个主颜色的按钮。,添加如下辅助方法。

2025-03-12 15:03:06 390

原创 vite+vue+ts+element-plus从零开发管理后台框架(17)-主颜色动态设置

之前的主颜色是静态设置的,这里通过颜色选择器选择颜色动态设置。

2025-03-10 15:57:54 730

原创 vite+vue+ts+element-plus从零开发管理后台框架(16)-主颜色设置

添加如下样式,自定义一个主颜色,在亮色和暗黑模式下都使用这个主颜色。我们再换个主颜色比如红色看下。

2025-03-10 15:57:06 342

原创 vite+vue+ts+element-plus从零开发管理后台框架(15)-暗黑模式

后再刷新,发现网页变成了亮色模式。这是因为模式是在主页视图初始化的,我们应该在根视图初始化。再重复上面的步骤,发现问题已经解决了。点击切换模式开关已经可以切换模式了。先设置成暗黑模式,浏览器访问。段,初始化亮色和暗黑模式。,引入暗黑模式样式文件。下最前面添加如下代码。

2025-03-06 13:46:35 611

原创 vite+vue+ts+element-plus从零开发管理后台框架(14)-全屏切换

现在点击这个图标就能进入和退出全屏了。下最前面添加如下代码。

2025-03-06 13:45:37 327

原创 vite+vue+ts+element-plus从零开发管理后台框架(13)-个人信息

编辑template段修改如下。段引入并实例化router,再添加方法处理下拉菜单按钮事件。段修改如下。

2025-03-05 16:30:53 280

原创 vite+vue+ts+element-plus从零开发管理后台框架(12)-logo和标题

编辑template段修改如下。logo和标题全部在标签下,即点击的时候会跳转到这个路由,展开状态下显示logo和标题,折叠状态下只显示logo。段修改如下,这里要注意route-link渲染之后就是a标签。

2025-03-05 16:29:49 156

原创 vite+vue+ts+element-plus从零开发管理后台框架(11)-菜单展开折叠状态持久化

现在当我们把菜单折叠然后再刷新浏览器,菜单又回到默认的展开状态了。我们要把展开折叠状态持久化,让它在下次进入时为关闭前的状态。为了实现这个目标,我们要引入pinia这个依赖以及它的持久化插件。

2025-03-04 14:37:16 565

原创 vite+vue+ts+element-plus从零开发管理后台框架(10)-菜单展开折叠状态切换

修改如下,即取消了背景色,使用。段图标属性,添加点击事件回调。属性设置了图标大小。段添加点击回调函数。

2025-03-04 14:36:13 442

原创 vite+vue+ts+element-plus从零开发管理后台框架(09)-动态设置侧边栏和顶部左

它有点太宽了,我们设置它的宽度为。通过调试工具得知菜单展开时宽度为。通过调试工具得知菜单折叠时宽度为。通过上面得知菜单展开时的宽度为。段侧边栏和菜单修改如下。

2025-03-03 14:11:11 357

原创 vite+vue+ts+element-plus从零开发管理后台框架(08)-顶部整体布局

顶部整体使用左中右的布局。左侧宽度跟菜单宽度一样,如果菜单未折叠就显示后台logo和后台名称,如果折叠了就只显示后台logo。右侧内容自适应,主要是显示系统工具按钮和用户信息。中间使用剩余空间,主要是显示菜单折叠按钮和多页签。

2025-03-03 14:10:12 475

原创 vite+vue+ts+element-plus从零开发管理后台框架(07)-主页内容布局

浏览器查看,当内容超过布局时有两个问题。一是滚动时会带动顶部和侧边栏滚动,二是滚动条太丑了。

2025-02-28 15:27:36 246

原创 vite+vue+ts+element-plus从零开发管理后台框架(06)-菜单和路由动态生成

因为权限的问题,角色不同显示的菜单也不一样,所以需要动态生成。

2025-02-28 15:26:51 343

原创 vite+vue+ts+element-plus从零开发管理后台框架(00)-说明

公众号获取项目源码(项目源码是按照教程步骤编写出来的,可以略过直接阅读后面章节)Node.js v20.11.1,安装参考。获取源码后,解压压缩包并进入。目录,执行如下命令。

2025-02-27 18:18:41 990

原创 vite+vue+ts+element-plus从零开发管理后台框架(05)-菜单和路由

发现菜单正确渲染出来并且点击菜单子路由跳转后。

2025-02-27 18:12:21 383

原创 vite+vue+ts+element-plus从零开发管理后台框架(04)-整体布局

保存后再查看浏览器,发现高度已经铺满了。,会发现高度没有铺满。

2025-02-27 18:11:27 259

原创 vite+vue+ts+element-plus从零开发管理后台框架(03)-路由

或其他任意不存在的路由网页都会显示。

2025-02-27 18:10:29 132

原创 vite+vue+ts+element-plus从零开发管理后台框架(02)-路径别名配置

路径别名是为了方便模块文件引入,比如有这样一个模块。如果没有路径别名,可能有的是,有的是这样引入。而有了路径别名,不管当前模块文件在哪个路径,都可以统一用这样的方式引入。

2025-02-27 18:09:35 222

原创 vite+vue+ts+element-plus从零开发管理后台框架(01)-初始化

字段添加如下配置,支持。

2025-02-27 18:08:32 327

原创 cocos creator从零开发简单框架(完结)-状态机

状态机的核心代码就这两个类,下面写状态机的示例,控制一个方块左右和上下运动。总共两个状态,一个状态控制方块左右运动,一个状态控制方块上下运动。不知道是我理解出问题了还是 Cocos Creator 这里有问题。郁闷,代码里注释的部分即状态机退出时如果关闭键盘事件监听就会出问题,比如。,状态 key 定义,内容如下。即设计分辨率大小,颜色修改为淡黄色。,左右运动状态,内容如下。,上下运动状态,内容如下。,状态管理器,内容如下。,状态基类,内容如下。的按钮用来关闭面板。的按钮,再创建一个名为。

2025-02-21 13:00:01 603

原创 cocos creator从零开发简单框架(28)-多场景支持

因为框架和核心组件在初始化和使用的过程中已经做了缓存的清除和节点是否有效的判断,所以多场景的支持是非常简单的。只需要在场景加载成功后调用。

2025-02-21 12:59:08 200

原创 cocos creator从零开发简单框架(27)-核心Wait

大小 设置为 750 x 1334,颜色 设置为 黑色,透明度Opacity 设置为 160。按钮,正确情况下会弹出。目录下并从场景删除。

2025-02-21 12:58:10 131

原创 cocos creator从零开发简单框架(26)-核心Tip

Size H 设置为 100,颜色 设置为 黑色,透明度Opacity 设置为 160,挂载。事件,这是因为程序在初始化的时候要确认核心的资源都是加载成功的。因为都是黑色背景所以效果不明显,可以在。脚本来初始化,并在初始化完成后发送了。方法,添加核心组件初始化代码。按钮,正确情况下会弹出。Label (文本)目录下并从场景删除。

2025-02-21 12:56:53 262

原创 cocos creator从零开发简单框架(25)-多相机处理

这样的功能,每个相机渲染的内容不一样,即。对象以外的所有对象,对象,我们要设置所有。

2025-02-20 15:24:01 400

原创 cocos creator从零开发简单框架(24)-定时管理器

这些定时接口,这样框架就需要提供一个自己的定时管理器。获取上一帧到这一帧的时间,内容如下。,这是单例基类,内容如下。对应的脚本是普通的类而不是。的组件,所以不能使用组件的。

2025-02-20 15:22:41 218

原创 cocos creator从零开发简单框架(23)-Panel事件处理

抖音小游戏上线有倒计时类的程序,如果弹出了窗口,要求暂停倒计时,窗口关闭后继续倒计时。未注册事件日志输出(因为有的平台不需要监听这两个事件)。

2025-02-20 15:21:47 187

原创 cocos creator从零开发简单框架(22)-事件管理器

事件管理器一般用于各模块代码之间的解耦,提高代码的可维护性。

2025-02-20 15:20:53 141

原创 cocos creator从零开发简单框架(21)-Panel接口完善

【代码】cocos creator从零开发简单框架(21)-Panel接口完善。

2025-02-20 15:19:58 115

原创 cocos creator从零开发简单框架(20)-Panel从场景加载

是跟其它方式一样简单的,这里是因为这种加载方式可能不常用,所以就单独新建一个场景来测试。外的区域也能正常关闭面板。按钮就能打开红色面板了,再点击。面板并把背景色设置为红色。这里要说明一下,从场景加载。场景运行程序,最开始只有。的按钮,再新建一个名为。

2025-02-19 16:11:53 294

原创 cocos creator从零开发简单框架(19)-Panel从Bundle加载

并修改背景颜色为绿色(不是必须,只是用来区分黄色面板)。配置为 Bundle。

2025-02-19 16:10:19 405

原创 cocos creator从零开发简单框架(18)-Panel缓存

先是打开,过 1 秒后又自动关闭,再看控制台,发现。这个节点还存在,但是是隐藏的,说明缓存成功了。设置是否缓存的选项,当开启缓存时关闭。切换频繁,为了避免频繁加载资源,给。方法,判断是否开启了缓存。,开启缓存,内容如下。对象隐藏,打开时显示。

2025-02-19 16:09:22 326

原创 cocos creator从零开发简单框架(17)-Panel自定义显示

虽然框架已经提供了几种显示方式,但对程序来讲是远远不够的,所以要有自定义显示方式。按钮,发现黄色面板打开时同时有。

2025-02-19 16:08:26 362

原创 cocos creator从零开发简单框架(16)-Panel位移显示

的位移显示包括从 上、下、左、右 到中间的移动,因为只有初始点位置不一样,这里抽成一个方法。按钮,发现黄色面板从底部移动到中间了,再点击关闭面板,又从中间移动到底部了。按钮,发现打开和关闭不是硬生生地移动效果了。

2025-02-19 16:07:34 237

原创 cocos creator从零开发简单框架(15)-Panel缩放显示

的打开和关闭是直接显示和隐藏节点,本章添加一个打开时从中间放大,关闭时从中间缩小的效果。按钮,发现黄色面板从中间慢慢变大显示了,再点击关闭面板,又从中间慢慢缩小隐藏了。

2025-02-18 13:00:55 236

原创 cocos creator从零开发简单框架(14)-Panel遮罩

按钮能够点击,其它按钮都是不能点击了的。其实这个原理很简单,就是在面板的最下层生成一个透明的跟程序窗口一样大小的节点,再添加。按钮以外的地方,面板没任何反应,但点击黄色面板外的地方,就会关闭黄色面板了。半透明遮罩跟其它两个不一样,它会在面板显示完成后再出现,在面板关闭时先隐藏。按钮,发现面板既有半透明又能点击面板区域外关闭面板了。遮罩类型不仅可以单独设置,还可以以组合的方式设置。这个组件,这样就能阻止它下层所有的节点事件了。,增加遮罩相关成员变量及初始化方法。界面后,如果点击黄色面板上。

2025-02-18 13:00:02 553

原创 cocos creator从零开发简单框架(13)-Panel打开关闭

这一步调用比较繁琐,二是打开面板后还能点击黄色面板区域以外的按钮。我们先解决第一个问题,第二个问题下个章节处理。按钮,也能正确关闭面板。虽然面板的打开和关闭都正常了,但还存在两个问题,一是。关闭面板,发现是一样的效果,因为目前面板打开和关闭就是设置面板为。的显示方式和遮罩类型,遮罩类型可以叠加,即可同时拥有。,再次运行程序,一样能正确关闭面板。目录下并从场景删除。

2025-02-18 12:59:03 740

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除