-
剑轩前端基于Cropper与element plus自己封装头像裁剪插件
[TOC]安装依赖npm install cropperjs@1.6.2 --save 其他版本用法可能不一样 封装的组件如下创建：AvatarCroppe... -
TeachingNote前端为什么要用vuex,pinia这类状态管理和直接封装全局方法来使用有什么区别么？有什么好处呢？
vuex,pinia这类状态管理是全局响应式的 [TOC]在 Vue 应用中，使用 Vuex、Pinia 这类状态管理工具，与 “直接封... -
TeachingNote前端
vue3 保持footer 在最底部
flex实现的方式在项目里边的index.html里边加入核心的样式： <!-- 让底部保持在最下方 --> <styl... -
TeachingNote前端
Vue3 布局模板，含 Tab 切换、卡片布局、好看的渐变色搭配
效果图： 代码如下，直接复制在vue项目中运行即可：<template> <div class="course-page&qu... -
TeachingNote前端
element plus upload 常用批量上传逻辑,批量上传附件，存储json字符串的方式
使用存储json字符串的方式添加的时候<template> <el-form-item label="附件资料&quo... -
TeachingNote前端
vue v-html生成的富文本内容让里边的图片最大宽度为100%
这样生成的内容：<div class="tc-blid-content" v-html="state.subProgram.context">... -
剑轩前端
基于Cropper与element plus图片裁剪插件封装，支持图片回显，图片重传等
自己封装的头像裁剪插件：https://www.tnblog.net/aojiancc2/article/details/9710 [TOC]安装依赖npm install c... -
TeachingNote前端
vscode插件使用记录，插件过期与新插件对应记录
vue相关插件TypeScript Vue Plugin插件过期了，可以换成Vue-Official插件 -
TeachingNote前端
vue,js 封装常用工具函数，字符串转bool,字符串转数字
封装字符串转bool,字符串转数字函数/** * 工具函数,字符串转成booler * @param str * @returns */ ex... -
TeachingNote前端
不出现内部纵向滚动条而是直接撑高了整体出现纵向滚动条的排查方法，
要在内部出现纵向滚动条而不是撑高整体肯定要在某一级定一个高度，比如js动态计算了一个高度获知使用height: cal... -
只若初见前端element plus ui暂无组件，暂无数据显示效果
<el-empty v-else description="暂无教案" /> -
TeachingNote前端
js,ts,vue循环生成延迟循环，
直接使用setInterval会一直循环不会结束除非手动去结束，可以循环生成n次setTimeout，然后时间的循环每次递增就... -
TeachingNote前端
vue3切换的时候把除了当前点击的都设置为false
页面如下： <div class="lp-ca-item" v-for="(item, index) in kpCaseList" v-bind:key... -
TeachingNote前端
vue3滚动条默认保持在最底部，让滚动条在每次更新内容时保持在最底部
实现思路：更新内容 → 等待 DOM 更新 → 滚动到底部。代码如下： <template> <div class="ac... -
TeachingNote前端
flex布局，左侧文字，右边按钮，确保右侧的多按钮文字不换行，左侧如果文字超出就出现省略号。优先保证右边的文字不换行哇,确保右侧按钮始终在一行显示。按钮样式
view，html结构<div class="lp-ca-item"> <div class="lp-ca-title">2、... -
TeachingNote前端
element plus 组件中的disabled根据情况来决定是否显示，绑定。按钮组件。按钮根据条件来禁用
按钮组件el-button<el-button size="small" :disabled="item.digital_human_status != 2"... -
TeachingNote前端
vue3左右布局，左右两边宽度不固定，可以拖动中间的分割线实现拖动改变宽度
第一个版本如下<template> <div class="split-panel-container"> <div class=... -
TeachingNote前端
element plus 树形 tree 懒加载的树形，如何动态添加节点
思想思路：数据源里边是默认没有children的或者说没有走children这种结构，所以和正常的操作方法还有点不一样... -
尘叶心简React运行IZTRO紫薇斗数命盘的排盘界面
运行IZTRO紫薇斗数命盘的排盘界面[TOC] Vite创建项目首先我们通过Vite进行项目的创建。pnpm create vite #... -
只若初见前端
element plus 弹窗里边增加可以选择的按钮，弹窗按钮，菜单按钮。vue3 弹窗里边下载模板
[TOC]效果一效果图： view <el-link :underline="false" type="primary" @click=&qu... -
只若初见前端
element plus 日期组件el-date-picker增加时间日期范围,本周上周本月上月本季度上季度时间段。快捷选择
代码如下：<el-date-picker style="width: 100%" v-model="searchForm.dateRange&q... -
剑轩前端
vue 搜索框搜索条件自适应布局，搜索框的内容太多了放不下的解决方法。vue3 搜索条件 如果太多了一行显示不下怎么办。按钮自适应布局
[TOC]Vue3 搜索条件自适应布局方案在 Vue3 中处理搜索条件在不同屏幕尺寸下的显示问题，可以使用以下几种方法实... -
只若初见前端
vue3 简单的element plus 表格table 页面基础模板
[TOC]简单的基础模板<template> <div class="expiredItems-container"> &l... -
TeachingNote前端
vue3 格子报表统计模板
代码如下： <template> <div class="waterFeeStatistics-container"> &... -
只若初见前端
vue3 页面基础模板(里边包括弹窗以及暴露方法出去，父组件调用），也是一个格子报表统计的模板，基础的请求，常用的变量定义等
[TOC]页面模板如下，里边包括的弹窗还包括了一个格子报表统计的模板，基础的请求等 代码如下： <template&g... -
TeachingNote前端
element plus tree 树形中根据一堆id找到这些id数组中的叶子节点。只根据叶子节点来选中树形
找到id中的叶子节点 let leafIds = [] as any // 过滤掉父节点，只留下叶子节点, 用于回显树形的选中 checked... -
TeachingNote前端
grid 布局宽度按比例(fr)自适应布局后,让高度自适应等于宽度
[TOC]问题描述用grid布局使用了一个3等分布局的样式，样式代码如下： .ibl-statistic-wrap { display: gri... -
TeachingNote前端
vue3+vite 修改启动端口。vue-next-admin修改启动端口
在vite.config.ts里边看到端口配置的位置： 可以看到获取的是配置里边的内容，找到配置的地方修改即可： 然后... -
TeachingNote前端
vue3动态生成组件，vue3动态生成element plus组件，动态生成el-tag。数据字典与类型的动态解析
示例代码如下：<template> <el-table :data="tableData"> <el-table-column a... -
TeachingNote前端
vue3 简单的页面基础模板-element plus的弹窗以及暴露方法出去
代码如下： <template> <div class="course-preview-dialog-container"> ... -
TeachingNote前端
vue3 图片裁剪插件cropper，常用的配置。比例配置，裁剪框默认按比例框完整个图片等
[TOC]裁剪比例配置使用aspectRatio属性配置 核心配置如下 this.cropper = new Cropper(this.imageElement, { ... -
TeachingNote前端
element plus el-card 如何穿透 修改里边的样式，修改边距，修改下方横线的样式变粗，修改左右间距和上下间距等。el-card实现表格上方的tab切换菜单
[TOC]直接穿透：<template> <el-card class="custom-card"> <el-tabs class=&... -
TeachingNote前端
vue3封装一个通用的数据字典选择。自定义组件支持v-model双向绑定值，支持change事件，支持传递提示语placeholder
代码如下： <template> <el-select v-model="innerValue" @change=&quo... -
剑轩前端
通过vue-cli命令行创建uni-app项目。调试微信小程序，vscode 开发 uni-app，微信小程序基础开发模板，基础架子搭建。vue3读取环境变量配置，编译配置
tip:搭建的基础开发模板放了一份在FastAdmin.NET里边的FastAdmin.Mobile.Template.Pure，方便直接拉下来使用,不... -
TeachingNote前端
vue uni-app 微信小程序 安装常用依赖
[TOC]安装sass 依赖cnpm install sass sass-loader --save-dev 或者 pnpm install sass sass-loader --save-d... -
TeachingNote前端
uni-app 开发 微信小程序 v-html会生成 rich-text，不好设置图片样式，给图片的最大宽度设置100%
方案一：通过修改数据源添加内联样式（推荐）在绑定v-html的内容中，直接为标签添加内联样式style=”max-width:1...
