随笔分类 -  Vue

1 2 3 下一页
图片懒加载方案
摘要：一、img标签loading属性 loading：指示浏览器应当如何加载该图像。允许的值： eager：立即加载图像，不管它是否在可视视口（visible viewport）之外（默认值）。 lazy：延迟加载图像，直到它和视口接近到一个计算得到的距离（由浏览器定义）。目的是在需要图像之前，避免加载 阅读全文
posted @ 2025-07-15 17:45 盼星星盼太阳 阅读(19) 评论(0) 推荐(0)
vue不同路由同一个组件缓存问题
摘要：记一个问题： vue不同路由同一个组件缓存问题，vue缓存时如果发现组件相同，则会认定为同一个。 同一个组件根据不同路由做不同的缓存需在keep-alive的router-view中加上key，如下所示： <keep-alive> <router-view :key="$route.fullPath 阅读全文
posted @ 2025-06-18 16:20 盼星星盼太阳 阅读(33) 评论(0) 推荐(0)
前端预览word几种方案
摘要：一、问题引入 前端需要预览word文档 二、解决方案 1.mammoth.js（不推荐） 页面代码 <el-upload class="upload-demo" action="https://jsonplaceholder.typicode.com/posts/" :on-preview="han 阅读全文
posted @ 2025-04-27 19:51 盼星星盼太阳 阅读(929) 评论(0) 推荐(0)
vue项目使用XLSX插件纯前端导出excel
摘要：一、问题引入 前端el-table表格直接导出为excel文件，无需后端接口返回文件流 二、解决方案 1.插件安装 yarn add xlsx yarn add file-saver 2.转换表格数据 将 el-table 的 tableData 数据格式化成适合 Excel 的结构 // 1. 转 阅读全文
posted @ 2025-03-18 14:18 盼星星盼太阳 阅读(616) 评论(0) 推荐(0)
vue解析markdown格式为html结构
摘要：一、问题引入 AI智能问答对接模型返回的结果大部分都是markdown格式，前端界面展示需兼容 二、marked插件 1.插件安装 yarn add marked 2.插件注册 main.js全局注册： import marked from 'marked'; Object.defineProper 阅读全文
posted @ 2025-03-12 14:09 盼星星盼太阳 阅读(412) 评论(0) 推荐(0)
vue打字机效果
摘要：一、问题引入 AI流行，做一个智能问答的需求 二、解决办法 流式接口响应； 使用插件typeit； 纯代码实现； 三、代码实现 本文着重纯代码实现打字机效果，话不多说，代码如下 1.封装VueTypewriter组件 <!-- * @Description: * @Author: * @versio 阅读全文
posted @ 2025-03-12 13:58 盼星星盼太阳 阅读(506) 评论(0) 推荐(0)
防止浏览器记住密码
摘要：一、问题引入 客户要求登录时，不能被浏览器截取记录密码 二、问题分析 问题的根源就在于浏览器会捕捉你的password的输入记录，以最后一次为节点进行存储。所以不管我们对password做什么处理，只要是password进行了输入，都会被拦截。 三、解决方案 使用css属性-webkit-text- 阅读全文
posted @ 2024-12-05 10:30 盼星星盼太阳 阅读(146) 评论(0) 推荐(0)
vue环境变量配置
摘要：问题引入： 在不同环境引入不同变量实现不同的逻辑处理，例如开发环境访问某个固定地址静态资源，生产环境访问当前部署地址动态地址 环境变量配置： 根目录新增文件： 开发环境： .env.development NODE_ENV = "development" VUE_APP_SYSTEM_PREFIX 阅读全文
posted @ 2024-12-02 15:19 盼星星盼太阳 阅读(197) 评论(0) 推荐(0)
前端开发本地搭建nginx服务相关操作
摘要：问题引入： 前端本地开发，处理bug等，需要连接不同后端或者测试环境服务，前端切换vue.config文件，然后重启耗费较长时间 解决方案： 利用nginx代理，以及启动重载速度快，解决此问题 1.vue.config文件devServe代理修改为本地端口，例如代理本地8080端口 devServe 阅读全文
posted @ 2024-12-02 14:42 盼星星盼太阳 阅读(113) 评论(0) 推荐(0)
el-radio 和 el-cascader点击报错Blocked aria-hidden on a ＜input＞ element because the element that just ...
摘要：一、问题引入 在使用el-radio等组件时，控制台报错 二、解决方案 自定义指令 //单选 Vue.directive('removeAriaHidden', { bind(el, binding) { const ariaEls = el.querySelectorAll('.el-radio_ 阅读全文
posted @ 2024-10-24 11:53 盼星星盼太阳 阅读(3051) 评论(0) 推荐(0)
前端长列表优化
摘要：一、场景引入 长列表网页相信大多数开发者都遇到过，在DOM元素过多的情况下，浏览器渲染会很慢，非常影响用户体验。因此我们会经常采用虚拟滚动、分页、上拉加载更多等不同的方式来进行优化，这些方式的思想都是一样的，都是只渲染可见区域，等用户需要时再加载更多的内容。 二、解决方案 1.css属性 conte 阅读全文
posted @ 2024-01-18 11:25 盼星星盼太阳 阅读(903) 评论(0) 推荐(0)
vue动态绑定style与class
摘要：话不多说，直接上代码 一、动态绑定style // 1、三元表达式 对象形式 <div class="name" :style="{color:state == true ? 'red' : 'black'}">麻辣香锅</div> <div class="name" :style="state = 阅读全文
posted @ 2024-01-18 11:02 盼星星盼太阳 阅读(519) 评论(0) 推荐(0)
Vue中的this.$options.data()和this.$data
摘要：vm.$options 获取Vue实例的自定义属性（如vm.$options.methods,获取Vue实例的自定义属性methods） 获取Vue实例的自定义属性（如vm.$options.data(),获取Vue实例的自定义属性data） 在vue实例中 data是个函数，获取要加() this 阅读全文
posted @ 2023-11-29 16:24 盼星星盼太阳 阅读(580) 评论(0) 推荐(0)
el-table表格行状态进度条
摘要：一、场景引入 项目某些表格，需要展示每条数据不同进度状态，使用进度条来展示 二、解决方案 利用定时器+el-progress组件，列表数据需要返回数据总时间，计算得出进度 代码如下： getTableData() { let _that = this; if (this.showLoading) { 阅读全文
posted @ 2023-10-13 14:03 盼星星盼太阳 阅读(650) 评论(0) 推荐(1)
el-table表格列宽度可拖拽及注意事项
摘要：一、场景 实现表格列宽度可拖拽 二、方案 查阅文档 el-table增加border属性 el-table-colunm增加resizeable属性，若想某一列宽度不可拖拽，设置resizeable属性为false 即可实现 三、问题 1.如表格中有固定列，拖拽折行会导致错位 解决方案：监听鼠标事件 阅读全文
posted @ 2023-09-21 11:28 盼星星盼太阳 阅读(4467) 评论(0) 推荐(0)
Vue中使用Blob下载不同文件
摘要：一、问题引入 Vue项目中，前端下载文件，后台返回的是二进制文件流（blob），前端处理下载不同类型的文件 二、下载方法 说明：使用js原生方式请求ajax进行下载亦可实现，请看本博客其他内容：原生js实现后端返回文件流Blob，前端下载文件 - 盼星星盼太阳 - 博客园 (cnblogs.com) 阅读全文
posted @ 2023-07-27 17:19 盼星星盼太阳 阅读(1398) 评论(0) 推荐(0)
axios请求拦截和相应拦截封装，请求函数封装
摘要：一、封装request文件 1.封装request文件，请求头和响应头做不同处理 2.封装不同请求方法，包括请求头部content-type。包括get post 或者文件流等等 import axios from 'axios'; import { Message } from 'element- 阅读全文
posted @ 2023-07-27 16:59 盼星星盼太阳 阅读(306) 评论(0) 推荐(0)
el-table表头自适应表格内容宽度方法
摘要：一、问题引入 表格内容不一致，需要自适应宽度展示 二、方案一 场景：直接根据表格内容，动态设置宽度，适用于不同权限，内容减少 代码如下 <el-table-column label="操作" class-name="handle-column" :width="autoWidth" align="l 阅读全文
posted @ 2022-12-21 12:05 盼星星盼太阳 阅读(2725) 评论(0) 推荐(0)
el-tooltip根据内容宽度是否显示
摘要：一、问题引入 使用 el-tooltip 时需要根据内容宽度来决定是否显示鼠标移入效果，内容超出省略号（即内容太多）时显示鼠标移入效果 二、代码实现 1、页面元素绑定鼠标事件 <div v-for="(v,i) in configs.filter(v=>v.name 'znkfRecommended 阅读全文
posted @ 2022-12-21 11:11 盼星星盼太阳 阅读(476) 评论(0) 推荐(0)
大屏适配方案
摘要：一、问题引入： 可视化数据大屏需要适配各种大屏尺寸 1080P：1920*1080 2K：2560*1440 左右 4K：3840*2160 左右 8K：7680*4320 左右 二、适配方案分析 如果想简单，客户能同意留白，选用 scale 即可 如果需要兼容不同比例的大屏，并且想在不同比例中都有 阅读全文
posted @ 2022-12-07 17:09 盼星星盼太阳 阅读(4972) 评论(1) 推荐(1)

1 2 3 下一页