随笔分类 -  Vue

1 2 3 下一页
防止浏览器记住密码
摘要：一、问题引入 客户要求登录时，不能被浏览器截取记录密码 二、问题分析 问题的根源就在于浏览器会捕捉你的password的输入记录，以最后一次为节点进行存储。所以不管我们对password做什么处理，只要是password进行了输入，都会被拦截。 三、解决方案 使用css属性-webkit-text- 阅读全文
posted @ 2024-12-05 10:30 盼星星盼太阳 阅读(42) 评论(0) 推荐(0) 编辑
vue环境变量配置
摘要：问题引入： 在不同环境引入不同变量实现不同的逻辑处理，例如开发环境访问某个固定地址静态资源，生产环境访问当前部署地址动态地址 环境变量配置： 根目录新增文件： 开发环境： .env.development NODE_ENV = "development" VUE_APP_SYSTEM_PREFIX 阅读全文
posted @ 2024-12-02 15:19 盼星星盼太阳 阅读(133) 评论(0) 推荐(0) 编辑
前端开发本地搭建nginx服务相关操作
摘要：问题引入： 前端本地开发，处理bug等，需要连接不同后端或者测试环境服务，前端切换vue.config文件，然后重启耗费较长时间 解决方案： 利用nginx代理，以及启动重载速度快，解决此问题 1.vue.config文件devServe代理修改为本地端口，例如代理本地8080端口 devServe 阅读全文
posted @ 2024-12-02 14:42 盼星星盼太阳 阅读(26) 评论(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 盼星星盼太阳 阅读(2517) 评论(0) 推荐(0) 编辑
前端长列表优化
摘要：一、场景引入 长列表网页相信大多数开发者都遇到过，在DOM元素过多的情况下，浏览器渲染会很慢，非常影响用户体验。因此我们会经常采用虚拟滚动、分页、上拉加载更多等不同的方式来进行优化，这些方式的思想都是一样的，都是只渲染可见区域，等用户需要时再加载更多的内容。 二、解决方案 1.css属性 conte 阅读全文
posted @ 2024-01-18 11:25 盼星星盼太阳 阅读(692) 评论(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 盼星星盼太阳 阅读(462) 评论(0) 推荐(0) 编辑
Vue中的this.$options.data()和this.$data
摘要：记一个用法，当编辑回显表单的时候，resetFields不能重置表单的问题 this.$data 获取当前状态下的data this.$options.data() 获取该组件初始状态下的data 阅读全文
posted @ 2023-11-29 16:24 盼星星盼太阳 阅读(474) 评论(0) 推荐(0) 编辑
el-table表格行状态进度条
摘要：一、场景引入 项目某些表格，需要展示每条数据不同进度状态，使用进度条来展示 二、解决方案 利用定时器+el-progress组件，列表数据需要返回数据总时间，计算得出进度 代码如下： getTableData() { let _that = this; if (this.showLoading) { 阅读全文
posted @ 2023-10-13 14:03 盼星星盼太阳 阅读(511) 评论(0) 推荐(0) 编辑
el-table表格列宽度可拖拽及注意事项
摘要：一、场景 实现表格列宽度可拖拽 二、方案 查阅文档 el-table增加border属性 el-table-colunm增加resizeable属性，若想某一列宽度不可拖拽，设置resizeable属性为false 即可实现 三、问题 1.如表格中有固定列，拖拽折行会导致错位 解决方案：监听鼠标事件 阅读全文
posted @ 2023-09-21 11:28 盼星星盼太阳 阅读(3726) 评论(0) 推荐(0) 编辑
Vue中使用Blob下载不同文件
摘要：一、问题引入 Vue项目中，前端下载文件，后台返回的是二进制文件流（blob），前端处理下载不同类型的文件 二、下载方法 说明：使用js原生方式请求ajax进行下载亦可实现，请看本博客其他内容：原生js实现后端返回文件流Blob，前端下载文件 - 盼星星盼太阳 - 博客园 (cnblogs.com) 阅读全文
posted @ 2023-07-27 17:19 盼星星盼太阳 阅读(1140) 评论(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 盼星星盼太阳 阅读(275) 评论(0) 推荐(0) 编辑
el-table表头自适应表格内容宽度方法
摘要：一、问题引入 表格内容不一致，需要自适应宽度展示 二、方案一 场景：直接根据表格内容，动态设置宽度，适用于不同权限，内容减少 代码如下 <el-table-column label="操作" class-name="handle-column" :width="autoWidth" align="l 阅读全文
posted @ 2022-12-21 12:05 盼星星盼太阳 阅读(2267) 评论(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 盼星星盼太阳 阅读(429) 评论(0) 推荐(0) 编辑
大屏适配方案
摘要：一、问题引入： 可视化数据大屏需要适配各种大屏尺寸 1080P：1920*1080 2K：2560*1440 左右 4K：3840*2160 左右 8K：7680*4320 左右 二、适配方案分析 如果想简单，客户能同意留白，选用 scale 即可 如果需要兼容不同比例的大屏，并且想在不同比例中都有 阅读全文
posted @ 2022-12-07 17:09 盼星星盼太阳 阅读(4621) 评论(1) 推荐(1) 编辑
Vue 操作数组问题
摘要：一、问题引入 由于 JavaScript 的限制，Vue 不能检测到以下数组的变动： 当你利用索引直接设置一个数组项时，例如：vm.items[indexOfItem] = newValue 当你修改数组的长度时，例如：vm.items.length = newLength 二、解决方法 为了解决第 阅读全文
posted @ 2022-10-25 16:09 盼星星盼太阳 阅读(59) 评论(0) 推荐(0) 编辑
父组件和子组件生命周期钩子函数执行顺序
摘要：Vue 的父组件和子组件生命周期钩子函数执行顺序可以归类为以下 4 部分： 加载渲染过程 父 beforeCreate -> 父 created -> 父 beforeMount -> 子 beforeCreate -> 子 created -> 子 beforeMount -> 子 mounted 阅读全文
posted @ 2022-10-25 16:06 盼星星盼太阳 阅读(37) 评论(0) 推荐(0) 编辑
父组件监听到子组件的生命周期
摘要：一、问题引入 父组件监听到子组件的生命周期 二、$emit手动触发 // Parent.vue <Child @mounted="doSomething"/> // Child.vue mounted() { this.$emit("mounted"); } 三、@hook钩子 // Parent. 阅读全文
posted @ 2022-10-25 16:03 盼星星盼太阳 阅读(38) 评论(0) 推荐(0) 编辑
axios 获取服务端自定义设置的响应头问题
摘要：一、问题引入 前端post请求文件下载，需要获取响应头中的文件名，文件名由后端放在自定义响应头中，或者放在Content-Disposition响应头中，本地调试获取不到自定义响应头数据 二、问题解决 思路： 1.首先检查响应拦截器是否直接返回的res.data,这个时候获取的是不包含请求头的，所以 阅读全文
posted @ 2022-09-14 16:28 盼星星盼太阳 阅读(1975) 评论(0) 推荐(0) 编辑

1 2 3 下一页
点击右上角即可分享
微信分享提示