![](https://img-blog.csdnimg.cn/20201014180756925.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
Web前端
weixin_189
这个作者很懒,什么都没留下…
展开
-
vue2 下载依赖报错 code ERESOLVE 处理方案
npm install 报错 code ERESOLVE 及解决方案原创 2022-10-12 09:05:37 · 744 阅读 · 1 评论 -
谷歌浏览器安装 vue调试工具 vue-devtools 最简单的方法
如果你在使用vue开发项目 浏览器中没有安装vue调试工具 显然不能算是一个合格的vue开发者vue-devtools 开发工具能帮我查看当前组件的显示状态和 追踪vuex中数据状态 能帮我们的开发达到一个事半功倍的效果1.直接在线下载好 插件 解压下载地址:https://chrome.zzzmh.cn/info?token=nhdogjmejiglipccpnnnanhbledajbpd // 点击推荐下载2.在谷歌浏览器地址中输入chrome://extensions/ .原创 2022-04-20 19:43:23 · 1517 阅读 · 0 评论 -
前端 常用的加密方法有4种
1、md5加密:md5.jsmd5.js 共有6中加密方法:hex_md5(s), b64_md5(s), str_md5(s), hex_hmac_md5(key, data), b64_hmac_md5(key, data), str_hmac_md5(key, data) var pwd = hex_md5(“val”); // val表示加密前的值console.log(pwd); // pwd表示加密后的值2、base64加密:base64.jsvar b = new Base64(原创 2022-03-14 10:21:22 · 11999 阅读 · 0 评论 -
css的class常用命名规则
CSS的class、id、css文件名的常用命名规则 (一)常用的CSS命名规则 头:header 内容:content/container 尾:footer 导航:nav 侧栏:sidebar 栏目:column 页面外围控制整体布局宽度:wrapper 左右中:left right center 登录条:loginbar 标志:logo 广告:banner 页面主体:main 热点:hot 新闻:news...原创 2021-06-17 11:39:52 · 1228 阅读 · 0 评论 -
前端规范总结
前端规范大总结规范目的:为了提高工作效率,便于后台人员添加功能及前端后期优化维护,输出高质量的文档,在网站建设中,使结构更加清晰,代码简明有序,有一个更好的前端架构。规范基本准则:符合web标准,使用具有语义的标签,使结构、表现、行为分离,兼容性优良。页面性能优化,代码简洁、明了、有序,尽可能的减少服务器的负载,保证最快的解析速度。 一、文件规范1.1 HTML部分 1.1.1 建包问题 文件均归档至约定的目录中,建包格式如下: 注意:所有的css文.原创 2021-06-17 11:34:50 · 358 阅读 · 0 评论 -
JS判断用户是否离开页面,是否打开页面或回到页面
document.addEventListener('visibilitychange', function () { // 用户息屏、或者切到后台运行 (离开页面) if (document.visibilityState === 'hidden') { console.log('hidden') } // 用户打开或回到页面 if (document.visibilityState === 'visible') { ..原创 2021-06-10 16:29:44 · 2808 阅读 · 1 评论 -
Vue v-model绑定数据不实时更新解决办法 深拷贝
情况一:简单的数据展示上不刷新1.$set()方法重新渲染this.$set(this.student,"age", 24)//this.student为你在data中声明的数组名,‘age’是你要改变的数组下的指定字段名,24是你要变化的值2.深拷贝let name2 = JSON.parse(JSON.stringify(this.name));//执行完业务代码后this.name = name2...原创 2021-04-28 10:01:23 · 1603 阅读 · 1 评论 -
菜单 选中 和未选中的 点击效果
效果: <div class="roleLeft"> <div class="head-tit ellipsis">角色类型</div> <ul> <li v-for="(item,index) in roleList" .原创 2021-04-07 11:21:20 · 218 阅读 · 0 评论 -
iview 实现 Tree 多组 多选功能 实例 根据递归 获取默认选中的
功能结果如下:: 简单介绍: 这个是根据iview ui 中的 Tree组件更改后实现的效果 ; 分为多组 3级 选择功能 ,可以获取默认选中默认选中这里是根据 递归实现的 ,特此记录 ,话不多说,上全部代码:让你拿来即用html:<div class="access"> <div class="group_item"> <spin v-if="roleLoading" style="margin-left:...原创 2021-04-07 11:13:44 · 977 阅读 · 1 评论 -
js 正则 限制 input 只能输入数字,不能输入特殊符号,保留两位小数等效果
限制只能输入数字,小数点只保留2位,限制不能输入空格<div id="app"> <input type="text" v-model="a" @input="change(a)" /> </div><script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script><script type="text/javascript"> new Vu...原创 2021-03-26 11:11:39 · 3328 阅读 · 0 评论 -
element ui 三级 省 市 县 多选 全选 效果 实例
<div class="filter-diqu" v-if="organFilterShow"> <div class="deliverySetting-table"> <div class="table-head"> <label class="filter-name">所属地区:</label> <div class="selecti...原创 2021-03-18 21:56:58 · 749 阅读 · 2 评论 -
antd 日期 moment 各种获取 月份,年份,日期,星期等方法
antd时间选择器 disabledDate(current) { // Can not select days before today and today return current < moment().subtract(1, "day") ;//当前以前 // return current && current < moment().endOf('day');//包含当前天以前 }, 大于当前日期不能选 ti.原创 2021-02-03 10:28:17 · 6238 阅读 · 4 评论 -
vue 封装 按钮button组件
组件放项目目录: src/components 下面PlainButton组件 效果图 index.js 文件export { default } from "./PlainButton.vue";PlainButton.vue<template> <button :class="[size, type]"> <span v-if="slots.default"><slot /></sp...原创 2021-01-15 18:03:45 · 1308 阅读 · 0 评论 -
vue项目 安装 EasyScroll 滚动条 插件步骤
第一步:安装npm isntall --save easyscroll第二步:在main.js引入 ,这里是vue3.x的main.js第三步:页面使用<EasyScrollbar></EasyScrollbar>原创 2021-01-12 19:27:11 · 326 阅读 · 0 评论 -
RecycleScroller vue-virtual-scroller 安装命令
https://www.npmjs.com/package/vue-virtual-scroller原创 2020-12-24 16:20:34 · 3140 阅读 · 2 评论 -
Chrome调试时跨站不能设置cookie问题
一直使用IIS配置开发前端页面,连接的后台服务,今天开机打开登录发现登陆不成功,查看请求时发现登陆请求设置的set-cookie path后还跟这一个感叹号,登陆成功调用其它接口时发现请求没有cookie了,然后就一通查询啊,发现CHROME 80版本以后,SAMESITE COOKIE验证跨站问题,this set-cookie didn't specify a "SameSite" attribute,然后变成默认Lax。然后我搜索了一下Samesite定义,有三个值,None, L原创 2020-12-18 16:14:04 · 498 阅读 · 2 评论 -
vue 正则验证 input 输入0-100的正整数 删除input框后面的上下箭头 样式 ant design vue a-input-number标签
//推荐使用 formatter :实时验证,输入值大于100时显示100,并且不显示多余的数字;值为空时显示0 ;如果不满足需求你可以在接着改代码示例:<a-input-number v-model:value="item.rankScore" :min="0" :max="100" :formatter="formatter" @change="handleChange(item)" style="width: 60px;"/>//不推荐使用//只是..原创 2020-11-24 12:41:45 · 3942 阅读 · 0 评论 -
vue 实现数字翻转效果 时间翻转效果 分装组件 方便调用
实现效果图:带背景的效果 (数字,时间,百分比)<template> <div class=""> <div class="count"><countTo :title="flag" :number="List.cNum" /></div> <span v-show="flag=='same'">{{List.cNum | formatNumber}}</span> ..原创 2020-11-19 13:53:22 · 1225 阅读 · 0 评论 -
select 标签 下拉 不让弹出框跟着滚动
:getPopupContainer="trigger=>trigger.parentElement" //搞定<a-selectv-model="monitorInfo.position"style="width:200px":getPopupContainer="trigger=>trigger.parentElement"><a-select-optionv-for="(v,k)in...原创 2020-11-17 16:06:02 · 732 阅读 · 0 评论 -
js 从数组里过滤 指定的字符,返回对应的数组
this.copyRightList = [{name:'张三',age:21}{name:'李四',age:21}{name:'王麻子',age:25}]this.selectedVal :是动态的,下拉选择年龄;或者动态选中字符串if(this.copyRightList.length>0){ countryInfo=this.copyRightList.filter(item=>item.age.indexOf(this.selectedVal)!...原创 2020-11-16 18:06:45 · 1988 阅读 · 0 评论 -
vue img标签无图片显示默认图片效果
html<img:src="retdt.u_icon_path==null?avatars:retdt.u_icon_path":onerror="defaultImg"class="blogger-avatar"/>jsimportavatarsfrom"@/assets/image/avatar.png"; // 引入默认图片exportdefault{props:...原创 2020-11-13 20:30:26 · 1826 阅读 · 0 评论 -
把返回的对象 添加到 数组里面 ,并且去重
arr.push(... new Set(obj[i] )) //去重 new Set()原创 2020-11-13 14:41:27 · 878 阅读 · 0 评论 -
vue element-ui select 下拉卡顿问题解决方案
<template> <el-select ref="selectDom" v-model="ids" multiple filterable placeholder="请输入关键词" remote :remote-method="remoteMethod" @visible-change="visibleChange" > <el-option v-for="item in optio...原创 2020-11-12 20:43:18 · 1403 阅读 · 1 评论 -
vue 表达式 判断的实例
最简单的表达式{{ item.aa != 0 ? item.aa : 0}} // 如果item.aa == -1的时候 ,返回结果为0三元表达式实例一:{{situation==60||61?retdt.m_board_name:situation==20?retdt.msgUname:retd...原创 2020-11-11 17:21:17 · 700 阅读 · 0 评论 -
在google里面安装 vue devtools插件
安装方法1:需正常打开chrome商店,搜索vuejs devtools 安装。chrome://extensions/ 开发者工具-扩展程序下启用;安装方法2(推荐使用):github下载插件,npm包安装依赖,拖入浏览器扩展程序具体操作:1 .下载chrome扩展插件。在github上下载压缩包并解压到本地,github下载地址:https://github.com/vuejs/vue-devtools2.npm install下载完成后打开命令行cmd进入vue-dev...原创 2020-11-11 16:58:23 · 325 阅读 · 2 评论 -
js 合并两个数组的4中方法 ,简单实用
我们在项目过程中,有时候会遇到需要将两个数组合并成为一个的情况。比如:var a = [1,2,3];var b = [4,5,6];有两个数组a、b,需求是将两个数组合并成一个。方法如下:1、contactjs的Array对象提供了一个叫concat()方法,连接两个或更多的数组,并返回结果。 var a = [1,2,3]; var b = [4,5,6]; var c = a.concat(b);//c=[1,2,3,4,5,6];这里有一个问题,concat方法连.原创 2020-11-10 10:57:07 · 289 阅读 · 0 评论 -
分页 算总页数 判断总页数和当前页数是否相等
内容总数量为:totalCount每页加载数量为:loadCount所求总页数为:totalPagetotalPage = (totalCount+ loadCount-1) / loadCount;其中 loadCount- 1 就是 totalCount/ loadCount的最大的余数if(totalPage == this.pageNo){ this.noMore = true;}...原创 2020-11-09 15:10:19 · 592 阅读 · 0 评论 -
父组件给子组件传值的两种方法
方法有两种,方法一:props传值,这里注意一个问题,传过来的值需要用watch监听并赋值,否则这里获取到的是空数组 父组件: 1 <uploadImg :width="200" :height="200" name="productImage" size="750px*750px" ref="productImage" :src-list="this.productImage"></uploadImg> 1 .原创 2020-11-06 15:35:13 · 8189 阅读 · 0 评论 -
点击跳转 传参方式,如果遇到同一字段传不同参数的时候 ,有两种传参方式,推荐第二种
方法一:点击两个按钮跳转 (按钮参数分别为1,2)e 是个参数 ,值分别为1 ,2jumpPath(e){if(e==1){ // 为1 时 letparams={ //公共参数eventId:this.eventId,eventName:this.eventName,type:e, contentName:this.datalist.con...原创 2020-11-05 10:42:37 · 921 阅读 · 0 评论 -
ant design vue 中加载中 <a-spin> 标签的使用
<a-spin></a-spin> 不带文字的小图标spinning 为true 的时候 显示 加载中小图标 ,否则显示结果<spanclass="title"v-if="spinning==true">共<a-spin></a-spin>个结果</span><spanclass="title"v-else>共{{count}}个结果</span>效果图:第二种:...原创 2020-11-04 11:34:45 · 22823 阅读 · 4 评论 -
vue 日期组件 是否显示清除按钮 默认显示 ,不显示的小坑我帮你解决 ,日期弹出框不随着页面滑动而滚动的解决方法
allowClear 默认是true,是显示清除按钮的,需求不想要清除按钮 ,,,,本想allowClear = false 就可以搞定了, 结果并非所想 ,下面是i解决方法:<divclass="content"><a-date-pickerv-model="monitorInfo.startTime"style="width:200px":allowClear...原创 2020-11-04 11:24:19 · 1062 阅读 · 2 评论 -
vue 跳转 的两种方式 1.当前页面打开,2.打开新窗口
<div class="headline" :title="item.msgTitle" @click="jumpDetails(item)" style="cursor:pointer" >{{item.msgTitle}}</div>当前页面打开jumpDetails(e){console.log(e); this.$router.push({ pat...原创 2020-11-03 18:48:06 · 4246 阅读 · 0 评论 -
echarts 画等分div样式
<divv-if="technology.relatedCompanies&&technology.relatedCompanies.length>0"ref="squareCharts"class="roundCharts"></div>asyncgetSquareCharts(){awaitthis.$nextTick();constmyChart=echarts.init(thi...原创 2020-10-29 18:30:12 · 227 阅读 · 0 评论 -
正则表达式 逗号,空格,| ,等转换成 换行 ,所有的逗号转换成换行 ,把 所有的回车和换行 转换成 逗号
this.datalist.contentName=res.data[0].contentName.replace(/[\|\,|\,|]/g,'\n');\ 空格\,逗号| 竖线\n 换行this.datalist.contentName=res.data[0].contentName.replace(/[\,]/g,'\n'); //所有的,转换成换行contentName=this.datalist.contentN...原创 2020-10-28 21:53:34 · 5651 阅读 · 1 评论 -
删除数组中为空的对象
例如:this.monitorInfo.keywordList = ["张三","" ,"" ,"李四","","王麻子"];letarr=[]for(leti=0;i<=this.monitorInfo.keywordList.length-1;i++){if(this.monitorInfo.keywordList[i].trim()!=""){arr.push(this.monitorInfo.keywordL...原创 2020-10-28 17:07:04 · 2780 阅读 · 0 评论 -
textarea 标签 的关闭按钮和不可拉动效果
<a-textareaplaceholder=""allow-clear@change="onChangeYuming"v-model="datalist.contentName"/> 这个 allow-clear 是关闭按钮 ,删掉就没有关闭按钮了不可拉动是样式控制textarea{ resize: none; } 就不能拖动大小了...原创 2020-10-27 19:55:10 · 412 阅读 · 0 评论 -
vue 画圆 不重叠 随机大小 随机颜色 源码实例
效果图:实例代码:methods:{circleInfo:function(){classCircle{constructor(x,y,r,color){this.x=x;this.y=y;(this.r=r),(this.c=color?color:this.getRandomColor());}...原创 2020-10-22 15:57:05 · 1385 阅读 · 3 评论 -
菜单 点击选中 一个按钮跳转四个路由
4个页面同一个菜单 (菜单是子组件 )实现点击跳转,并选中对应的 菜单有什么疑问欢迎留言 ,感谢大家源代码:<template><divclass="navboxmt20mr30"ref="nav"><ahref="JavaScript:void(0)"class="flexrow-center"v-for="(item,i)ineditNav":key="i"@click="clickNav(i)":cl...原创 2020-10-22 09:57:25 · 715 阅读 · 0 评论 -
vue 给滚动菜单 添加 防抖
https://www.npmjs.com/package/lodash.debounce 安装命令在项目根目录 ---: npm ilodash.debounce安装成功后: package.json会看到这条安装版本号使用方法:第一步:先导入:第二步:把方法包起来debounce(this.handleScroll,500)...原创 2020-10-21 17:56:35 · 680 阅读 · 0 评论 -
vue 菜单点击右边滚动到对应模块,滚动页面的时候菜单跟着选中效果 实例
滚动页面 菜单跟着变动具体代码如下::<template><divclass="navboxmt30mr30"ref="nav"><ahref="JavaScript:void(0)"class="flexrow-center"v-for="(item,i)innavlist":key="i"@click="clickNav(i)":class="{cur:i==current}">...原创 2020-10-21 16:44:16 · 3577 阅读 · 8 评论