vue
职场爱学习
职场爱学习,让你35岁没有中年危机。关注“职场爱学习”,快速提升。
展开
-
CDN打不开,导致H5打不开
一直没问题,突然https://www.jsdelivr.com/的vue-video-player插件打不开,报错403,导致整个H5打不开,出现白屏。错误信息如下:403ForbiddenError Times: Thu, 30 Jul 2020 07:18:09 GMTIP: 2409:8954:3090:37ff:1d4a:c622:f526:a325Node information: shanydong26:22URL: https://cdn.jsdelivr.net/npm/vue原创 2020-07-30 15:24:02 · 2061 阅读 · 0 评论 -
图片出现403,无法显示
有些网站做了防盗链的处理,在浏览器打开图片链接可以正常显示,但是使用出现图片无法显示。原创 2020-07-07 15:03:40 · 328 阅读 · 0 评论 -
v-for给@click传参数失败
v-for给@click传参数失败解决方法:把 {{i.roleName}}原创 2020-06-28 11:52:46 · 1864 阅读 · 2 评论 -
远程的crypto-js文件打不开
店铺后台的登录报错,GET https://cdn.bootcss.com/crypto-js/3.1.9/crypto-js.min.js net::ERR_CERT_COMMON_NAME_INVALID原因:远程的cdn文件打不开解决方法:参考官网:https://github.com/brix/crypto-js在package.json文件,添加"crypto-js": “^4.0.0”,在项目的根目录,打开cmd窗口,执行npm install crypto-js --save修原创 2020-06-26 10:28:21 · 1121 阅读 · 0 评论 -
TypeError: Cannot read property thisCompilation of undefined
TypeError: Cannot read property ‘thisCompilation’ of undefined解决方法:把package.json文件的“extract-text-webpack-plugin”: “^4.0.0-beta.0”改成“extract-text-webpack-plugin”: “^3.0.0”然后重新安装,执行npm install...原创 2020-06-26 10:27:29 · 3376 阅读 · 0 评论 -
Your application is running here: http://undefined:80
Your application is running here: http://undefined:80解决方法:把config/index.js文件的host: ‘http://wx-t.test.com’改成host: ‘wx-t.test.com’原创 2020-06-26 10:26:19 · 2081 阅读 · 0 评论 -
vue-loader和webpack不兼容,导致TypeError: Cannot read property vue of undefined
TypeError: Cannot read property ‘vue’ of undefined原因:vue-loader和webpack不兼容。解决方法:修改版本号,对应起来即可。原创 2020-06-26 10:25:01 · 2052 阅读 · 0 评论 -
node-sass插件的安装
修改vue项目的package.json文件,或者做了其它操作,经常会导致整个项目无法运行,这时候,需要安装node-sass插件。安装node-sass插件,常见有2种情况。Node Sass could not find a binding for your current environment: Windows 64-bit with Node.js 11.xFound bindings for the following environments:Windows 64-bit with原创 2020-06-26 10:22:51 · 832 阅读 · 0 评论 -
extract-text-webpack-plugin插件太旧
extract-text-webpack-plugin插件太旧了,一直提示安装webpack@^3.1.0,需要解决,如下npm install extract-text-webpack-plugin@next原创 2020-06-26 10:21:53 · 731 阅读 · 0 评论 -
npm install安装插件
cmd命令窗口,执行npm install报错npm WARN ajv-keywords@3.4.0 requires a peer of ajv@^6.9.1 but none is installed. You must install peer dependencies yourself.npm WARN extract-text-webpack-plugin@3.0.2 requires a peer of webpack@^3.1.0 but none is installed. You m原创 2020-06-26 10:20:31 · 1407 阅读 · 0 评论 -
npm audit fix自动更新插件
node从7升级到11,导致打包报错。vue打包报错run npm audit fix to fix them, or npm audit for details说明:npm audit : npm@5.10.0 & npm@6,允许开发人员分析复杂的代码,并查明特定的漏洞和缺陷。npm audit fix:npm@6.1.0, 检测项目依赖中的漏洞并自动安装需要更新的有漏洞的依赖,而不必再自己进行跟踪和修复。同时,官网中还提供了一些其他的命令,整理如下:运行audit f原创 2020-06-25 10:11:16 · 613 阅读 · 0 评论 -
js打开文件上传窗口
document.getElementById(‘file’ + this.inputId).click();原创 2020-06-25 10:09:48 · 1518 阅读 · 0 评论 -
js删除数组的一个元素
deleteOne(index) {let length = this.guestList.length;for(let i = 0; i < length; i ++) {if(i === index) {this.guestList.splice(index, 1);break;}}}原创 2020-06-25 10:09:16 · 223 阅读 · 0 评论 -
(公开)获取URL的参数
有时候,如果需要避免参数重复出现的问题,就可以使用以下的方式。这样可以避免调用接口报错。因为重复的参数,在调用接口时,会变成一个数组。在PC网页,或者H5中,这个方法特别有用。//获取URL的参数function getUniqueParamFromUrl(name) {let url = window.location.href;let index = url.indexOf(’?’);if(index != -1) {let data = {};let params = url.subs原创 2020-06-25 10:08:38 · 381 阅读 · 0 评论 -
js控制显示/隐藏
document.getElementById(‘outView’).style.display = ‘none’;document.getElementById(‘outShow’).style.display = ‘block’;原创 2020-06-25 10:07:13 · 548 阅读 · 0 评论 -
只允许数字、字母组成
在表单提交时,校验。let reg = new RegExp(/1+$/);if(!reg.test(this.list.key1)) {red.push(‘专属域名有误,只允许数字、字母组成’)arr.push(item.value)}a-zA-Z0-9 ↩︎原创 2020-06-25 10:06:39 · 425 阅读 · 0 评论 -
没有固定高度的元素,水平居中,垂直居中
父级元素,必须设置:width: 100%;height: 100%;margin: 0;padding: 0;.auth-content {width: 7.25rem;height: auto; /高度可以不设置/background-color: transparent;position: relative;margin: 0 auto; /水平居中/top: 50%; /往下移动父级的50%/transform: translateY(-50%); /往上移动原创 2020-06-25 10:04:46 · 606 阅读 · 0 评论 -
vue背景图,用css显示不出来
vue背景图,用css显示不出来background-image: url(’…/…/…/assets/img/shopAuth/power.png’);解决方法:用显示图片,不要用背景图。原创 2020-06-25 10:04:07 · 1301 阅读 · 0 评论 -
一个悬浮在另一个上面
relative是不会使元素脱离文档流的,absolute和fixed则会!父级div用position: relative;有两个子级div,需要悬浮的其中一个div用position: absolute;left: 0px;top: 0px;不需要记忆相对位置、绝对位置,直接套用即可。...原创 2020-06-25 10:03:19 · 668 阅读 · 0 评论 -
图片顶部对齐
vertical-align: top;原创 2020-06-25 09:41:49 · 1004 阅读 · 0 评论 -
限制input输入框的内容长度
maxlength=“32”原创 2020-06-24 09:34:11 · 2395 阅读 · 0 评论 -
文字加中间划线
text-decoration: line-through;原创 2020-06-24 09:33:27 · 1041 阅读 · 0 评论 -
中文首行缩进
4倍还是2倍,根据实际情况调整。p {font-size: 0.1rem;text-indent: 0.4rem; /text-indent是font-size的4倍/}原创 2020-06-24 09:32:57 · 271 阅读 · 0 评论 -
css自动换行,轻松打造完美文字效果
word-wrap: break-word;原创 2020-06-24 09:31:35 · 269 阅读 · 0 评论 -
超出1行、2行用省略号显示
这个效果,不兼容IE,不过还是很好用。.one-line {width: 100px;overflow: hidden; /把超出1行的内容隐藏/white-space: nowrap; /不换行/text-overflow: ellipsis; /用省略号填充尾部/}/超出2行用省略号显示/.two-lines {overflow: hidden; /把超出N行的内容隐藏/text-overflow: ellipsis; /用省略号填充尾部/display: -w原创 2020-06-24 09:31:03 · 351 阅读 · 0 评论 -
img背景图显示不出来
这3个属性必须有,否则图片不能显示。display: inline-block;vertical-align: middle;@include bg-image(’…/…/assets/img/courseDetail/Invitation’);原创 2020-06-24 09:30:21 · 415 阅读 · 0 评论 -
img图片的border-radius无效
padding导致的border-radius: 0.1rem;无效,把padding改成margin即可。原创 2020-06-24 09:29:18 · 4384 阅读 · 0 评论 -
flex垂直居中,最简单的方法之一
display: flex;align-items: center;原创 2020-06-24 09:27:52 · 822 阅读 · 0 评论 -
flex左右对齐
左 右 .ui-group{display: flex;flex-flow: row nowrap;justify-content: space-between;}原创 2020-06-24 09:17:06 · 768 阅读 · 0 评论 -
template元素,默认是隐藏的
元素包裹的内容,默认是隐藏的,自带display:none;属性。元素是不可见的包裹元素,最终的渲染结果将不包含元素。包裹的内容,在激活模板前都不会生效。例如:js脚本不会运行,图片不会加载,视频不会播放等。//js操作元素的dom对象子元素...原创 2020-06-23 09:36:44 · 1772 阅读 · 0 评论 -
页面的滚动条有问题
刚打开页面的时候,是有滚动条的,鼠标点击一下页面,滚动条就消失了,导致页面不能滚动。原因是:点击之后,元素,加上了overflow-y: hidden;所以滚动条消失了。解决办法:必须加上height: 100%;属性。.login-container {background-color: #FFFFFF;height: 100%;overflow-y: auto;}...原创 2020-06-23 09:35:36 · 367 阅读 · 0 评论 -
轮播图el-carousel内,图片的响应式等比缩放
做轮播图的时候,图片不设置宽高,那么,会导致只能显示一部分图片,或者图片被压扁了。所以,需要设置宽度和高度。el-carousel的高度默认是300px,如果里面的图片超出这个高度,就只能显示一部分。因此,需要修改el-carousel的高度。 ...原创 2020-06-23 09:34:49 · 2764 阅读 · 0 评论 -
Element的@mouseleave事件不执行
elementUI把@mouseenter禁止了,需要加上.native。<el-button class=“linkWayBtn” @mouseenter=“showWin = true” @mouseleave=“showWin = false”> 联系方式改成原创 2020-06-23 09:33:34 · 924 阅读 · 0 评论 -
Element的按钮el-button,回到顶部
<el-button class=“linkWayBtn” @click=“toTop”> 回到顶部.linkWayBtn {width: 64px;height: 64px;font-size: 12px;font-family: 微软雅黑;color: #FFFFFF;background-color: #2674bc;padding: 10px 5px;text-align: center;border-radius: 5px;border: none;}原创 2020-06-23 09:32:34 · 788 阅读 · 0 评论 -
router-link加上点击事件
必须加上native。如果需要做比较特殊的功能,建议使用其它dom元素来实现。<router-link @click.native="">原创 2020-06-23 09:31:09 · 3035 阅读 · 1 评论 -
vue导入同级目录组件
vue导入同级目录组件把import authProtocol from “authProtocol”改成import authProtocol from “./authProtocol”vue常识@/表示src目录./表示当前目录原创 2020-06-23 09:30:30 · 4590 阅读 · 1 评论 -
ydui的datetime日期选择组件
动态赋值,无效,在iOS一直显示2010-01-01,但是在android是正确的,如下:this.datetime3 = this.$moment(new Date()).format(‘YYYY-MM’);需要在初始化的时候,直接设置默认值。并且添加属性:init-emit=“false”。但是,仍然有点小问题,第一次弹窗选择日期的时候,弹窗的日期不是设置的默认值。完整例子:import {DateTime} from ‘vue-ydui/dist/lib.rem/datetime’;imp原创 2020-06-23 09:29:53 · 1003 阅读 · 0 评论 -
css不想样式污染,整个项目报错无法运行
<style scoped>改成<style lang="less" scoped>报错。整个项目无法运行。解决方法:vue引用了第三方组件,需要在组件中局部修改第三方组件的样式,而又不想去除scoped属性造成组件之间的样式污染。此时只能通过>>>,穿透scoped。有些Sass 之类的预处理器无法正确解析 >>>。可以使用 /deep/ 操作符( >>> 的别名)把>>>改成/dee.原创 2020-06-23 09:12:45 · 440 阅读 · 0 评论 -
高德地图,选择地点获取经纬度,加上标记点,编辑时自动选中原来的地点
//这个必须放在vue项目的index.html文件才有效。如果是放在某个xxx.vue文件中,是无效的。//高德地图,导航定位location() {//保证地图只初始化一次//初始化,自动定位到IP的当前城市let map = new AMap.Map(‘mapContainer’, {resizeEnable: true});//定位蓝色图标let marker = new AMap.Marker();//搜索AMap.plugin([‘AMap.Autocomplete’], (原创 2020-06-22 10:02:49 · 1732 阅读 · 0 评论 -
阻止点击事件冒泡,点击一次只执行一个函数
默认情况,@click会在执行完attentionShop方法,继续执行goHome方法,需要改成@click.stop。原创 2020-06-22 10:00:32 · 270 阅读 · 0 评论