前端

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

这样生成的内容:<div class="tc-blid-content" v-html="state.subProgram.context">...

前端 2025-07-07 浏览(41 作者( TeachingNote )

基于Cropper与element plus图片裁剪插件封装,支持图片回显,图片重传等

[TOC]封装的组件如下<template> <div class="image-cropper-container"> <!--...

前端 2025-07-07 浏览(47 作者( 剑轩 )

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

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

前端 2025-07-07 浏览(33 作者( TeachingNote )

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

封装字符串转bool,字符串转数字函数/** * 工具函数,字符串转成booler * @param str * @returns */ ex...

前端 2025-07-01 浏览(46 作者( TeachingNote )

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

要在内部出现纵向滚动条而不是撑高整体肯定要在某一级定一个高度,比如js动态计算了一个高度获知使用height: cal...

前端 2025-06-10 浏览(185 作者( TeachingNote )

element plus ui暂无组件,暂无数据显示效果

<el-empty v-else description="暂无教案" />

前端 2025-06-09 浏览(138 作者( 只若初见 )

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

直接使用setInterval会一直循环不会结束除非手动去结束,可以循环生成n次setTimeout,然后时间的循环每次递增就...

前端 2025-06-04 浏览(162 作者( TeachingNote )

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

页面如下: <div class="lp-ca-item" v-for="(item, index) in kpCaseList" v-bind:key...

前端 2025-06-03 浏览(192 作者( TeachingNote )

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

实现思路:更新内容 → 等待 DOM 更新 → 滚动到底部。代码如下: <template> <div class="ac...

前端 2025-06-03 浏览(267 作者( TeachingNote )

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

按钮组件el-button<el-button size="small" :disabled="item.digital_human_status != 2&quot...

前端 2025-05-29 浏览(203 作者( TeachingNote )

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

第一个版本如下<template> <div class="split-panel-container"> <div class=...

前端 2025-05-28 浏览(194 作者( TeachingNote )

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

思想思路:数据源里边是默认没有children的或者说没有走children这种结构,所以和正常的操作方法还有点不一样...

前端 2025-05-15 浏览(423 作者( TeachingNote )

运行IZTRO紫薇斗数命盘的排盘界面

运行IZTRO紫薇斗数命盘的排盘界面[TOC] Vite创建项目首先我们通过Vite进行项目的创建。pnpm create vite #...

前端 2025-05-15 浏览(405 作者( 尘叶心繁 )

element plus 弹窗里边增加可以选择的按钮,弹窗按钮,菜单按钮。vue3 弹窗里边下载模板

[TOC]效果一效果图: view <el-link :underline="false" type="primary" @click=&qu...

前端 2025-05-14 浏览(260 作者( 只若初见 )

element plus 日期组件el-date-picker增加时间日期范围,本周上周本月上月本季度上季度时间段。快捷选择

代码如下:<el-date-picker style="width: 100%" v-model="searchForm.dateRange&q...

前端 2025-05-13 浏览(336 作者( 只若初见 )

vue 搜索框搜索条件自适应布局,搜索框的内容太多了放不下的解决方法。vue3 搜索条件 如果太多了一行显示不下怎么办。按钮自适应布局

[TOC]Vue3 搜索条件自适应布局方案在 Vue3 中处理搜索条件在不同屏幕尺寸下的显示问题,可以使用以下几种方法实...

前端 2025-05-12 浏览(368 作者( 剑轩 )

vue3 简单的element plus 表格table 页面基础模板

[TOC]简单的基础模板<template> <div class="expiredItems-container"> &l...

前端 2025-05-08 浏览(335 作者( 只若初见 )

vue3 格子报表统计模板

代码如下: <template> <div class="waterFeeStatistics-container"> &...

前端 2025-05-05 浏览(302 作者( TeachingNote )

vue3 页面基础模板(里边包括弹窗以及暴露方法出去,父组件调用),也是一个格子报表统计的模板,基础的请求,常用的变量定义等

[TOC]页面模板如下,里边包括的弹窗还包括了一个格子报表统计的模板,基础的请求等 代码如下: <template&g...

前端 2025-04-30 浏览(309 作者( 只若初见 )

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

找到id中的叶子节点 let leafIds = [] as any // 过滤掉父节点,只留下叶子节点, 用于回显树形的选中 checked...

前端 2025-04-22 浏览(377 作者( TeachingNote )

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

[TOC]问题描述用grid布局使用了一个3等分布局的样式,样式代码如下: .ibl-statistic-wrap { display: gri...

前端 2025-04-19 浏览(407 作者( TeachingNote )

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

在vite.config.ts里边看到端口配置的位置: 可以看到获取的是配置里边的内容,找到配置的地方修改即可: 然后...

前端 2025-04-18 浏览(394 作者( TeachingNote )

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

示例代码如下:<template> <el-table :data="tableData"> <el-table-column a...

前端 2025-04-15 浏览(427 作者( TeachingNote )

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

代码如下: <template> <div class="course-preview-dialog-container"> ...

前端 2025-04-09 浏览(349 作者( TeachingNote )

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

[TOC]裁剪比例配置使用aspectRatio属性配置 核心配置如下 this.cropper = new Cropper(this.imageElement, { ...

前端 2025-04-08 浏览(519 作者( TeachingNote )

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

[TOC]直接穿透:<template> <el-card class="custom-card"> <el-tabs class=&...

前端 2025-04-02 浏览(620 作者( TeachingNote )

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

代码如下: <template> <el-select v-model="innerValue" @change=&quo...

前端 2025-03-27 浏览(743 作者( TeachingNote )

通过vue-cli命令行创建uni-app项目。调试微信小程序,vscode 开发 uni-app,微信小程序基础开发模板,基础架子搭建。vue3读取环境变量配置,编译配置

tip:搭建的基础开发模板放了一份在FastAdmin.NET里边的FastAdmin.Mobile.Template.Pure,方便直接拉下来使用,不...

前端 2025-03-18 浏览(919 作者( 剑轩 )

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

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

前端 2025-03-18 浏览(605 作者( TeachingNote )

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

方案一:通过修改数据源添加内联样式(推荐)在绑定v-html的内容中,直接为标签添加内联样式style=”max-width:1...

前端 2025-03-18 浏览(676 作者( TeachingNote )

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

原因:在 Vue 3 中,当你在 <script setup> 中编写组件时,默认情况下,组件不是通过 default export 导出...

前端 2025-03-17 浏览(885 作者( TeachingNote )

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

引入day.js import { dayjs } from 'element-plus' 显示时间 <el-table-column prop="create...

前端 2025-03-14 浏览(676 作者( TeachingNote )

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

样式代码如下: <style lang="scss"> /* 外边距、内边距全局样式 ----------------------...

前端 2025-03-13 浏览(586 作者( TeachingNote )

element plus 的Tree 懒加载。省市县镇村树形懒加载

这里的示例代码是做的县镇村tree懒加载联动数据。接口数据这些换成自己的就行。有根据countyId查询区县下面镇...

前端 2025-03-12 浏览(667 作者( 剑轩 )

样式中找到第n个子元素

代码如下: .sta-training-item:nth-child(1){ background-image: url('~@/static/imgs/teacher-center/...

前端 2025-02-28 浏览(638 作者( TeachingNote )

uni-app 微信小程序,flex 实现内容元素垂直与水平居中

效果如下,中间那块内容垂直与水平居中: [TOC]代码如下:<template> <view class="trainin...

前端 2025-02-28 浏览(772 作者( 忆点点 )

不同分辨率自适应布局。vue 搜索栏,操作按钮自适应布局

标签<div class="toolbar"> <div> <el-button type="primary&quot...

前端 2025-02-27 浏览(706 作者( 忆点点 )

vue3 读取excel 文件内容 返回json。vue3 导入excel

在 Vue 3 中读取 Excel 文件并将其内容转换为 JSON 格式,你可以使用一些第三方库,比如 xlsx 和 file-saver。下...

前端 2025-02-25 浏览(865 作者( 忆点点 )

vue 弹窗里边的数据更新更改修改后如何刷新主页面内容,弹窗里边的内容是单独的组件。子组件执行父组件方法

其实在封装的组件弄一个事件即可,不然在关闭弹窗的时候刷新数据不科学,这样每次都要刷新数据。 子组件,弹窗...

前端 2025-02-22 浏览(715 作者( 风清月 )

vue3 如何修改集合中的某一个属性。vue修改某个list对象数组中的字段值

比如我有一个对象集合,我只想修改这个集合里边某个对象的checkype属性,封装一个方法可以通过传递一个id来修改...

前端 2025-02-21 浏览(806 作者( 风清月 )

vue, vue3 Tinymce 图片上传 。复制粘贴图片

[TOC]其他资料我没有写到博客里边的位置在:D:\学习研究\软件架构,发布运维相关,前端的学习积累\19:前端的学习...

前端 2025-02-19 浏览(952 作者( 剑轩 )

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

props 父传子defineEmits 子传父mitt 兄弟组件传参$attrs (爷孙)refsv-model (双向)provide/inject (多层)路由...

前端 2025-02-14 浏览(773 作者( TeachingNote )

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

vue3 微信小程序 uniapp 图片上传uni-app中上传图片可以使用方法uni.uploadFile:uni.uploadFile官方文档:https:...

前端 2025-02-13 浏览(836 作者( TeachingNote )

微信小程序设置为不缓存

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

前端 2025-02-12 浏览(711 作者( TeachingNote )

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

插件地址:https://ext.dcloud.net.cn/plugin?id=14966 文档:https://sonvee.github.io/sv-app-docs/docs-git...

前端 2025-02-10 浏览(837 作者( TeachingNote )

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

代码如下: <template> <view class="index-container"> 6666 </view>...

前端 2025-02-08 浏览(768 作者( TeachingNote )

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

代码如下: <template> <!-- 解决滚动穿透 --> <page-meta :page-style="'...

前端 2025-02-07 浏览(715 作者( TeachingNote )

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

引入组件还是直接引用即可: import zbTab from '@/components/zb-tab/zb-tab.vue' import moduleItem...

前端 2025-02-07 浏览(726 作者( TeachingNote )

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

vue3 ts uni-app 生命周期函数import { onLoad, onShow,onUnload } from '@dcloudio/uni-app' onLoad...

前端 2025-02-06 浏览(780 作者( TeachingNote )

最近天气

好句分享

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

技术交流