前端

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

模板是这样的:”于${0}通过${1}课程体系《${2}》课程授课”对于这种格式的模板字符串,可以使用一个简单的替换...

前端 2024-12-19 浏览(27 作者( TeachingNote )

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

[TOC]ts实现面向对象编程,定义属性,构造函数等基础使用在 TypeScript 中,你可以使用类和面向对象编程(OOP)...

前端 2024-12-18 浏览(68 作者( TeachingNote )

vue3使用canvas进行绘图的时候,动态实现绘制文字居中。实现绘制文字的时候设置间距。有文字间距的情况下动态实现居中

比如我绘制两个字,drawText(‘李白’, 32,’Arial’, ‘#062466’, 516, 335),最后两个参数是x,y坐标。这样可...

前端 2024-12-17 浏览(44 作者( 剑轩 )

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

在Canvas上绘制文字时,虽然Canvas的2D渲染上下文(CanvasRenderingContext2D)没有直接提供类似于CSS中letter-s...

前端 2024-12-16 浏览(44 作者( TeachingNote )

uniapp plus.runtime.install 安装失败

APP 权限配置添加"<uses-permission android:name=\"android.permission.REQUEST_INSTALL_PACKAGES...

前端 2024-12-13 浏览(39 作者( 人生若只如初见 )

uniapp 应用热更新,进度条/权限

/** * 检查安装应用权限 */ checkInstallPermission() { return new Promise((resolve, reject) =&gt...

前端 2024-12-13 浏览(47 作者( 人生若只如初见 )

vue3 图片上传,文件上传,视频上传。图片预览,视频预览。

直接调用接口上传参考:https://www.tnblog.net/notebook/article/details/8495[TOC]基础的图片上传,文件上传,...

前端 2024-12-09 浏览(84 作者( 剑轩 )

vue3 element plus 常用提示信息,提示框

引入相关方法import { ElMessageBox, ElMessage } from 'element-plus' 常用提示框写法ElMessage.warni...

前端 2024-12-09 浏览(109 作者( 小可爱 )

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

在vue2以及普通页面里边使用参考:https://www.tnblog.net/aojiancc2/article/details/1273本来在vue中最好不要...

前端 2024-12-09 浏览(113 作者( TeachingNote )

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

从左边弹出<template> <div> <button @click="showMenu = !showMenu"&g...

前端 2024-12-04 浏览(80 作者( TeachingNote )

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

[TOC]方法一:分成两份来展示,一份显示出来,一份隐藏掉,点击加载全部在把隐藏的显示出来封装的组件的代码如...

前端 2024-12-03 浏览(81 作者( TeachingNote )

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

使用media可以在不同宽度下写不同的样式,代码如下 <style> @media (min-width: 1024px) { .about { ...

前端 2024-12-03 浏览(88 作者( TeachingNote )

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

主要使用插件vue-esign,官方文档:https://github.com/JaimeCheng/vue-esign [TOC]一:添加引用cnpm install vu...

前端 2024-12-02 浏览(148 作者( TeachingNote )

vue3 视频默认显示第一帧,解决视频加载的时候是黑色的问题

[TOC]方法一:使用 JavaScript 的 Canvas API 来截取视频的第一帧<template> <div class="vide...

前端 2024-11-27 浏览(137 作者( 小见 )

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

代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&...

前端 2024-11-21 浏览(224 作者( TeachingNote )

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

效果图: 代码如下: <template> <div class="module-manage-container"> ...

前端 2024-11-18 浏览(210 作者( TeachingNote )

vue自适应高度,vue让某个组件的高度等于一个屏幕在其他内容下剩余的高度。vue自适应一个屏幕剩余的高度。element el-table自适应高度

其实原理非常简单,就是获取屏幕的高度然后减去其他内容占用的高度就行了。 核心代码如下<script setup lang...

前端 2024-11-15 浏览(213 作者( 剑轩 )

js根据逗号拆分字符串,并且去掉最后一个逗号

代码如下: // 原始字符串 const str = "000f276dd46e47c99dc4e6133bd129d7,0019eeaae60942aab94d84025...

前端 2024-11-02 浏览(234 作者( 忆点点 )

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

https://element.eleme.cn/#/zh-CN/component/button 官网这个图标按钮我这样放进去不行,显示不出来,有可能是...

前端 2024-10-25 浏览(332 作者( TeachingNote )

element ui table表格行转列,月份数据行转列

我们需要展示一个这样的表格数据 [TOC]接口返回的数据源是这个样子有评估,实验,产教的数据接口回来,这里只...

前端 2024-10-16 浏览(313 作者( 只若初见 )

element ui table 表格自定义边框样式,边框颜色。合并单元格,合并行。element ui table表格行转列

设计图: [TOC]具体的代码和样式(表格没有加上合并行的)关于自定义边框样式都加了星号的 <template>...

前端 2024-10-15 浏览(377 作者( 剑轩 )

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

封装根据teacherId分组的方法:// 根据老师id groupByTeacherId(items) { return items.reduce((groups, ite...

前端 2024-10-10 浏览(362 作者( TeachingNote )

vue 实现折叠展开效果,平滑隐藏显示效果。element ui 动画

如果直接使用v-show,隐藏和显示不够平滑,可以使用vue element ui 自带的动画组件 el-collapse-transition来实现...

前端 2024-09-24 浏览(466 作者( 小见 )

vue element ui table 隐藏显示的时候会跳一下,明显的抖动

表格数据由隐藏变为显示的瞬间,页面会有明显抖动的现象。经过一段时间的查找,发现elementui在重新渲染table时t...

前端 2024-09-24 浏览(399 作者( 小见 )

element ui table 表格行颜色自定义,单元格颜色自定义。背景颜色自定义。风格自定义

[TOC]实现效果一效果图 代码如下template:<template> <div class="emergencyEvents-container...

前端 2024-09-24 浏览(501 作者( TeachingNote )

好看的渐变色div效果,橙色渐变效果

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF...

前端 2024-09-21 浏览(474 作者( 忆点点 )

uni-app 中怎么获取所有checkbox 选中的值

官方文档:https://uniapp.dcloud.net.cn/component/checkbox.html这个文档的示例真的太少了,就光一个获取所有c...

前端 2024-09-20 浏览(532 作者( 忆点点 )

uniapp 离线打包配置高德地图

没有申请key的去高德开放平台申请的Android平台Keyhttps://console.amap.com/dev/key/app SHA1 在前面申请云端证...

前端 2024-09-19 浏览(567 作者( 人生若只如初见 )

uniapp 离线打包配置

下载Android Studio 并配置好JavaSDK查看HBuilderX版本然后去下载对应的SDK版本https://pan.baidu.com/s/1ZYxRVH...

前端 2024-09-19 浏览(473 作者( 人生若只如初见 )

vscode vue,html,css 格式化代码的时候 每个属性都进行换行了,但是不想每个属性都换行应该怎么设置

每个属性都自动换行了,这个是vscode代码格式化设置的问题。解决方法如下。 一:按下Ctrl + ,(或者Cmd + ,在Ma...

前端 2024-09-18 浏览(518 作者( 剑轩 )

Vue 3的Composition API介绍

[TOC]Vue 3 引入了一个新的核心特性,即 Composition API,它提供了一种更灵活、更强大的方式来组织和重用逻辑。...

前端 2024-09-16 浏览(602 作者( TeachingNote )

vue3 跨组件方法调用。Vue 3 的 Provide / Inject 与 mitt

mitt 是一个轻量级的事件发射器(event emitter),它可以很容易地集成到 Vue 3 应用中。 下面是一个使用 Vue 3...

前端 2024-09-15 浏览(708 作者( TeachingNote )

vue2 事件总线。 跨组件方法调用。跨组件改变数据,跨组件执行方法

在Vue 2中,事件总线(Event Bus)是一种跨组件通信的常用方法,尤其是在组件之间没有直接父子关系时。事件总线...

前端 2024-09-14 浏览(652 作者( TeachingNote )

vue element ui 中 select 设置支持多选,如何给select组件设置默认选中的值

[TOC]select加载的代码如下<template> <el-select size="small" clearable="&quot...

前端 2024-09-14 浏览(577 作者( TeachingNote )

vue打包报错 The "from" argument must be of type string. Received undefined

解决方法一添加 parallel: false parallel: false 位置如下:

前端 2024-09-13 浏览(582 作者( TeachingNote )

Vue 3 中 watch与watchEffect区别

在Vue 3的Composition API中,watch和watchEffect都是用于侦听响应式数据的变化,但它们之间有一些关键的区别。...

前端 2024-08-20 浏览(675 作者( TeachingNote )

vue3 provide与inject 。vue3 跨越组件传递参数,传参。父子组件传值,爷孙组件传参。跨层级传值,整个组件树中共享传值

在 Vue 3 中,provide 和 inject 是用于实现跨组件通信的 API,特别是当组件层次结构较深时很有用,不然如果层级...

前端 2024-08-20 浏览(261 作者( 剑轩 )

前端js,ts小写数字转大写

简单的处理就是用一个键值对来匹配写好对应的键值对: const state = reactive({ smallBigDic: { ...

前端 2024-08-17 浏览(629 作者( 只若初见 )

js 多个异步方法同步请求,等所有请求都完成后在执行。vue 请求多个接口一起返回

用Promise.all就行了, 比如: return Promise.all([ ac.getEvalData(), ac.getLabData(), ac.g...

前端 2024-08-16 浏览(979 作者( 只若初见 )

uniapp vue3 引用样式表样式

这样即可: <style scoped lang="scss"> @import '@/static/css/report-box.scss'; ...

前端 2024-08-12 浏览(702 作者( 忆点点 )

图片与文字在一个div里边垂直与水平居中。暂无数据的显示

使用绝对定位的方式实现html: <div class="course-study-empty" v-else> <div class=&...

前端 2024-08-09 浏览(621 作者( TeachingNote )

uniapp 微信小程序 上传图片,上传文件,上传视频等,上传组件封装

上传图片文件还可以参考:https://www.tnblog.net/aojiancc2/article/details/8233 这个里边有关于.net6实现图片...

前端 2024-07-26 浏览(1161 作者( 剑轩 )

uni-app 小程序,常用的弹窗模板。弹窗里边显示时间轴

弹窗的基础使用以及另外的一些模板可以参考:https://www.tnblog.net/aojiancc2/article/details/7064[TOC]基础模...

前端 2024-07-16 浏览(856 作者( 剑轩 )

设置了flex后 ,子元素的高度全部都一样了,没有自适应内容。flex 布局导致子项高度相同

原因:Flex 布局的默认是:把所有子项变成水平排列。默认不自动换行。让子项与其内容等宽,并把所有子项的高度变...

前端 2024-07-15 浏览(878 作者( TeachingNote )

uni-app textarea 修改 placeholder 字体的颜色和大小等样式

方法一: 直接设置placeholder-style <textarea style="width: 100%;height: 209rpx;" maxlength=&q...

前端 2024-07-12 浏览(1236 作者( TeachingNote )

uni-app 小程序 分割线与滚动。uni-app 中占满剩下高度,并且在剩下高度里边滚动

[TOC]常用分割线标签: <view class="di-task-spline"></view> 样式: .di-task-spline...

前端 2024-07-10 浏览(960 作者( 忆点点 )

uni-app,微信小程序,app , 自定义搜索框, 好看的搜索框

设计图: view: <view class="seach-box"> <view class="seach-box-wrap"&...

前端 2024-07-01 浏览(781 作者( 剑轩 )

css实现开关组件效果,滑块组件效果。自己实现小程序滑块开关组件

[TOC]效果如下 切换的时候会有动态的效果 代码如下,纯HTML+CSS样式里边的注释都写得比较清晰了,需要自定义效...

前端 2024-06-05 浏览(1054 作者( 剑轩 )

最近天气

好句分享

在情感关系里沟通是最重要的,喜欢开心要告诉对方,讨厌生气也要让对方明白,这样双方才能把握好分寸让彼此都能轻松自在,所以爱绝不是只为满足自己的需求任性妄为,爱的基础是尊重,没有这个就只是打着爱的幌子相互伤害。因为有你满心欢喜,也因为有你满是遗憾。

技术交流