[TOC]监听滚动对象的问题,正确找到滚动事件的监听对象该项目vue3的布局页有使用el-scrollbar，代码如下：
<template>
<el-container class="layout-container">
<LayoutAside />
<el-container class="layout-container-view h100">
...
2025-10-29
浏览（1400）
[TOC]安装依赖npm install cropperjs@1.6.2 --save
其他版本用法可能不一样
封装的组件如下创建：AvatarCropper.vue
<template>
<div class="avatar-cropper-container">
<!-- 头像显示区域 - 根据showDefaultAvatar控制是否显示 -->
<div
v-if="show...
2025-09-01
浏览（1620）
qrcodejs2-fix 是 qrcodejs2 的一个修复版本，专门解决了在现代前端框架（包括 Vue3）中使用时可能出现的兼容性问题，比如错误： “Cannot read properties of undefined (reading ‘_android’)”。[TOC]环境安装npm i qrcodejs2-fix --save
基础的使用<template>
<div class="qrcode-demo&qu...
2025-08-21
浏览（1472）
自己封装的头像裁剪插件：https://www.tnblog.net/aojiancc2/article/details/9710
[TOC]安装依赖npm install cropperjs@1.6.2 --save
其他版本用法可能不一样
封装的组件如下<template>
<div class="image-cropper-container">
<!-- 虚线框上传区域 -->
<div
...
2025-07-07
浏览（1972）
[TOC]Vue3 搜索条件自适应布局方案在 Vue3 中处理搜索条件在不同屏幕尺寸下的显示问题，可以使用以下几种方法实现自适应布局：
1. 使用 CSS Flexbox 的自动换行<template>
<div class="search-container">
<div v-for="item in searchItems" :key="item.id"...
2025-05-12
浏览（2767）
tip:搭建的基础开发模板放了一份在FastAdmin.NET里边的FastAdmin.Mobile.Template.Pure，方便直接拉下来使用,不用每次起新项目都重复的去搭建一次[TOC]通过vue-cli命令行创建uni-app项目官方文档：https://uniapp.dcloud.net.cn/quickstart-cli.html
通过命令行创建vue3/vite的基础项目：
npx degit dcloudio/uni...
2025-03-18
浏览（3271）
这里的示例代码是做的县镇村tree懒加载联动数据。接口数据这些换成自己的就行。有根据countyId查询区县下面镇的数据，有根据镇id查询镇下面村的数据等待接口。受限这些原始的表结构，县镇村是三种不同的表，这个接口根据自己的实际情况出来就行。[TOC]基础的代码如下<template>
<div class="a...
2025-03-12
浏览（2180）
[TOC]其他资料我没有写到博客里边的位置在：D:\学习研究\软件架构,发布运维相关,前端的学习积累\19：前端的学习积累\1：前端的富文本编辑器Tinymce的使用
上传图片，首先要启用图片插件在plugins参数中把image加进去
在工具栏显示图片工具按钮，在toolbar参数中把image加进去
toolbar我这里是在使用的时候单独...
2025-02-19
浏览（2925）
比如我绘制两个字，drawText(‘李白’, 32,’Arial’, ‘#062466’, 516, 335)，最后两个参数是x,y坐标。这样可以文字居中绘制，但是如果绘制的文字变成了三个字，比如drawText(‘黄飞鸿’, 32,’Arial’, ‘#062466’, 516, 335)，文字就没有居中了，但是这里的文字是动态的，无法知道是2个字还是3个字，甚至可能...
2024-12-17
浏览（2683）
直接调用接口上传参考:https://www.tnblog.net/notebook/article/details/8495[TOC]基础的图片上传，文件上传，视频上传界面就是这样的：
界面当中的部分代码如下<div class="img-waper">
<div class="add-btn" @click="addImgClick">
<input
...
2024-12-09
浏览（2989）
[TOC]其实原理非常简单，就是获取屏幕的高度然后减去其他内容占用的高度就行了。
核心代码如下<script setup lang="ts">
import {reactive, onMounted, toRefs, ref } from 'vue';
const state = reactive({
contentHeight:"350px",
});
onMounted(() => {
...
2024-11-15
浏览（3062）
设计图：
[TOC]具体的代码和样式（表格没有加上合并行的）关于自定义边框样式都加了星号的
<template>
<div class="app-container">
<el-table :data="tableData" :header-cell-style="headerCellStyle" :row-style="rowStyle" :border="...
2024-10-15
浏览（3712）
[TOC]效果图：
代码结构如下<!-- 好像要从1开始才能默认在第一个菜单开始显示呢...，所以这里减一个1，数据源哪里是加了1的 -->
<scroll-view class="top-menu-view" scroll-x="true" :scroll-into-view="tabCurrent">
<div class="menu-topic-view"...
2024-09-19
浏览（2356）
每个属性都自动换行了，这个是vscode代码格式化设置的问题。解决方法如下。
一：按下Ctrl + ,（或者Cmd + ,在Mac上）打开设置。找到当前使用的格式化插件搜索：vetur.format.defaultFormatter.html表示html使用的格式化插件
可以看到我目前使用的vue html格式化插件是Prettier,当然如果你装了更多vue html的格...
2024-09-18
浏览（3739）
实现效果：
核心样式.good {
background: rgba(0, 180, 255, 0.5);
border: 1px solid #00b4ff;
box-shadow: 0px 0px 10px 1px #00b4ff inset; /* 内阴影，模拟边框高亮效果 */
}
所有的Html结构和样式<template>
<div class="baseData-container">
<div c...
2024-09-12
浏览（2263）
在 Vue 3 中，provide 和 inject 是用于实现跨组件通信的 API，特别是当组件层次结构较深时很有用，不然如果层级太深了要一级一级的往下传比较麻烦，用provide 和inject，可以在整个组件树中共享。
[TOC]基础使用父组件父组件赋值之后可以在整个组件树中都获取到值，后代子组件都能获取到值
<script lang=&quo...
2024-08-20
浏览（2906）
上传图片文件还可以参考：https://www.tnblog.net/aojiancc2/article/details/8233 这个里边有关于.net6实现图片上传后端的 然后后台图片文件存储是自己搭建图片服务minio[TOC]实现的效果上传图片之前的效果：
上传图片之后的效果：
封装的上传组件<!--
项目：图片上传插件
备注：接口的返回值是否符合插件...
2024-07-26
浏览（3885）
[TOC]效果一这个是小程序端的用的
设计图：
view:
<view class="seach-box">
<view class="seach-box-wrap">
<view class="seach-box-icon">
<image :src="`${CssImgPath}/imgs/search.png`" class="seach-box-i...
2024-07-01
浏览（3271）
[TOC]效果如下
切换的时候会有动态的效果
代码如下，纯HTML+CSS样式里边的注释都写得比较清晰了，需要自定义效果，圆角什么的自行修改即可
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" con...
2024-06-05
浏览（3156）
虽然可以用一些时间轴组件比如，timeline，但是有时候还是自己写点样式定制性好一点，不需要像组件那么通用。[TOC]时间轴效果一效果图
具体的代码和样式<template>
<view class="teaching-dynamics-container">
<view class="tdc-course-info">
...
2024-05-31
浏览（3729）
;
50010702506256
