tnblog
首页
视频
资源
登录
排名
1
文章数
15030
总访问量
216.3万
粉丝数
30
评论数
120

为什么要用vuex,pinia这类状态管理和直接封装全局方法来使用有什么区别么?有什么好处呢?

vuex,pinia这类状态管理是全局响应式的 [TOC]在 Vue 应用中,使用 Vuex、Pinia 这类状态管理工具,与 “直接封装全局方法”(比如自己创建全局对象管理状态)的核心区别,在于是否能系统性地解决状态管理中的共性问题。它们的优势主要体现在对复杂应用场景的适配性上,具体可以从以下几个角度理解: 1. 状态的 “...

前端 2025-08-28 浏览(19

uni-app 开发 app定位问题,定位权限问题,权限申请里边没有定位的选项。

安卓系统要求 APP 在AndroidManifest.xml中声明所需权限,Uni-app 通过manifest.json配置这些权限(会自动转换为安卓的清单文件)。如果缺少定位权限声明,系统不会在权限管理中显示定位选项。 在manifest.json中修改。勾上这几个权限就行了: 也可以切换到「源码视图」,在”android” -> “permissions”节...

.net 2025-08-28 浏览(22

Windows 系统中 PowerShell 中批量删除指定后缀的文件,比如删除vue3打包生成的.vue.js

PowerShell 中执行: # 进入需要的目录后执行 Get-ChildItem -Path . -Filter "*.vue.js" -Recurse -File | Remove-Item

随笔 2025-08-12 浏览(151

vue3 保持footer 在最底部

flex实现的方式在项目里边的index.html里边加入核心的样式: <!-- 让底部保持在最下方 --> <style> #app { display: flex; flex-direction: column; justify-content: space-between; min-height: 100vh; } </style> index.html完整的代码 &lt...

前端 2025-07-22 浏览(148

Vue3 布局模板,含 Tab 切换、卡片布局、好看的渐变色搭配

效果图: 代码如下,直接复制在vue项目中运行即可:<template> <div class="course-page"> <!-- 学期 Tab 切换 --> <el-tabs v-model="activeTab" class="tab-container"> <el-tab-pane label="第四学期" name="t...

前端 2025-07-21 浏览(404

windows server 端口占用排查, 80端口被占用解决

[TOC]排查80端口的占用确认80端口的占用情况netstat -ano | findstr :80 会发现PID为4,这个是系统进程,不好使用tasklist | findstr <PID>排查了,可以使用netsh http show servicestate查看具体80端口占用的服务 使用netsh http show servicestate看具体80端口占用的服务netsh http show servicestate ...

后端 2025-07-12 浏览(292

.net linq在内存中多字段排序

除了第一个使用oderby之外后面的不能直接在用order by了,会覆盖掉前面的,应该使用ThenBy才行,代码如下: result = result .OrderByDescending(a => a.IsComplete) // 第一排序条件 .ThenByDescending(a => a.IsHotRecommend) // 第二排序条件 .ThenBy(a => a.S...

.net 2025-07-10 浏览(197

element plus upload 常用批量上传逻辑,批量上传附件,存储json字符串的方式

使用存储json字符串的方式添加的时候<template> <el-form-item label="附件资料" prop="attachmentMany"> <el-upload ref="uploadAttachment" class="upload-demo" ...

前端 2025-07-09 浏览(137

vue v-html生成的富文本内容让里边的图片最大宽度为100%

这样生成的内容:<div class="tc-blid-content" v-html="state.subProgram.context"></div> 使用样式直接限制即可:但是要注意不能写在scoped=”scoped”里边,不然不得行 <style lang="scss"> .teacher-training-details-container { .tc-blid-c...

前端 2025-07-07 浏览(342

vscode插件使用记录,插件过期与新插件对应记录

vue相关插件TypeScript Vue Plugin插件过期了,可以换成Vue-Official插件

前端 2025-07-07 浏览(286

vue,js 封装常用工具函数,字符串转bool,字符串转数字

封装字符串转bool,字符串转数字函数/** * 工具函数,字符串转成booler * @param str * @returns */ export function strictStringToBool(str: string): boolean { return str.toLowerCase() === 'true' } /** * 工具函数,字符串转数字 * toNumber('123') // 123 *...

前端 2025-07-01 浏览(319

不出现内部纵向滚动条而是直接撑高了整体出现纵向滚动条的排查方法,

要在内部出现纵向滚动条而不是撑高整体肯定要在某一级定一个高度,比如js动态计算了一个高度获知使用height: calc(100vh - 230px)也可以,然后后面的层级都使用100%就沿用这个高度就行了,但是如果内容超长没有在内部出现纵向滚动条说明某一级没有设置100%,可以一级一级的去看找到这一级加上100%就解决了。

前端 2025-06-10 浏览(438

js,ts,vue循环生成延迟循环,

直接使用setInterval会一直循环不会结束除非手动去结束,可以循环生成n次setTimeout,然后时间的循环每次递增就可以了 const thinkingContent = ref('') const answerContent = ref('') onMounted(() => { let timeout = 0 for (let index = 0; index < 10; index++) { ...

前端 2025-06-04 浏览(387

vue3切换的时候把除了当前点击的都设置为false

页面如下: <div class="lp-ca-item" v-for="(item, index) in kpCaseList" v-bind:key="index"> <div class="lp-ca-title">{{ index + 1 }}、{{ item.name }}</div> <div class="lp-ca-operate"> <div class=&...

前端 2025-06-03 浏览(416

vue3滚动条默认保持在最底部,让滚动条在每次更新内容时保持在最底部

实现思路:更新内容 → 等待 DOM 更新 → 滚动到底部。代码如下: <template> <div class="ac-think-content" ref="contentContainer"> {{ showContent }} </div> </template> <script setup> import { ref, onMounted, nextTick } from '...

前端 2025-06-03 浏览(548

flex布局,左侧文字,右边按钮,确保右侧的多按钮文字不换行,左侧如果文字超出就出现省略号。优先保证右边的文字不换行哇,确保右侧按钮始终在一行显示。按钮样式

view,html结构<div class="lp-ca-item"> <div class="lp-ca-title">2、上传教学内容文档,AI智能提取知识大纲</div> <div class="lp-ca-operate"> <div class="green-but">预览</div> <div class=...

前端 2025-05-29 浏览(411

element plus 组件中的disabled根据情况来决定是否显示,绑定。按钮组件。按钮根据条件来禁用

按钮组件el-button<el-button size="small" :disabled="item.digital_human_status != 2" type="primary" @click.stop="viewHandle(item.id)"> 数字人预览 </el-button>

前端 2025-05-29 浏览(481

vue3左右布局,左右两边宽度不固定,可以拖动中间的分割线实现拖动改变宽度

第一个版本如下<template> <div class="split-panel-container"> <div class="panel-left" :style="{ width: `${leftWidth}%` }"> <div class="panel-content" v-bind:style="isResizing ? noSelectStyle : {}"> ...

前端 2025-05-28 浏览(433

这一生多幸运赶上过你.
排名
6
文章
6
粉丝
16
评论
8
{{item.articleTitle}}
{{item.blogName}} : {{item.content}}
ICP备案 :渝ICP备18016597号-1
网站信息:2018-2025TNBLOG.NET
技术交流:群号656732739
联系我们:contact@tnblog.net
公网安备:50010702506256
欢迎加群交流技术