嘘，此处属於婷-CSDN博客

原创 css修改图片颜色

原理就是用到css3 滤镜filter中的drop-shadow，该滤镜可以给图片非透明区域添加投影语法：filter:drop-shadow(水平阴影偏移距离垂直阴影偏移距离投射的阴影颜色 );首先准备一张背景色透明的图片如下:首先用一个div将该图片包裹住，给图片添加：filter: drop-shadow(15px 0px #fff)这段代码，代表投射出一个和该图片一样的形状，三个参数分别代表：水平向右移动15px，垂直方向不变，投射出的形状颜色为白色。最终将图片改为白色

2021-07-20 16:09:15 572

原创 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 152

原创 vue 实现searchBar搜索框页面结果高亮显示

1、第一步：首先创建searchBar.vue组件，页面内容如下<template> <div class='main'> <div class='section_search'> <div class='search_arr'> <img class="searchcion" src="@/assets/img/sgy_search_icon.png" /> <el-input v

2021-06-24 14:16:56 723

原创 vue中使用wavesurfer.js实现语音播放波形显示

效果图如下：1、第一步：使用以下命令安装wavesurfer.js插件库npm install wavesurfer.js --save2、第二步：在compenets文件夹创建voice.vue<template> <div :class="{'voice_wrap':true,'large':duration>40,'middle':duration>20&&duration<41,'small':duration<21}"&gt

2021-06-24 10:22:26 1897 4

原创 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 1441

原创 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 522

原创 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 148

原创小程序使用npm

①、在小程序根目录内，初始化npm：npm init②、npm i ‘要下载的模块’ --save③、开发者工具详情->本地设置->使用npm模块④、开发者工具工具->构建 npm（每次安装完模块都熬执行）

2021-04-02 10:11:30 67

原创小程序通过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 371

原创 vue 列表自动滚动到制定位置

① 循环实现列表，为每个item添加id,:id="‘item’ + index",方便后续查找对应项②待列表加载完后，执行滚动事件this.$nextTick(() => { document.getElementById('item'+this.vid).scrollIntoView() })

2021-04-02 10:08:29 256

原创 vue-router history 模式页面刷新出现404

nginx配置：location / { try_files $uri $uri/ /index.html; }

2021-04-02 10:07:41 209

原创优化使用elemnt-ui表格表头错位的问题

body .el-table th.gutter{display: table-cell!important;}

2021-04-01 10:41:31 73

原创 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 254

原创 keep-alive

使用keep-alive 包裹的路由只会加载一次mounted，也不会进desdroy方法，可以使用对应的deactivated，activated方法

2021-04-01 10:39:24 52

原创 Date.now()和new.Date().getTime()

都能获取时间戳，但是从性能上来讲Date.now()要快于new.Date().getTime()；new Date() 用的时间最多，因为它涉及到类型转换，转换成数字，所以花的时间最多；Date.now() 用的时间最少，它与其它获取时间戳最大的区别就是，一个是 constructor 的属性，其它是 constructor.prptotype 的属性，实例化的区别，显然实例化对象花的时间更多...

2021-04-01 10:38:28 1779

原创控制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 654

原创 flex布局让某个子元素靠右显示

①、 .item{margin-left:auto;}②、.item{flex: 1;text-align: right;}

2021-04-01 10:35:51 369

原创解决移动端点击屏幕变蓝的问题

*, *: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 306 1

原创根据图片比例只显示中间部分

使用object-fit: cover;object-fit取值contain被替换的内容将被缩放，以在填充元素的内容框时保持其宽高比。整个对象在填充盒子的同时保留其长宽比，因此如果宽高比与框的宽高比不匹配，该对象将被添加“黑边”。cover被替换的内容在保持其宽高比的同时填充元素的整个内容框。如果对象的宽高比与内容框不相匹配，该对象将被剪裁以适应内容框。fill被替换的内容正好填充元素的内容框。整个对象将完全填充此框。如果对象的宽高比与内容框不相匹配，那么该对象将被拉伸以适应内容框。n

2021-04-01 10:34:28 124

原创 new Date(date).getTime()不兼容ios

ios系统认得“/”却不认得“-”，所以需要把"-"转化为“/”。转化方法：new Date(data.replace(/-/g,’/’)).getTime()；

2021-04-01 10:33:20 92

原创超出省略变成...

显示一行文字：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 48

原创跳转重新打开新的浏览器

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 428

原创判断是pc端还是手机端

var u = navigator.userAgent; if(!!u.match(/AppleWebKit.*Mobile.*/)){ alert（'手机'); }else{ alert（'电脑'); }

2019-07-08 18:22:57 1350

原创根据时区获取时间的方法

//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 1828

原创密码强度demo（vue实现）

图片示例html<template> <div> <label style='margin-left:40px;'>密码:</label> <input v-model="pwd" id='inputValue' auto-complete="off"></input> <br></br...

2019-05-13 17:14:19 3054

原创带箭头的面包屑导航栏

html<ul class="cssNav"> <li >填写信息</li> <li >提交申请</li> <li class="active">等待审核</li> <li >完成</li> </ul> cs...

2019-05-07 15:32:05 727

原创鼠标悬停在一个元素上改变另一个元素的样式

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 12150 5

原创输入框只能输入大于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 6277

原创 PC端四格密码输入框功能实现

html代码如下比较简洁的一个demo<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>四个密码输入框</title> <script type="text/javascript" src="

2019-03-14 18:04:53 757

原创表单验证——常用正则表达式及方法

常用的表单验证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 537

AiTingYan的博客