vue
关注
分享
扫一扫
文章平均质量分 58
大雨倾城
女程序猿一枚，正在努力写bug...
展开
-
vue 前端埋点全流程
企业级的vue 前端埋点全流程，无第三方插件。原创 2023-03-13 12:01:23 · 877 阅读 · 0 评论 -
前端权限点的封装优化
将权限点（变量）解藕，归纳到单独页面中管理；函数通过vuex解藕，能够独立调用，方便管理。// 财账 - 权限// 权限常量‘/api....’只出现一次，方便统一管理export const BACKEND_BEGINTOAUDITING = '/api.edu.admin.edu.v1.EduAdminEdu/BeginToAuditing' // 提交审核权限。原创 2023-02-27 16:11:54 · 344 阅读 · 0 评论 -
Vue 的实用开发技巧
因此相比于 v-if 不断删除和创建函数新的 DOM，v-show 仅仅是在更新现有 DOM 的显隐值，所以 v-show 的开销要比 v-if 小的多，当其内部 DOM 结构越复杂，性能的差异就会越大。但是 v-show 相比于 v-if 的性能优势是在组件的更新阶段，如果仅仅是在初始化阶段，v-if 性能还要高于 v-show，原因是在于它仅仅会渲染一个分支，而 v-show 把两个分支都渲染了，通过 style.display 来控制对应 DOM 的显隐。原创 2023-02-17 09:45:00 · 1124 阅读 · 0 评论 -
vue中动态渲染元素或者标签(不通过v-if,不影响子元素)
需求：在变量isHaveForm为true时，元素标签渲染，为false时，只渲染中的子元素，如果直接用v-if控制达不到要求。vue中动态渲染元素或者标签需求转换成：删除元素，而不删除其子元素自定义指令实现// html 代码 <el-form ref="listQuery" v-el-remove-myself-html="isHaveForm" :model="listQuery" :inline="true"> <el原创 2021-09-03 18:40:04 · 1258 阅读 · 0 评论 -
element ui 表单动态验证，验证规则或触发方式不生效
文章目录1.需求2.完整有效的代码3.代码线上运行链接4.表单验证触发生效的重点1.需求Element UI 里的表单是通过v-for循环渲染出来的，某些表单组件验证的required必填的属性是动态响应的。如图，当选择框不是全部时，输入框必填。2.完整有效的代码// html <el-form :model="dynamicValidateForm" ref="dynamicValidateForm" label-width="100px" class="demo-dynamic"&g原创 2021-09-03 15:07:24 · 2997 阅读 · 0 评论 -
Vue+ElementUI+Axios+腾讯云对象存储实现图片/文件上传
文章目录1.需求：将文件上传至腾讯云私有数据库2.上传至腾讯云3.从腾讯云上下载文件4.参考1.需求：将文件上传至腾讯云私有数据库步骤：安装腾讯云sdk(现在是cos-js-sdk-v5)获取临时身份凭证token,该token被设置为1小时有效拿到临时身份凭证后上传文件将上传后的文件id或者url(看后端需要什么数据)传给后端，在数据库中保存由于是私有库，需要对显示的文件在下载的时候去获取真正的文件地址（如果是共有库，这一步省略）2.上传至腾讯云// html 代码 &l原创 2021-08-31 18:14:56 · 776 阅读 · 0 评论 -
7.1 PWA 使用和配置说明
progressive web app,即渐进式WEB应用，简称PWA。原创 2021-02-25 10:13:08 · 2005 阅读 · 0 评论 -
vue内置的组件transition（形成动画）
在官网中的详细描述：点击打开链接文章目录transition组件出现过度/动画效果的原因transition组件在什么情况下可以生成动画效果transition组件生成动画效果的方式1.CSS 过渡2.过渡可以和其他第三方 CSS 动画库连用3.CSS 动画4.还可以同时使用过渡和动画5.transition组件和JavaScript 钩子连用transition组件出现过度/动画效果的原因当插入或删除包含在 transition 组件中的元素时，Vue 将会做以下处理：自动嗅探目标元素是否应用了原创 2020-10-13 12:18:27 · 4274 阅读 · 0 评论 -
将视频图片截图后，在前端压缩图片再上传
文章目录要点：方案：canvas绘制矩形的函数canvas绘制路径(轮廓)的函数添加样式和颜色绘制文本canvas操作视频完整案例要点：图片的大小由分辨率（长像素点*宽像素点）和位深度（由生成的图片是png/jpeg）决定（图像数据量大小=图像中的像素总数×图像深度 ÷ 8 ÷ 1024），图像深度决定图像能够显示的颜色种类。jpg是有损压缩格式，png是无损压缩格式。同一张图片，jpg的大小比png格式的大小小1.5倍。jpeg使用的一种失真压缩标准方法;PNG格式是无损数据压缩方法。canva原创 2020-06-30 10:29:41 · 705 阅读 · 0 评论 -
vue 项目将编辑框输入的html带样式下载成文档
文章目录1.需求：2.代码1.需求：利用markdown插件，将生成的html带样式保存成文档2.代码 // 获取编辑框的 html handleSave(): void { const renderContent = (this.$refs.editor as any).d_render // 处理得到的<html> 标签 const htmlElement = document.createElement('html') htmlEleme原创 2020-06-04 13:44:35 · 409 阅读 · 0 评论 -
给elementUI事件回调函数增加自定义参数
举例：上传头像成功的回调函数，没有自定义的index 改变 ：通过在回调函数里定义自己的参数的形式来保留默认参数，同时也可以自己传参数 :on-success="(res,fileList)=>handleAvatarListSuccess(res,fileList,index)"<el-upload v-for="(item,index) in 5" ...原创 2020-05-08 10:33:07 · 2780 阅读 · 1 评论 -
element-ui 三级联选择器的使用 el-cascader
<el-cascader :options="options" // 存放省市县数据的变量 v-model="selectedOptions" // 存放被选择数据的变量 expand-trigger="hover" // 实现鼠标悬停时调用下方绑定的函数handleItemChange placeholder="请选...原创 2020-05-08 10:20:47 · 1333 阅读 · 0 评论 -
记一次vue 的keep-alive踩坑之路 —— active和deactivated()函数不执行
现象：路由頁面被缓存，销毁阶段函数不执行，active和deactivated()函数不执行，进入页面的created函数（创建期函数）执行。原因：<template> <div id="app"> <keep-alive v-if="$route.meta.keepAlive"> <div> //未激活 ...原创 2019-12-11 15:36:45 · 4917 阅读 · 0 评论 -
vue scoped 穿透_vue 修改内部组件样式问题
方法一，有scope和less情况下，用/deep/修改第三方库的样式，#qrcode为组件自定义名称， img为第三方库元素。<style scoped lang="less">#qrcode{ text-align: center; padding-bottom: 38px; /deep/ img{ ...原创 2019-09-26 15:24:18 · 586 阅读 · 0 评论 -
在vue中引入外部css文件样式
1.在src/assets/css目录下新建scss文件，my-mint.scss，内容如下：2.在文件样式中写入样式3.在main.js中引入则为全局。4.import ‘./assets/css/my-mint.scss’;//全局修改mint-UI样式5.在局部引入：在样式标签下方写成 @import“…/…/…/assets/css/my-mint.scss”引入...原创 2019-07-29 14:56:44 · 4299 阅读 · 0 评论 -
vue上传文件（图片），并预览图片的方法（不使用第三方库）
+思路：1.点击 input标签，打开文件库，点选图片后，执行uploadFile(event)函数.<fontcolor=red>注意：要是change事件</font>2.在uploadFile(event)函数 .<font color=red>注意：要是change事件</font&...原创 2019-07-26 11:26:50 · 5462 阅读 · 0 评论 -
vue项目优化之侦听器watch防抖版
watch: { firstName: function(val) { console.log(520); clearTimeout(this.firstTimeout); this.firstTimeout = setTimeout(() => { this.fullName = val + " " + this.lastNam...原创 2019-08-01 11:28:45 · 1007 阅读 · 0 评论 -
vue将电话号码中间的几位数隐藏显示
1字符串转化成数组2.将数组中的4-7位变成* phoneNumFilter (phone) { // 1字符串转化成数组 let phoneArr = [...phone]; // 2.将数组中的4-7位变成* phoneArr.map((res, index) => { if (index > 2 &&...原创 2019-08-08 09:31:55 · 7203 阅读 · 4 评论 -
[vue-router] Duplicate named routes definition
浏览器告警信息 [vue-router] Duplicate named routes definition: { name: “index”, path: “/index” }说明路由重复举 例 { path: ‘’, name: ‘index’, redirect: ‘/fiibox/personHome’ },改正： { path: ‘’, name: ’ ', redirect:...原创 2019-08-02 09:49:41 · 71052 阅读 · 1 评论 -
vue 中无法上传同一张图片的问题
1.原因：同一张图片，无法触发chang事件2.解决：将图片push进变量保存（多张图片）将input的value值清空 reader.onload = function () { // 读取完成后，将图片push进函数保存 that.adviceImg.push(this.result); } c...原创 2019-08-07 10:28:35 · 918 阅读 · 0 评论 -
vue中实现监听滚动事件的方法
实现监听局部滚动HTML代码 <section @scroll="scrollEvent" ref="scrollDiv"> <router-view></router-view> //滚动部分 </section>js代码 scrollEvent () { console.log(th...原创 2019-08-23 18:56:17 · 6668 阅读 · 0 评论 -
vue中获取Error: timeout of 50ms exceeded
现象：解决1.axios请求超时，返回的error是一个对象，用typeof检测是object,error对象的具体内容如下图：2.如何得到 timeout of …,用返回的对象调用message即可，例如error.message3.axios.defaults.timeout = 50; // 超时时间（在拦截器中统一设置超时时间）4.具体如何设置请求时间点击此处...原创 2019-08-16 16:01:25 · 15592 阅读 · 5 评论 -
vue 跨域问题XMLHttpRequest cannot load http://xxx.xxx No 'Access-Control-Allow-Origin'
在根目录下建立vue.config.js文件如下配置：方法一：module.exports = { devServer: { disableHostCheck: true, https: false, // https:{type:Boolean} // open: true, // 配置自动启动浏览器 proxy: 'h...原创 2019-08-21 20:05:03 · 2000 阅读 · 0 评论 -
H5页面镶嵌到安卓，报错:undefined is not a function错误解决
描述：在网页调试时，没有报错，去安卓端后报错，并且不发送请求，排除安卓端错误后，发现是安卓端不支持FormData.get(‘url’)的函数。解决思路：1.逐渐缩小范围，定位问题2.在该功能的每一个函数前后都加上打印，看函数执行到哪里停止。...原创 2019-09-09 17:41:39 · 3149 阅读 · 0 评论 -
在vue中引入多个script标签
注意：vue是单文件，只能直接引入一个script标签，其他的需要去创建。1.可以在index.html中引入，在HTML文件中可以引入多个script标签。 <head> <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=lOOL1od96eckPqskoI...原创 2019-09-17 13:57:39 · 20401 阅读 · 0 评论 -
POST请求（Form Data格式 ）后端拿不到值的解决方法
1.需求后台要求请求头是Content-Type：application/x-www-form-urlencoded（设置请求头的意思是告诉后端传过去的数据是原生的表单格式，但是并没有改变传给后端的数据格式，所以需要对数据格式进行转换）2.方法解决方法一：安装qs插件在main中引入import qs from ‘qs’;将传给后端的参数进行转化qs.stringify({key1:...原创 2019-07-01 18:36:22 · 31061 阅读 · 1 评论