前端

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

[TOC]基础的图片上传,文件上传,视频上传界面就是这样的: 界面当中的部分代码如下<div class="img-wa...

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

VUE, JS Base64上传图片或文件。Base64 编码的图片转成二进制图片

代码如下: // Base64 编码的图片转成二进制图片 const base64ToImg = (base64String: string) => ...

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

uniapp 离线打包配置高德地图

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

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

uniapp 离线打包配置

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

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

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

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

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

Vue 3的Composition API介绍

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Vue 3 中 watch与watchEffect区别

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

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

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

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

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

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

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

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

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

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

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

uniapp vue3 引用样式表样式

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

css开关按钮样式

代码如下,可以直接运行: <!DOCTYPE html> <html lang="en"> <head> &l...

前端 2024-06-05 浏览(1095 作者( 风清月 )

uni-app 开发微信小程序显示图标

uni-app 开发微信小程序图标显示其实和直接显示图标其实是一样的,如下直接用一个image即可 <image :src=&quo...

前端 2024-06-01 浏览(1153 作者( TeachingNote )

uni-app app,小程序 时间轴样式,时间轴效果。弹窗里边使用时间轴。悬浮菜单

虽然可以用一些时间轴组件比如,timeline,但是有时候还是自己写点样式定制性好一点,不需要像组件那么通用。[TO...

前端 2024-05-31 浏览(1267 作者( 剑轩 )

ElementUI Table 动态表头,动态数据,动态列

表格显示的列不确定的时候就需要使用动态的方式,而不是预先绑定好。 [TOC]前端的实现数据源对于前端来说数据源...

前端 2024-05-13 浏览(2696 作者( 剑轩 )

vue 实现全局配置

方法一1: 在静态资源里边加一个config.js 里边写一点配置,如: window.peizhi = { title: '过程管理平...

前端 2024-05-06 浏览(1016 作者( 忆点点 )

vue3 ts 方法传参,any使用。vue3 ts reactive 使用类型,定义具体类型。vue3 ts实现分组, 多字段作为key分组,二级分组,多级分组,子级分组

[TOC]vue3 ts 方法传参,any使用方法1: // 循环解析 dataListToAppend.forEach((element: any) => { s...

前端 2024-04-29 浏览(1870 作者( TeachingNote )

最近天气

好句分享

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

技术交流