前端（全栈）、AI Agent开发技术分享

列表自动滚屏效果常见于大屏开发场景中，本文将讲解用vue3实现一个无缝衔接、滚动平滑的列表自动滚屏效果，并支持鼠标移入停止滚动、移出自动滚动。

web实现主题换肤方案有很多种，例如css变量、动态加载样式文件、js变量。目前流行工程化开发自然少不了css预处理（less/scss）方案，这也是目前在脚手架项目中比较流行实现方案。less/scss实现主题换肤本质就是动态切换节点某个变量，这个变量可以是HTML标签属性值也可以是类名，这个变量位置既可以是最顶层也可以是需要换肤地方（子节点）。变量如果是类名的话需要设置一个独一无二的名称，这个我们无法保证后面开发一不小心类名被重复了特别是团队协同开发，所以更好的选择变量是属性值。//顶层方案。

vue3封装一个省市区选择器组件，通过element-plus Cascader 级联选择器实现

本文将手把手教你封装一个可移动的悬浮框组件，利用悬浮窗在进阶封装一个可展开可移动的扇形悬浮按钮组件。本案例将以移动端为背景采用uniapp技术实现一个三端（H5、小程序、APP）通用的悬浮组件。

海康视频插件v.1.5.2开发教程总结，vue版本开箱即用组件分享

实现一个vue自定义指令——输入框（input,el-input）输入内容类型限制，解决中文输入法双向绑定失效问题，多种类型支持，数字类型，浮点类型、英文类型、整数类型、四则运算等。

功能实现：element UI 的el-table数据导出为execl文件使用到插件：xlsx、file-saver。

1.批量导入模块假设模块目录与 index.js同级index.jsimport Vue from 'vue'import Vuex from 'vuex';Vue.use(Vuex);//导入modules所有模块const modulesFiles = require.context('./modules', true, /\.js$/);const modules={};modulesFiles.keys().forEach(key => { const modu

?语法?.语法。

图片懒加载原理1.初始化src属性设置为默认图片（占位图片）2 .img标签自定义一个属性存储图片真实url3.监听页面滚动，当图片出现在可视区域把真实url赋值给src前2步都很容易实现，第三步怎么判断图片是否出现在可视区域？通过element.getBoundingClientRect()可获知图片顶部和底部分别距离可视区域顶部距离，假设。

已知： axios已通过Vue原型属性设置 （main.js） Vue.prototype.$axios=axios;1.导入文件（上传）：//导入文件 success：成功回调函数 fail失败回调，url:上传地址，that:vue对象（this）function importFile(that,url,success,fail){ let input=document.createElement("input"); input.setAttribute('type','file');

1.主要用途：因组件内无法直接修改prop属性，要想改变prop常规做法需要emit通知父组件修改，sync提供了一种糖语法简写方式，可自动修改prop属性无需在父组件内监听emit事件做响应修改2.常用例子：弹窗的显示关闭控制3.使用方法提炼： xxx.sync, $emit(‘update:xxx’); （其中xxx为prop属性）下面以popup弹窗为例子：实现点击黑色空白区域自动关闭子组件popup.vue<template> <div v-show="show

实现目标调用方法（类似element的loading）：this.loading.show()显示this.loading.show() 显示this.loading.show()显示this.loading.hide()关闭应用vue知识点：extend函数，use函数简单分析，this.loading的实现通过use使用插件方式把loading的实现通过use使用插件方式把loading的实现通过use使用插件方式把loading属性绑定到Vue原型show()和hide()实现通过exten

1.常用例子：一些自定义组件例如radio,checkbox的封装，实现数据双向绑定3.使用方法提炼：export default {data(){return{}},model:{prop:‘xxx’,//接收v-model传入的值,this.xxx访问event:‘xxxx’//emit发送出去定义的事件：this.$emit(‘xxxx’,改变值)；},}以radio封装为例子实现目标类似element 的raido写法：父组件parent.vue <radio

child.vue<template> <div class="child"> <span>{{title}}</span> <button @click="onClick">跳转</button> </div></template><script lang="ts" setup> interface Props{ title?:

export default{data(){ return{ scrollY:0 }},//页面离开前保存滚动条距离.page为滚动元素 beforeRouteLeave(to, from, next) { //保存滚动条元素scrollTop值 this.scrollY = document.querySelector(".page").scrollTop; next(); }, //进入页面 恢复滚动条位置 activated() { d

vue3数学公式

下载并安装node.js安装vuenpm install -g vue卸载旧版脚手架npm uninstall -g vue-cli安装新版脚手架npm install -g @vue/cli查看脚手架版本vue -V新建项目vue create 项目名运行cd 项目名npm run serve打包npm run buildps:淘宝镜像(cnpm)安装npm install -g cnpm --regis...