tnblog
首页
视频
资源
登录

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

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

2025-07-01 浏览(15

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

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

2025-06-10 浏览(164

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 浏览(146

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 浏览(165

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

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

2025-06-03 浏览(233

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 浏览(177

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 浏览(184

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 浏览(174

element plus 表格 table 状态解析 el-tag

代码如下: <el-table-column prop="period" label="投放状态" min-width="66px"> <template #default="scope"> <el-tag v-if="scope.row.useState == 1" type="success">正常投放</el-tag> <el-...

2025-05-27 浏览(259

python使用python-docx读取word内容

[TOC]先安装依赖pip install python-docx 段落内容和表格内容分开读取import docx from docx.document import Document from docx.table import Table from docx.text.paragraph import Paragraph def read_word_document(file_path: str) -> None: """读取 Word 文档并输出其内容&q...

2025-05-27 浏览(346

记事本 如何撤销 ctrl+z。撤销后的恢复。 取消撤销

使用 Ctrl+Y 即可

2025-05-23 浏览(218

python安装模块,python安装依赖,python环境安装

方法1:使用pippip install xmltodict 方法2:使用conda(如果你使用的是Anaconda或Miniconda)如果你在使用Anaconda或Miniconda,可以使用conda来安装依赖,比如安装xmltodict: conda install -c conda-forge xmltodict

2025-05-17 浏览(272

element plus 树形 tree 懒加载的树形,如何动态添加节点

思想思路:数据源里边是默认没有children的或者说没有走children这种结构,所以和正常的操作方法还有点不一样,所以应该使用append的方式添加而不使用children的方式添加 代码如下: <template> <div class="container"> <el-tree ref="treeRef" :da...

2025-05-15 浏览(396

vue3 格子报表统计模板

代码如下: <template> <div class="waterFeeStatistics-container"> <div class="term-base-list"> <div class="card-item item-1"> <div class="item-title">海运数量</div> ...

2025-05-05 浏览(294

element plus tree 树形中根据一堆id找到这些id数组中的叶子节点。只根据叶子节点来选中树形

找到id中的叶子节点 let leafIds = [] as any // 过滤掉父节点,只留下叶子节点, 用于回显树形的选中 checkedMenuKeys.forEach((id:any) => { const node = treeRef.value?.getNode(id); if (node && node.isLeaf) { leafIds.push(id) } }); // treeRef.value!.setChec...

2025-04-22 浏览(361

grid 布局宽度按比例(fr)自适应布局后,让高度自适应等于宽度

[TOC]问题描述用grid布局使用了一个3等分布局的样式,样式代码如下: .ibl-statistic-wrap { display: grid; gap: 20px; grid-template-columns: repeat(3, 1fr); } 可以宽度是可以保持3等分了,但是高度没有得到控制,如果在这种情况下,想要高度保持和高度一致,应该怎么设置样式呢 方法一:...

2025-04-19 浏览(392

vue3+vite 修改启动端口。vue-next-admin修改启动端口

在vite.config.ts里边看到端口配置的位置: 可以看到获取的是配置里边的内容,找到配置的地方修改即可: 然后把这个请求的url地址的端口也修改成一样的

2025-04-18 浏览(380

win11 怎么截图 右键菜单

如果键盘有一键截图健可以使用,没有的话,就使用快捷键(win+Shift+S)截图

2025-04-18 浏览(417

mysql报表统计查询合并成一行的写法

sql如下: SELECT (select count(*) from cisp_platform_school where `status` = 'active') AS school_count, (select count(*) from cisp_system_users where user_type = 0 and is_active = 1 ) as teacher_count , (select count(*) from cisp_system_users where user_type = 1 an...

2025-04-16 浏览(449

mysql按月统计

sql如下: select DATE_FORMAT(create_datetime,'%Y-%m') AS year_month_format, COUNT(*) AS total_count from cisp_lesson_knowledge where model_status = 90 GROUP BY year_month_format ORDER BY year_month_format

2025-04-16 浏览(384

vue3动态生成组件,vue3动态生成element plus组件,动态生成el-tag。数据字典与类型的动态解析

示例代码如下:<template> <el-table :data="tableData"> <el-table-column align="center" label="敏感词类型" prop="sensitive_type" min-width="100"> <template #default="scope"> <componen...

2025-04-15 浏览(411

vue3 简单的页面基础模板-element plus的弹窗以及暴露方法出去

代码如下: <template> <div class="course-preview-dialog-container"> <el-dialog v-model="dialogVisible" title="Tips" width="500"> <span>This is a message</span> <template #footer&...

2025-04-09 浏览(321

vue3 图片裁剪插件cropper,常用的配置。比例配置,裁剪框默认按比例框完整个图片等

[TOC]裁剪比例配置使用aspectRatio属性配置 核心配置如下 this.cropper = new Cropper(this.imageElement, { aspectRatio: 192 / 35 }); 裁剪框默认按比例框完整个图片当你设置了特定的 aspectRatio(例如 192 / 35),并希望在上传图片后裁剪框默认覆盖整个图片(即按照比例最大化填充裁剪区域),你可以...

2025-04-08 浏览(500

element plus el-card 如何穿透 修改里边的样式,修改边距,修改下方横线的样式变粗,修改左右间距和上下间距等。el-card实现表格上方的tab切换菜单

[TOC]直接穿透:<template> <el-card class="custom-card"> <el-tabs class="custom-tabs"> <!-- 内容 --> </el-tabs> </el-card> </template> <style scoped> /* 修改 el-card__body 的 padding */ ::v-deep ....

2025-04-02 浏览(599

nginx配置代理后会出现两个api,变成/api/api。会重复出现配置的代理地址

nginx里边的配置文件有一个配置如下: location /api/ { proxy_pass http://oanet:5005; # 设置为本地启动地址 proxy_http_version 1.1; proxy_set_header Upgrade $http_upgrade; proxy_set_header Connection $connection_upgrade; prox...

2025-03-31 浏览(521

docker-compose 如何重启

[TOC]重启所有服务如果你想要重启 docker-compose.yml 文件中定义的所有服务,你可以使用以下命令: docker-compose down docker-compose up -d 或者 docker compose down docker compose up -d 这里的 docker-compose down 命令会停止并移除所有容器,然后 docker-compose up -d 命令会重新创建并启动所有服...

2025-03-30 浏览(530

vue3封装一个通用的数据字典选择。自定义组件支持v-model双向绑定值,支持change事件,支持传递提示语placeholder

代码如下: <template> <el-select v-model="innerValue" @change="handleSelectChange" class="select-dic" size="default" :placeholder="placeholder" clearable > <el-option ...

2025-03-27 浏览(726

单条多名称解析,单条中字符串逗号存储分割后的多用户解析

代码如下: var userIds = cleanPoolDto.UserIds.Split(',').Select(a => long.Parse(a)).ToList(); List<Users> usersList = db.Queryable<Users>().Where(a => userIds.Contains(a.Id)).ToList(); foreach (var users in usersList) { cleanPoolDto.UserNicknames += use...

2025-03-21 浏览(544

多对多的名称解析,选择多个参与人员后的名称解析,字符串逗号存储分割后的多用户解析

代码如下: // 解析参与人员。多对多解析 // List<long> users = result.Select(a => long.Parse(a.UserIds)).Distinct().ToList(); // 先把所有涉及到的用户id查询出来 List<long> userIds = new List<long>(); foreach (CleanPoolDto item in result) { if (!string.IsNullOrWhi...

2025-03-21 浏览(621

vue uni-app 微信小程序 安装常用依赖

[TOC]安装sass 依赖cnpm install sass sass-loader --save-dev 或者 pnpm install sass sass-loader --save-dev 或者 npm install sass sass-loader --save-dev --save-dev

2025-03-18 浏览(594

cursor 颜色太暗了,怎么让它变亮一点。ai编程cursor 样式风格设置,保持主题和vscode一致

这样设置即可:上方的菜单选择 文件 —> 首选项—>主题—>颜色配置—>现代深色(这里选择一个自己喜欢的,或者保持和vscode配置一样即可,我这里vscdoe是选择的这个)

2025-03-18 浏览(1896

uni-app 开发 微信小程序 v-html会生成 rich-text,不好设置图片样式,给图片的最大宽度设置100%

方案一:通过修改数据源添加内联样式(推荐)在绑定v-html的内容中,直接为标签添加内联样式style=”max-width:100%”。这需要你在生成内容时进行字符串替换: <template> <rich-text :nodes="processedHtml"></rich-text> </template> <script> export default ...

2025-03-18 浏览(659

.net core 过滤器中给控制器传递参数。.net6,.net 9过滤器控制器传参

需求:在.net9的web 项目里边创建了一个过滤器,过滤器里边就是验证token,然后取出来token里边的数据,得到了一个CurrentUser对象,现在我想在控制器里边去获取这个对象,可以把过滤器里边创建的对象传递到控制器里边,比如我控制器里边有一个这样的属性:public CurrentUser currentUser { get; },需要把过滤器...

2025-03-17 浏览(605

vscode ,vue3引入组件报错:Module .... has no default export

原因:在 Vue 3 中,当你在 <script setup> 中编写组件时,默认情况下,组件不是通过 default export 导出的。这是因为在 <script setup> 语法中,Vue 会自动处理组件的导出,使得你不需要显式地使用 export default。然而,一些工具(如 VSCode 及其插件)可能不完全理解这种新的导出方式,从而导致报...

2025-03-17 浏览(849

vue3 element-plus 表格 day.js 时间格式化显示

引入day.js import { dayjs } from 'element-plus' 显示时间 <el-table-column prop="createTime" label="创建时间" show-overflow-tooltip> <template #default="scope"> <span>{{dayjs(scope.row.createTime).format('YYYY-MM-DD ...

2025-03-14 浏览(667

生成通用的边距样式,外边距、内边距全局样式。字体大小全局样式。通用全局样式封装,vue公共样式封装

样式代码如下: <style lang="scss"> /* 外边距、内边距全局样式 ------------------------------- */ @for $i from 1 through 35 { .mt#{$i} { margin-top: #{$i}px !important; } .mr#{$i} { margin-right: #{$i}px !important; } .mb#{$i} {...

2025-03-13 浏览(570

多对多的查询解析,sqlsugar , 多对多的名称查询解析

多对多解析名称的常用步骤代码如下: #region 查询小组分配的管理员(一个小组可以分配多个管理员) List<string> groupIdList = result.Select(a => a.GroupId).ToList(); // 现在多对多管理表从取出来涉及到的关联数据 List<UserGroup> userGroups = await db.Queryable<UserGroup>()...

2025-03-13 浏览(593

Navicat 将表从一个数据库转存到另一个数据库,mysql复制表。把一个表从一个库复制到另外一个库。Navicat mysql 复制某个表的一条数据出来

选择好源,目标,然后点击下一步在选择需要同步的表就行了 Navicat mysql 复制某个表的一条数据出来查询出来后直接选中一条数据 右键菜单—>然后复制为insert语句 ,然后去修改后执行insert语句就行了

2025-03-10 浏览(614

word 开启导航,显示左边左侧的目录导航

操作如下:

2025-03-05 浏览(560

vs2022及以上版本,net core net6 net8 添加dll引用

现在不是右键添加dll引用了。 右键添加com引用: 然后在下面点击浏览现在你需要引用的dll即可: 其实添加项目引用里边也有Com的选项

2025-03-05 浏览(766

样式中找到第n个子元素

代码如下: .sta-training-item:nth-child(1){ background-image: url('~@/static/imgs/teacher-center/training_back1.png'); } .sta-training-item:nth-child(2){ background-image: url('~@/static/imgs/teacher-center/training_back2.png'); } .sta-training-item:nth-child(3...

2025-02-28 浏览(625

总结 Vue3 的 13 种传参通信方式

props 父传子defineEmits 子传父mitt 兄弟组件传参$attrs (爷孙)refsv-model (双向)provide/inject (多层)路由传参vuex 传参 (全局)pinia 传参 (全局)浏览器缓存 (全局)window (全局)app.config.globalProperties (全局)———————————————— 版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权...

2025-02-14 浏览(759

vue3 微信小程序 uniapp图片上传,图片转base64,base64转图片

vue3 微信小程序 uniapp 图片上传uni-app中上传图片可以使用方法uni.uploadFile:uni.uploadFile官方文档:https://uniapp.dcloud.net.cn/api/request/network-file.html import { ApiBaseUrl } from '@/common/sysconfig' const getToken = () => { let info = uni.getStorageSync('loginInf...

2025-02-13 浏览(823

微信小程序设置为不缓存

设置—>通用设置—>找到:使用新版文件监听模块,把勾勾去掉即可。

2025-02-12 浏览(698

vue3 微信小程序,uni-app 签字版插件sp-sign-board。上传图片

插件地址:https://ext.dcloud.net.cn/plugin?id=14966 文档:https://sonvee.github.io/sv-app-docs/docs-github/src/plugins/sp-sign-board/sp-sign-board.html [TOC]组件的引入直接下载下来放到这个组件文件夹下就可以了 基础使用<template> <view class="upLoadSigns-container">...

2025-02-10 浏览(813

vue3 微信小程序,uni-app 基本模板

代码如下: <template> <view class="index-container"> 6666 </view> </template> <script setup lang="ts"> import { ref, reactive, onMounted } from 'vue' const state = reactive({ popupShow: false }) </script&...

2025-02-08 浏览(755

vue3 ts uni-app 微信小程序 抽屉菜单的使用。抽屉菜单的打开关闭。基本模板。解决抽屉菜单的滚动穿透

代码如下: <template> <!-- 解决滚动穿透 --> <page-meta :page-style="'overflow:' + (state.popupShow ? 'hidden' : 'visible')" ></page-meta> <view> <view class="pm-ch-more" @tap="o...

2025-02-07 浏览(704

vue3 vite ts 使用 uni-app 微信小程序 引入组件。引入扩展组件,引入下载的组件

引入组件还是直接引用即可: import zbTab from '@/components/zb-tab/zb-tab.vue' import moduleItem from './component/module-item.vue' 引入下载的组件先下载好组件放入项目中一个位置,比如src下的components: 然后引入的方式就是一样的了: import zbTab from '@/components/zb-tab...

2025-02-07 浏览(714

vue3 ts uni-app 微信小程序 生命周期函数。uni-app 动态修改页面的title,header里边的title

vue3 ts uni-app 生命周期函数import { onLoad, onShow,onUnload } from '@dcloudio/uni-app' onLoad(() => { uni.setNavigationBarTitle({ title: '精品课程' }) }) onShow(() => {}) onUnload(()=>{ console.log("页面关闭了....") // 注销监听的...

2025-02-06 浏览(773

使用grid布局实现每行2个,间距20px,每项占用间距之后剩下宽度的50%

如果直接这样设置: grid-template-columns: repeat(2, 50%); grid-column-gap: 20px; 他会影响整体的宽度,因为这样做分成了两份,一份占了50%,然后还多了20px的间距,如何能够做到是整体宽度减去间距之后剩下的宽度在各占50%呢。 使用calc()函数就行了。 .container { display: grid; grid-templa...

2025-02-05 浏览(748

uni-app 如何修改header的title描述和颜色,修改头部的背景颜色

在page.json中配置即可 { "pages": [ { "path": "pages/index/index", "style": { "navigationBarTitleText": "首页", "navigationBarBackgroundColor": "#ff0000", // 红色背景 ...

2025-02-05 浏览(724

uni-app 项目 vue3 st vite 版本 怎么配置h5启动的端口号

代码如下: import { defineConfig } from 'vite'; import uni from '@dcloudio/uni-vite-plugin'; // https://vitejs.dev/config/ export default defineConfig({ plugins: [uni()], server: { port: 3000 // 设置为你想要的端口号 } });

2025-01-14 浏览(692

vue,vue3 js,ts实现类似a标签的锚点功能,因为vue路由导致直接html的锚点功能失效

因为vue路由导致直接html的锚点功能失效,可以用js来实现,代码如下: const toAnchorPoint = (location: string) => { const dom = document.getElementById(location) dom.scrollIntoView({ behavior: 'auto', block: 'start' }) } 调用的时候就传递一个id即可...

2025-01-13 浏览(641

剪映的基本使用。音频如何删除,音频如何删除某一部分,如何修改某张图片的播放时间

默认一张图片只有三秒钟的时间如果不够的话可以拖动修改时间。 音频如何删除?单击选中后下面就有删除选项了。 音频如何删除某一部分?点击选中需要操作的音频后在点击分割就行了,就可以删除分割后的了。

2025-01-09 浏览(642

.net , c# 生成guid 不需要中间的短斜杠

代码如下: Guid.NewGuid().ToString("N")

2025-01-06 浏览(761

element ui admin 如何点击按钮关闭当前菜单。vue-element-admin关闭当前标签页。编辑文章或者编写文章后返回上一页

核心代码如下: // 调用全局挂载的方法(vuex中封装的方法),关闭当前页 this.$store.dispatch("tagsView/delView", this.$route); // 关闭之后跳转你要跳转的路由 // this.$router.push({ path: '/contentManage' }) this.$router.push("/contentManagement/content...

2025-01-06 浏览(808

element plus table 表格,开启多选,增加复选框。设置忽略可选属性。获取选择的值

element plus table 表格,要开启多选非常简单,手动添加一个 el-table-column,设 type 属性为 selection 即可; <el-table-column type="selection" width="55" /> [TOC]通过selectable可以设置忽略可选属性比如忽略id为1,和2的<el-table-column type="selection" :s...

2024-12-25 浏览(1396

vue3组件刷新,手动刷新组件,手动重新加载组件,类似reload方法

一般情况会封装一个refreshData来重新刷新数据,但是有些情况参数比较复杂,写这种刷新方法需要注意很多东西还要注意时机问题,所以可以在某些情况下直接去刷新组件来刷新数据。 如何是调用组件内部的方法这样调用就行了 const projectTeamMembersRef = ref(null) const getTrainingSubProgramList = async (_tr...

2024-12-25 浏览(1570

修改element plus Carousel 走马灯 改指示器的样式,变为小圆点的效果。修改切换箭头的样式,位置,颜色等

代码如下: <!-- 修改element plus Carousel 走马灯 改指示器的样式,变为小圆点的效果。 以及切换箭头的颜色加深 --> <style scoped="scoped" lang="scss"> /* 修改element plus Carousel 走马灯 改指示器的样式,变为小圆点的效果 */ ::v-d...

2024-12-23 浏览(1149

vue 样式穿透写法

方法一:使用 ::v-deep示例代码如下: <style scoped="scoped" lang="scss"> // 修改element plus Carousel 走马灯 改指示器的样式,变为小圆点的效果 ::v-deep .el-carousel__indicator--horizontal .el-carousel__button { width: 7px; height: 7px; ...

2024-12-23 浏览(828

如何配置hosts,如何修改hosts文件

hosts如何的位置在:C:\Windows\System32\drivers\etc 使用Win+R或者Win+E,输入C:\Windows\System32\drivers\etc,然后按回车都可以进入该路径 因为hosts文件一般需要管理员权限才能编辑,不然你编辑了保存不了的,所以可以这样使用管理员身份打开host文件。 1:在搜索里边输入命令,选择以管理员身份打开 2:在...

2024-12-23 浏览(1185

ts实现动态拼接字符串,实现类似 C# 的 string.Format的格式化字符串。ts,js动态给拼接字符串提供参数

模板是这样的:”于${0}通过${1}课程体系《${2}》课程授课”对于这种格式的模板字符串,可以使用一个简单的替换函数来处理,而不需要复杂的正则表达式转义。下面是一个处理这种模板的示例函数: function formatString(template: string, ...values: any[]): string { return template.replace(/\$\{(\d+)\}/...

2024-12-19 浏览(932

ts实现面向对象编程,定义属性,方法,构造函数,私有方法,以及引用类,实例化类等。vue3使用ts对象

[TOC]ts实现面向对象编程,定义属性,构造函数等基础使用在 TypeScript 中,你可以使用类和面向对象编程(OOP)的概念来实现类似于 C# 的功能,包括构造函数、属性和方法。TypeScript 是 JavaScript 的一个超集,它添加了静态类型、类、接口等概念,使得代码更加健壮和可维护。 下面是一个简单的示例,展示如何在 ...

2024-12-18 浏览(1255

Canvas在绘制文字的时候,实现文字的水平间距调整,类似css里边的letter-spacing

在Canvas上绘制文字时,虽然Canvas的2D渲染上下文(CanvasRenderingContext2D)没有直接提供类似于CSS中letter-spacing的属性来调整文字的水平间距,但你可以通过一些技巧来实现类似的效果。 一种常见的方法是手动计算每个字符的宽度,并在它们之间添加额外的空间。这通常涉及到使用measureText()方法来获取文本的...

2024-12-16 浏览(949

vue3 使用Canvas对图像进行编辑,图片里边添加文字,导出为图片,导出图片的时候按照一定比例进行导出

比如我想把原图为35082480的缩小三倍变成1169827下编辑,这个时候我把Canvas的宽高设置成1169827编辑后,后导出为图片的时候让图片可以变成原来背景图片所拥有的35082480。因为有些时候原图太大了,所以按图片大小来编辑不太方便,先缩小后编辑在放大导出。示例代码如下:<template> <div> &lt...

2024-12-16 浏览(1051

mysql 使用命令添加列,包含类型,注释,默认值等

代码如下: ALTER TABLE training_subprogram ADD COLUMN IsMustDo TINYINT DEFAULT 0 COMMENT '是否必做(用于公开类型的设置),0不是必做,1必做';

2024-12-12 浏览(874

vue3 实现div滚动到一定位置就固定他,实现一侧滚动到某个位置就固定,实现滚动条滚动到一边的最底部就固定

在vue2以及普通页面里边使用参考:https://www.tnblog.net/aojiancc2/article/details/1273本来在vue中最好不要去用jquery的,可以直接去监听滚动条的事件来实现的,这会比较忙就直接用一下jquery了。 <script setup lang="ts" name="labroomindex"> import { reactive, onMounted...

2024-12-09 浏览(1109

vue3 使用Transition实现一个侧边菜单

从左边弹出<template> <div> <button @click="showMenu = !showMenu">打开菜单</button> <transition name="slide"> <div v-if="showMenu" class="side-menu"> <!-- 菜单内...

2024-12-04 浏览(889

vue3实现展开更多,加载全部 。加载更多,展开全部

[TOC]方法一:分成两份来展示,一份显示出来,一份隐藏掉,点击加载全部在把隐藏的显示出来 封装的组件的代码如下: <template> <div class="completeUerList-container"> <div class="cu-ct-title"> {{ props.title }} </div>...

2024-12-03 浏览(934

不同宽度下不同分辨率下的自适应布局样式写法

使用media可以在不同宽度下写不同的样式,代码如下 <style> @media (min-width: 1024px) { .about { min-height: 100vh; display: flex; align-items: center; } } </style>

2024-12-03 浏览(855

VUE, JS Base64上传图片或文件。Base64 编码的图片转成二进制图片。封装的直接调用接口的图片上传。canvas生成的图片上传。blob类型的图片文件上传。vue3签字图片上传

代码如下: // Base64 编码的图片转成二进制图片 const base64ToImg = (base64String: string) => { const byteString = window.atob(base64String.split(',')[1]) const mimeString = base64String.split(',')[0].split(':')[1].split(';')[0] ...

2024-12-02 浏览(1046

vue3 在线签字,生成一张图 。重置的时候保留背景颜色

主要使用插件vue-esign,官方文档:https://github.com/JaimeCheng/vue-esign [TOC]一:添加引用cnpm install vue-esign 二:简单使用先引用 import vueEsign from 'vue-esign' 就可以直接使用了 <vue-esign ref="esign" :width="800" :height="300"/> 在页面里...

2024-12-02 浏览(1027

flex实现一行尽可能的容纳更多子项,且每项的内容自适应宽度,自适应内部文字的宽度

代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Flexbox Layout Example</title> <...

2024-11-21 浏览(957

element plus tree 把数据源里边的所有isShowMenu都赋值为false,在树节点右边增加操作按钮,只显示当前点击节点的菜单。 树形菜单编辑操作

效果图: 代码如下: <template> <div class="module-manage-container"> <div style="display: flex"> <el-card class="box-card" style="width: 300px; margin-right: 10px"> <el-scrollba...

2024-11-18 浏览(921

tree 树形递归解析算法,处理特殊的根节点条件,特定的顶级顶层条件。树形获取顶级下面所有的子级id

[TOC]一般情况下的递归解析树形参考:https://www.tnblog.net/aojiancc2/article/details/4785这个是sqlsugar封装的关于树形相关的方法https://www.donet5.com/home/doc?masterId=1&typeId=2311 树形递归解析算法,处理特殊的根节点条件,特定的顶级顶层条件在sqlsguar中有一个这样的表 public class Tree ...

2024-11-07 浏览(891

sqlsugar 树型递归查询。UtilMethods.BuildTree 用法

sqlsugar 树型递归查询官方文档:https://www.donet5.com/home/doc?masterId=1&typeId=2311 UtilMethods.BuildTree 用法public class Tree { [SqlSugar.SugarColumn(IsPrimaryKey = true)] public int Id { get; set; } public string Name { get; set; } public int ParentId { get; s...

2024-11-07 浏览(1121

element plus 图标按钮,按钮加图标。直接显示图标,修改图标大小

[TOC]按钮显示图标https://element.eleme.cn/#/zh-CN/component/button 官网这个图标按钮我这样放进去不行,显示不出来,有可能是版本问题 我这里需要这么使用,增加一个icon的绑定: <el-button type="success" :icon="Plus" size="default">添加培训项目</el-button>...

2024-10-25 浏览(1599

.net core 获取配置文件, 在其他层获取配置文件,在任意层里边获取配置文件

首先,在你的appsettings.json文件中添加你需要的配置项{ "SomeSetting": "Some value" } 项目中引用Microsoft.Extensions.Configuration.Json包<ItemGroup> <PackageReference Include="Microsoft.Extensions.Configuration.Json" Version="6.0.0&quot...

2024-10-25 浏览(919

js实现分组,vue中 js实现分组

封装根据teacherId分组的方法:// 根据老师id groupByTeacherId(items) { return items.reduce((groups, item) => { const key = item.teacherId; if (!groups[key]) { groups[key] = { teacherName: item.teacherName, items: [], }; } groups[key].i...

2024-10-10 浏览(1001

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