个人学习总结
嘘,此处属於婷
这个作者很懒,什么都没留下…
展开
-
css修改图片颜色
原理就是用到css3 滤镜filter中的drop-shadow,该滤镜可以给图片非透明区域添加投影语法:filter:drop-shadow(水平阴影偏移距离 垂直阴影偏移距离 投射的阴影颜色 );首先准备一张背景色透明的图片如下:首先用一个div将该图片包裹住,给图片添加:filter: drop-shadow(15px 0px #fff)这段代码,代表投射出一个和该图片一样的形状,三个参数分别代表:水平向右移动15px,垂直方向不变,投射出的形状颜色为白色。最终将图片改为白色原创 2021-07-20 16:09:15 · 624 阅读 · 0 评论 -
vue-cli3 打包去掉console.log
一、第一步:安装npm install terser-webpack-plugin --save-dev二、第二步:配置vue.config.js module.export = { configureWebpack: (config)=>{ if(process.env.NODE_ENV === 'production'){ config.optimization.minimizer[0].options.terserOptions.compress原创 2021-07-02 09:54:35 · 172 阅读 · 0 评论 -
flex布局实现水平滚动,解决最后一个子元素设置margin-right无效
html:<div class="tabs"> <ul> <li class="active"><span>全部</span></li> <li><span>tab1</span></li> <li><span>tab2</span></li> <li>原创 2021-04-28 10:37:27 · 1555 阅读 · 0 评论 -
RSA在vue中的使用
什么是RSA?RSA加密算法是最常用的非对称加密算法,它既能用于加密,也能用于数字签名。在vue中使用加密1.首先引入jsencryptnpm install jsencrypt --save2.复制代码在main.js中引入import JsEncrypt from 'jsencrypt'Vue.prototype.$jsEncrypt = JsEncrypt3.复制代码将加密解密方法封装到通用的js内let publicKey = '这里是封装的公钥'let privateKey原创 2021-04-02 10:17:25 · 657 阅读 · 0 评论 -
vue中使用Base64编码和解码
1、运行如下命令npm install --save js-base642、在项目文件中引入let Base64 = require('js-base64').Base643、在项目文件中使用编码:Base64.encode('delivery_asn=1') //ZGVsaXZlcnlfYXNuPTE=解码:Base64.decode('ZGVsaXZlcnlfYXNuPTE=') // delivery_asn=1...原创 2021-04-02 10:14:30 · 169 阅读 · 0 评论 -
小程序使用npm
①、在小程序根目录内,初始化npm:npm init②、npm i ‘要下载的模块’ --save③、开发者工具 详情->本地设置->使用npm模块④、开发者工具 工具->构建 npm(每次安装完模块都熬执行)原创 2021-04-02 10:11:30 · 80 阅读 · 0 评论 -
小程序通过useExtendedLib扩展库的方式 引入并使用WeUI
①、在app.ison 中加入 useExtendedLib 字段"useExtendedLib": { "weui": true } ②、在所需要的页面的 json 文件中 加入 usingComponents 字段"usingComponents": { "mp-uploader": "weui-miniprogram/uploader/uploader", "mp-cells": "weui-miniprogram/cells/原创 2021-04-02 10:10:16 · 403 阅读 · 0 评论 -
vue 列表自动滚动到制定位置
① 循环实现列表,为每个item添加id,:id="‘item’ + index",方便后续查找对应项②待列表加载完后,执行滚动事件this.$nextTick(() => { document.getElementById('item'+this.vid).scrollIntoView() })原创 2021-04-02 10:08:29 · 288 阅读 · 0 评论 -
vue-router history 模式页面刷新出现404
nginx配置:location / { try_files $uri $uri/ /index.html; }原创 2021-04-02 10:07:41 · 225 阅读 · 0 评论 -
优化使用elemnt-ui表格表头错位的问题
body .el-table th.gutter{display: table-cell!important;}原创 2021-04-01 10:41:31 · 89 阅读 · 0 评论 -
vue打包时报错:Error: listen EADDRINUSE: address already in use 127.0.0.1:7888
解决办法:①、Windows加r 打开cmd②、运行netstat -ano,找到报错信息提示的端口号那一行,记住最后那个数字③、tskill加后面的数字原创 2021-04-01 10:40:26 · 284 阅读 · 0 评论 -
keep-alive
使用keep-alive 包裹的路由只会加载一次mounted,也不会进desdroy方法,可以使用对应的deactivated,activated方法原创 2021-04-01 10:39:24 · 66 阅读 · 0 评论 -
Date.now()和new.Date().getTime()
都能获取时间戳,但是从性能上来讲Date.now()要快于new.Date().getTime();new Date() 用的时间最多,因为它涉及到类型转换,转换成数字,所以花的时间最多;Date.now() 用的时间最少,它与其它获取时间戳最大的区别就是,一个是 constructor 的 属性,其它是 constructor.prptotype 的属性,实例化的区别,显然实例化对象花的时间更多...原创 2021-04-01 10:38:28 · 1896 阅读 · 0 评论 -
控制input只能数输入大于0的正整数
οnkeyup=“if(this.value.length1){this.value=this.value.replace(/[^1-9]/g,’’)}else{this.value=this.value.replace(/\D/g,’’)}"onafterpaste="if(this.value.length1){this.value=this.value.replace(/[^1-9]/g,’’)}else{this.value=this.value.replace(/\D/g,’’)}”...原创 2021-04-01 10:37:06 · 688 阅读 · 0 评论 -
flex布局让某个子元素靠右显示
①、 .item{margin-left:auto;}②、.item{flex: 1;text-align: right;}原创 2021-04-01 10:35:51 · 394 阅读 · 0 评论 -
解决移动端点击屏幕变蓝的问题
*, *:hover, *:active, ::before, ::after {-webkit-box-sizing: border-box;box-sizing: border-box;-webkit-tap-highlight-color: rgba(0,0,0,0);}原创 2021-04-01 10:35:06 · 325 阅读 · 1 评论 -
根据图片比例只显示中间部分
使用object-fit: cover;object-fit取值contain被替换的内容将被缩放,以在填充元素的内容框时保持其宽高比。 整个对象在填充盒子的同时保留其长宽比,因此如果宽高比与框的宽高比不匹配,该对象将被添加“黑边”。cover被替换的内容在保持其宽高比的同时填充元素的整个内容框。如果对象的宽高比与内容框不相匹配,该对象将被剪裁以适应内容框。fill被替换的内容正好填充元素的内容框。整个对象将完全填充此框。如果对象的宽高比与内容框不相匹配,那么该对象将被拉伸以适应内容框。n原创 2021-04-01 10:34:28 · 147 阅读 · 0 评论 -
new Date(date).getTime()不兼容ios
ios系统认得“/”却不认得“-”,所以需要把"-"转化为“/”。转化方法:new Date(data.replace(/-/g,’/’)).getTime();原创 2021-04-01 10:33:20 · 114 阅读 · 0 评论 -
超出省略变成...
显示一行文字:overflow: hidden;text-overflow: ellipsis;max-width: 590px;white-space: nowrap;显示两行文字:overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;display: -moz-box;-moz-line-clamp: 2;-原创 2021-04-01 10:31:41 · 61 阅读 · 0 评论 -
输入框只能输入大于0的正整数
输入大于0的正整数<input type="text" "if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'')}else{this.value=this.value.replace(/\D/g,'')}" onafterpaste="if(this.value.length==1){this.value=t...原创 2019-04-19 17:54:22 · 6313 阅读 · 0 评论 -
鼠标悬停在一个元素上改变另一个元素的样式
1.A元素是B元素的父级A:hover B{ //鼠标经过A元素时,B元素背景会变成黑色 background:#000;}2.A元素与B元素相邻且A紧接着BA:hover +B { //鼠标经过A元素时,B元素背景会变成黑色 background:#000;}...原创 2019-04-24 17:25:39 · 12428 阅读 · 5 评论 -
根据时区获取时间的方法
//time是时间戳,timeZone是时区function getTimeByTimeZone (time, timeZone) { var d = new Date(); var localOffset = d.getTimezoneOffset() * 60000;//获得当地时间偏移的毫秒数,这里可能是负数 var utc = time + localOffset...原创 2019-07-08 18:12:58 · 1869 阅读 · 0 评论 -
判断是pc端还是手机端
var u = navigator.userAgent; if(!!u.match(/AppleWebKit.*Mobile.*/)){ alert('手机'); }else{ alert('电脑'); }原创 2019-07-08 18:22:57 · 1386 阅读 · 0 评论 -
跳转重新打开新的浏览器
function turn(url){ var params = 'width=' + (window.screen.availWidth) + ',height=' + (window.screen.availHeight) + ',top=0,left=0,fullscreen=yes' + ',t...原创 2019-08-27 11:41:43 · 456 阅读 · 0 评论 -
表单验证——常用正则表达式及方法
常用的表单验证1, 验证时间(20:15或20.15):/^((0[0-9]|1[0-9]|2[0-4]|[0-9])(.|:|:)([0-9]|0[0-9]|1[0-9]|2[0-9]|3[0-9]|4[0-9]|5[0-9]))KaTeX parse error: Can't use function '\u' in math mode at position 13: /2, 验证中文:/...原创 2019-03-14 17:21:51 · 570 阅读 · 0 评论