前端

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

element plus table 表格,要开启多选非常简单,手动添加一个 el-table-column,设 type 属性为 selection 即可...

前端 2024-12-25 浏览(17 作者( TeachingNote )

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

一般情况会封装一个refreshData来重新刷新数据,但是有些情况参数比较复杂,写这种刷新方法需要注意很多东西还要...

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

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

代码如下: <!-- 修改element plus Carousel 走马灯 改指示器的样式,变为小圆点的效果。 以及切换箭...

前端 2024-12-23 浏览(17 作者( TeachingNote )

vue 样式穿透写法

方法一:使用 ::v-deep示例代码如下: <style scoped="scoped" lang="scss"> ...

前端 2024-12-23 浏览(34 作者( TeachingNote )

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

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

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

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

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

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

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

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

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

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

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

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

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

比如我想把原图为35082480的缩小三倍变成1169827下编辑,这个时候我把Canvas的宽高设置成1169827编辑后,后导出...

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

uniapp plus.runtime.install 安装失败

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

uniapp 离线打包配置高德地图

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

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

uniapp 离线打包配置

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

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

uni-app 小程序 左右切换 滑动菜单,左右滑块菜单,左右滑动tab菜单

[TOC]效果图: 代码结构如下<!-- 好像要从1开始才能默认在第一个菜单开始显示呢...,所以这里减一个1,数...

前端 2024-09-19 浏览(17 作者( 剑轩 )

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

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

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

Vue 3的Composition API介绍

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

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

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

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

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

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

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

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

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

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

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

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

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

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

使用边框颜色与边框阴影实现高亮效果

实现效果: 核心样式.good { background: rgba(0, 180, 255, 0.5); border: 1px solid #00b4ff; ...

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

css 如何实现div边框四个角的颜色不一样

可以伪元素和其他div来创建看起来像是边框的元素,并分别为它们设置不同的背景色,模拟四个角有不同颜色的效果。...

前端 2024-09-11 浏览(10 作者( 忆点点 )

Vue 3 中 watch与watchEffect区别

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

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

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

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

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

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

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

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

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

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

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

uniapp vue3 引用样式表样式

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

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

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

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

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

最近天气

好句分享

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

技术交流