![](https://img-blog.csdnimg.cn/20201014180756923.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
Vue
一颗苹果想要成为一个星球
整理、记录自己遇到的问题
展开
-
node16.14.0 对应node-sass sass-loader 版本
node与node-sass sass-loader 版本的对应原创 2022-12-02 13:30:11 · 1621 阅读 · 1 评论 -
数据大屏的适配方案
大屏适配方案转载 2022-10-11 14:57:23 · 385 阅读 · 0 评论 -
Promise.all在项目中的使用
加载页面时,当我们需要等所有接口都执行结束后再结束loading加载,可以这样做原创 2022-08-24 17:10:11 · 268 阅读 · 0 评论 -
vue项目中的防抖和节流实现方法
防抖和节流转载 2022-08-24 17:01:08 · 779 阅读 · 1 评论 -
自定义实现数组、方法深拷贝
自定义实现深拷贝原创 2022-07-18 15:37:07 · 86 阅读 · 0 评论 -
vue中实现打印功能的方法与注意事项
vue中实现打印功能的方法与注意事项原创 2022-06-06 14:54:07 · 9274 阅读 · 0 评论 -
去除字符串中空格的正则表达式
去除字符串内所有的空格str = str.replace(/\s*/g,'');去除字符串内两头的空格str = str.replace(/^\s*|\s*$/g,''); 去除字符串内左侧的空格str = str.replace(/^\s*/,''); 去除字符串内右侧的空格str = str.replace(/(\s*$)/g,'');...原创 2022-05-20 17:00:05 · 525 阅读 · 0 评论 -
2022年前端面试题总结
前端面试题总结原创 2022-02-15 11:38:06 · 1679 阅读 · 0 评论 -
不同域名(多域名)下共享登录状态
不同域名(多域名)下共享登录状态1.传统的做法是可以在cookie里面的domain属性设置需要跨域的域名,这样就可以在多个站点实现共享cookie,也就是可以通过这种方式共享登录状态。这种方式比较简单快捷,但是有一个缺陷就是,共享cookie的站点需要是同一个顶级域名,例如xx1.example.com/xx2.example.com。2.采用的是JWT认证用户,那么,在我的域名下登录后,跳转到另一个需要共享登录状态的域名时,可以将token一起携带过去,这样,目标站点获取到携带的token后存储下来原创 2022-02-25 15:46:44 · 8356 阅读 · 0 评论 -
常见的Vue 自定义指令
Vue 自定义指原创 2022-02-22 20:41:34 · 570 阅读 · 0 评论 -
vue项目解决代码部署后浏览器存在缓存问题的方案
vue项目,代码部署之后,如何解决浏览器存在缓存问题1.在index.html头部添加如下代码:<meta http-equiv="pragram" content="no-cache"><meta http-equiv="cache-control" content="no-cache, no-store, must-revalidate"> 2.在vue.config.js中添加如下代码:const Timestamp = new Date().getTime();原创 2022-02-22 20:40:17 · 2977 阅读 · 0 评论 -
悬浮小广告
<!--悬浮小广告样式的提示信息--> <div id="thediv" ref="thediv" style="position: absolute; z-index: 111; left: 0; top: 0;" v-show="thedivShow" @mouseover="clearFdAd" @mouseout="starFdAd"> <a href="http://xxxxxx" target="_blank"> ..原创 2022-02-18 14:35:37 · 644 阅读 · 0 评论 -
倒计时组件
<template> <div class="_base-count-down no-rtl"> <div class="content"> <slot v-bind="{ d: days, h: hours, m: mins, s: seconds, hh: `00${hours}`.slice(-2), mm: `00${mins}`.slice(-2), ss: `00${原创 2022-02-17 11:03:05 · 86 阅读 · 0 评论 -
加减乘除工具类
在util文件夹中创建calculation.js文件,内容如下:var countDecimals = function(num) { var len = 0; try { num = Number(num); var str = num.toString().toUpperCase(); if (str.split('E').length === 2) { // scientific notation var isDecimal = false;原创 2022-02-16 11:31:38 · 152 阅读 · 0 评论 -
flex结合order实现从左到右的瀑布流
flex结合order实现从左到右的瀑布流这种方式可以做到先从左到右,再从上到下显示缺点:需要预先设定flex容器的高度,且调整页面大小时会出现一些间距过大的问题应对:列表改变时,动态计算flex所需高度缺陷:整体上的每列数量还是按列平均分布的,并未进行填充。关键代码vue//vue代码 watch: { itemList(newVal) { // 为瀑布流重新计算布局 this.$nextTick(() => { const items原创 2022-02-14 17:20:36 · 677 阅读 · 0 评论 -
获取一个对象在数组中的索引
getArrIndex(arr, obj) { let index = null; let key = Object.keys(obj)[0]; arr.every(function(value, i) { if (value[key] === obj[key]) { index = i; return false; } return true; }); return index; },原创 2022-01-20 14:20:34 · 1127 阅读 · 0 评论 -
todo-tree使用设置
"todo-tree.highlights.customHighlight": { "BUG": { "icon": "bug", "foreground": "#F56C6C", "type": "line" }, "FIXME": { "icon": "flame", "foreground": "#FF9800", "type":...原创 2021-10-11 11:26:04 · 774 阅读 · 0 评论 -
npm更换华为镜像
npm更换华为镜像npm config set registry https://mirrors.huaweicloud.com/repository/npm/查看镜像:npm config get registry原创 2021-10-09 14:23:23 · 1149 阅读 · 0 评论 -
工作中常用的前端知识总结
1.使用css写出一个三角形角标元素宽高设置为0,通过border属性来设置,让其它三个方向的border颜色为透明或者和背景色保持一致,剩余一条border的颜色设置为需要的颜色。div { width: 0; height: 0; border: 5px solid #transparent; border-top-color: red;}2.水平垂直居中通常只使用两种方式定位或者flex就足够了。div { width: 100px; he原创 2021-10-05 14:45:17 · 388 阅读 · 0 评论 -
element组件el-table样式重定义 去掉背景色下划线
/deep/ .el-table__body { border-collapse: separate; border-spacing: 0px 20px; } /deep/ .el-table, .el-table__expanded-cell { background-color: transparent; } /deep/ .el-table th, .el-table tr { background-...原创 2021-06-23 10:53:34 · 653 阅读 · 0 评论 -
Vue中的@keyup事件
Vue中的@keyup事件@keyup 是按键松开的事件,当指定的按键松开会触发的事件。比如:平台登录页面使用该事件,当输入账号和密码后,直接回车完成登录@keyup.enter 回车按键松开@keyup.left 左键松开@keyup.right 右键松开@keyup.up 上键松开@keyup.down 下键松开@keyup.delete 删除键松开...转载 2021-06-21 15:27:35 · 2205 阅读 · 0 评论 -
Vue在package.js文件中配置env适配开发环境、测试环境、生产环境
在项目根目录新建三个env文件.env.development //开发环境.env.production //生产环境.env.test //测试环境.env.development 文件内容:NODE_ENV = 'development'VUE_APP_MODE = 'development'VUE_APP_BASE_URL = "http://testapi"....env.production 文件内容:NODE_ENV = 'production'VUE_APP_MOD原创 2021-03-18 17:38:32 · 648 阅读 · 0 评论 -
vue实现悬浮广告样式,图片或文字在屏幕范围内移动
<template> <!--悬浮小广告样式的提示信息--> <div id="thediv" ref="thediv" style="position: absolute; z-index: 111; left: 0; top: 0;" v-show="thedivShow" @mouseover="clearFdAd" @mouseout="starFdAd"> <a href="http://xxxxxx" targ原创 2021-03-17 15:49:45 · 1487 阅读 · 0 评论 -
vue中如何深度监听一个对象?
1.直接监听对象watch:{ obj:{ //监听的对象 deep:true, //深度监听设置为 true handler:function(newV,oldV){ console.log('watch中:',newV) } }}2.监听对象下某个属性data () { return { obj:{ name:'夜空中最亮的星星', age:18 } }转载 2021-02-23 10:56:19 · 686 阅读 · 0 评论 -
如何在页面监听vuex数据变化
//利用计算属性 computed: { userInfo() { return this.$store.state.userInfo; } }, //监听执行 watch: { userInfo(val) { 一些操作 } },原创 2021-02-23 10:46:27 · 573 阅读 · 0 评论 -
vue中 base64 格式与blob互相转换
// base64 格式 getBase64(file) { return new Promise(function (resolve, reject) { let reader = new FileReader(); let imgResult = ''; reader.readAsDataURL(file); reader.onload = function ()..原创 2021-02-22 16:53:40 · 3278 阅读 · 0 评论 -
vue设置固定在底部的footer
vue页面设置固定的头部底部,中间部分自动填充<div class="wrapper"> <div class="header">header</div> <div class="section">section</div> <div class="footer">footer</div></div><style> .wrapper {原创 2020-11-20 16:03:00 · 5775 阅读 · 0 评论 -
Node Sass version 5.0.0 is incompatible with^4.0.0 问题解决
// 卸载node-sassnpm uninstall node-sass// 然后安装4.x版本(5.0之前)npm install node-sass@4.14.1转载 2020-11-16 18:04:37 · 668 阅读 · 2 评论 -
vue-cli4.x 使用 scss 并配置全局变量使用
npm install node-sassnpm install sass-loadermodule.exports = { css: { loaderOptions: { sass: { prependData: `@import "./src/assets/styles/base";`, }, }, },}/* common.scss */$main-color原创 2020-11-13 15:29:04 · 732 阅读 · 0 评论 -
关于VUE 配置文件config详解内容
// const path = require('path');module.exports = { /** 区分打包环境与开发环境 * process.env.NODE_ENV==='production' (打包环境) * process.env.NODE_ENV==='development' (开发环境) * baseUrl: process.env.NODE_ENV==='production'?"https://xxx":'', */ // 项目部署的基础路径转载 2020-11-13 14:56:49 · 515 阅读 · 0 评论 -
app内嵌h5(vue)动态设置页面title方法,适用ios
一. 安装npm install vue-wechat-title --save二. 使用1. 在main.js中引入 import VueWechatTitle from 'vue-wechat-title' Vue.use(VueWechatTitle)2. 在router下的index.js文件中添加meta对象配置title如下:const router = new Router({ routes: [ ... { path: "/index",原创 2020-11-12 16:56:19 · 1314 阅读 · 0 评论 -
如何关闭A cookie associated with a cross-site resource at ... was set without the SameSite attribute.警告
如何关闭A cookie associated with a cross-site resource at xxx.xxx.xxx.xxx was set without the SameSite attribute.这个警告如:A cookie associated with a cross-site resource at http://puser.qingdao.gov.cn/ was set without the SameSite attribute. It has been blocked,原创 2020-08-31 17:11:20 · 1306 阅读 · 0 评论 -
如何在vue中使用md5进行加密
1.安装npm install --save js-md52.使用//在main.js文件中将md5转换成vue原型:import md5 from 'js-md5';Vue.prototype.$md5 = md5;//在需要用到的页面中使用:this.$md5('111111')原创 2020-08-14 09:46:01 · 159 阅读 · 0 评论 -
有关axios的request与response拦截
// http request 拦截器 axios.interceptors.request.use( config => { var token = localStorage.getItem("antToken"); //检查是否有token,有的话说明是已登录,没有就说明未登录 if (token) { //如果登录了就在每个接口的headers里面增加token config.headers.tok原创 2020-08-07 10:09:08 · 1567 阅读 · 1 评论 -
VUE图片资源读取失败时如何显示默认图片
如何实现图片访问失败时显示默认图片,在图片标签中添加方法@error,此方法会在图片资源读取失败时触发,然后在对应的方法中替换图片资源,代码如下://样式<div> <img :src="citem.url" @click="openImg(citem.url,index,cindex)" @error="defaultImgs(index,cindex) “ style="object-fit: cover"</div>//方法 defau原创 2020-07-21 09:36:22 · 237 阅读 · 0 评论 -
解决html页面或vue页面初始进入时页面闪烁。出现{{}}数据的现象
在html页面引用vue.js时出现闪烁{{}}未加载数据以及默认样式,初始一进来闪动太丑了,使用v-cloak完全不起作用,找了很久,发现下面这个方法可行在页面最外层div上加上下面这段语句:<div id='app' style="display: none;" :style="{display: 'block'}">可以生效的原因是:style只有vue渲染的时候才识别,在此之前style=“display: none;” 让页面不显示。vue渲染后,:style="{disp原创 2020-07-10 11:24:11 · 2957 阅读 · 6 评论 -
如何在html页面使用vant组件的dialog弹出框
代码: this.$dialog.confirm({ title: '提示', message: '确定核销?' }).then(() => { console.log('你确定了核销') }).catch(() => { console.log('你取消了核销') });原创 2020-06-30 17:13:54 · 3245 阅读 · 2 评论 -
vue处理数组的几种方法
数组追加array.push(element1[, ...[, elementN]])const array = []array.push(1)console.log(array) //=> [1]array.push(2, 3)console.log(array) //=> [1, 2, 3]console.log(array.length) //=> 3首端添加array.unshift(element1[, ...[, elementN]])const ar原创 2020-06-09 16:04:59 · 2492 阅读 · 0 评论 -
静默授权-前端篇
静默授权-前端篇注:本代码基于vue一、获取code1.存入当前地址,用于回调let baseUrl = window.location.href; // 存入当前地址,需在getCode方法前调用,建议放在created里获取 2.getCode的方法getCode() { const code = this.$route.query.code; // 截取路径中的code,如果没有就去微信授权,如果已经获取到了就直接传code给后台获取openId if (code == n原创 2020-06-02 13:42:39 · 532 阅读 · 0 评论 -
前端VUE如何实现Div自适应等高
前端VUE如何实现Div自适应等高1.利用padding实现2.利用table-cell实现1.利用padding实现样式部分: .content{ overflow: hidden; margin:auto /* 看自己需要设置,不影响div高度变化*/ } .left{ background-color: blue; float: left; width: 30%; margin-bo原创 2020-05-29 15:39:35 · 1718 阅读 · 0 评论