- 博客(50)
- 收藏
- 关注
RSS订阅原创 移动端真机调试
在开发移动端项目项目中经常会用到真机调试，有些时候想要打印出数据，但是真机看不了，又必须需要真机才能重现，这时候就需要真机跟电脑一起联调。把这个带ip的地址复制到浏览器上，下一步打开谷歌调试器，这是没有插上数据线的样子。把数据线插上电脑，手机会显示有文件传输，点击文件传输，就会出现下面的样子。2、手机跟电脑用的网络必须是局域网。到这里就完成真机跟电脑的调试了。
2024-06-19 16:47:07
202
原创 防止连续点击按钮，多次调用接口
使用自定义指令的好处就是方便简洁，还有就是用的地方比较多，不用到处引入文件,创建一个文件后缀为xxx.js// 防止重复点击preventMoreClick 就是自定义命令的名称// 监听事件if (!// 给一个定时器点一次需要多久才可以点从而实现了这个功能}, 2000);});});< el-button @click = ' handleClick ' v-preventMoreClick > 点击这里 </ el-button >
2024-06-11 15:30:32
759
1
原创 中央事件bus
使用场景：当需要传递给多个组件的时候例如父组件->子组件->孙组件，甚至还得传递到更深的组件的时候中央事件就起到了作用，不需要一直传递。例如 在A页面点击或者其他操作的时候通过触发发布事件把参数传到目的文件 B/C/D/E或者更多的文件。
2024-05-27 16:57:20
330
原创 vue template 里使用可选链操作符( ?. )报错Unexpected token . in _s(item?.publishInfo?.remark) Raw expres
vue template 里使用可选链操作符( ?. )报错
2022-09-20 17:58:15
1335
1
原创 html引入js文件
html引入js文件在开发中我们常常会用到全局变量，通过修改public里面的js文件去修改变量，问题是我们怎么在html中引入这个文件，使文件在整个项目中起作用尼？代码<script src="<%= BASE_URL %>js/config.js"></script>这样就引入成功了！快去试试吧...
2022-05-18 14:28:01
2622
原创 The unauthenticated git protocol on port 9418 is no longer supported.的解决方法
解决gitHub提交代码不成功问题
2022-04-18 11:40:46
924
原创 开发常用的校验方法
开发常用的校验方法const idCode = /(^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9X]$)|(^[1-9]\d{5}\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}$)/; // 身份证校验const validateNull = (rule, value, callback) => {
2022-03-23 11:20:40
413
原创 vue打包后elmentUI element-icons.woff 和 element-icons.ttf路径错误
vue打包后elmentUI element-icons.woff 和 element-icons.ttf路径错误在开发中遇到一个头痛的问题，就是打包部署后element-icons文件路径读取错误。正常打包后，elmentUI element-icons.woff 和 element-icons.ttf是会出现在fonts文件夹部署上去获取的路径是如下图。错误的原因是css下面是没有这个文件的，这个文件是在fonts文件夹里面，css跟fonts是同级的。错误的原因是在vue.config.j
2022-03-18 09:49:15
5543
1
原创 scss样式固定文件的宽度
在开发过程中会遇到，一个组件用不同的宽度，这时这个样式就可以减少冗余的代码了，非常好用。/** 设置固定宽度 START **/$total: 600;@for $i from 1 to $total { .w_#{$i} { width: #{$i}px !important; }}.w_886 { width: 886px!important;}/** 设置固定宽度 END **//** 固定的margin、padding START **/.ml-8 { mar
2022-03-16 17:21:49
481
原创 elementUI tree回显值
elementUI tree回显值在开发一些功能中会遇到需要回显值的问题。elment文档也是有这样的功能提供。其实回显的原理就是获取你node-key设置的值存放到数组里面，即可。但是现在有一个问题就是直接获取所有id扔进去，回显的时候你会发现会把所有的子集都回显了， 你没选到的也给回显了，这个不是你想要达到的目的。组件里面也有解决这个问题的方法，如下图这两个方法就是解决这个问题的关键。解决办法：1、首先先定义一个数组作为标记2、将遍及数组跟上面两个方法获取的数据进行合并，行程一个数组3
2022-03-16 17:08:13
2814
原创 elementUI tree组件的自定义节点内容render-content
elementUI tree组件的自定义节点内容render-content产品给的需求需要向el-tree组件添加自定义数据，我们就可以看官网里面的一些方法有没有这样的功能。官网我们看到文档中有这样的功能。如何使用html代码 <el-tree class="tree-font" :data="punishTreeData" ref="punishTree"
2022-03-16 16:41:57
5180
原创 封装超出一行使用tooltip展示内容组件
封装超出一行使用tooltip展示内容组件很多情况都会出现超出一行就隐藏超出的内容,使用省略号代替,鼠标放上去要出现一个提示框展示所有的内容需求,下面我们就封装这样一个组件html 代码<template> <div class="show-more-box"> <el-tooltip ref="showMoreText" class="show-more-text" effect="dark" enterabl
2022-01-28 17:06:57
1262
原创 pdf.js上传有盖章文件盖章不显示
pdf.js上传有盖章文件盖章不显示我在开发中,遇到了一个很头痛的问题,就是使用了pdf.js插件出现了上传了有盖章的文件,盖章不显示的问题,这到底是什么原因尼,找了很多资料后来发现是pdf.js这个文件里面自动处理了,不显示盖章;下面就是解决方案第一步找到pdf.worker.js文件,例如我的是放这里第二步 点进去这个文件,找到到30527行代码,把相应代码注释掉保存即可,如下图这样就把这个问题解决拉,希望可以帮助到遇到这样问题的小伙伴!...
2022-01-28 16:35:15
3747
5
原创 处理不同后缀的文件
最近接到一个需求就是根据文件的后缀去判断是否要展示还是要下载这个需求有两种解决方案，下面就为大家解说这两种方案1、截取文件的后缀，话不多说，上代码。isAssetTypeAnImage 这个函数,在你想要做判断的时候调用即可// 方法里面写methods: {hndelClick () {//filePath 文件名 let filePath = this.previewDocObj.fileName ? this.previewDocObj.fileName : '' // 获取
2022-01-28 16:22:25
283
原创 let 指令解构
let命令用于声明变量，声明的变量只在let命令所在的代码块有效for循环的计数器就很适合用let命令for循环使用let------特别之处一 循环变量那个部分相当于父作用域二 循环内部相当于一个子作用域let命令不存在变量提升console.log(a);//报错let a = 'abc';暂时性死区-------使用let命令声明变量之前，该变量都是不可用的如果某个块级作用域下存在let，它声明的这个变量会绑定在这个作用域，不受外界影响var temp = 'abc';
2021-12-13 16:43:42
1099
原创 数组常用的操作(方法)
1.常用方法push pop unshift shift splice concat<script> // push pop unshift shift splice concat let list = ["css","jquery","html","javascript"];// list.push("Vue"); //往数组后面追加一个元素// console.log(list);// let ret = list.pop();
2021-12-13 16:42:18
152
原创 css3种居中定位方法
第一种position :absolute;left:50%;top"50%;margin-left:-需要居中盒子宽度是一半；margin-top:需要居中盒子高度的一半第2种position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);transform(宽,高)；也就是需要定位盒子的宽和高第三种 定位的盒子需要有宽高position :absolute;top:0;left:0;right:0;bottom:0;marg
2021-12-13 16:41:46
1065
原创 vue项目打包后页面出现空白
vue-cli3的话要稍微麻烦些，因为vue-cli3简洁了许多，没有了配置文件，所以需要自己创建，只能在项目的根目录下创建，并且文件的名字只能是vue.config.js，然后在这个文件里面加上下面的代码即可module.exports = { assetsDir: 'static', parallel: false, publicPath: './',}然后在控制台yarn build 就可以了会生成一个文件dist...
2021-12-13 16:41:01
306
原创 keep-alive的生命周期
1.keep-alive的生命周期当引入keep-alive的时候，页面第一次进入，钩子的触发顺序created-> mounted-> activated，退出时触发deactivated。当再次进入（前进或者后退）时，只触发activated。<keep-alive><router-view v-if="$route.meta.keepAlive" style="min-height:100%"></router-view></keep-al
2021-12-13 16:40:38
14240
原创 css的样式穿透
第一种>>>这种是不可以在less环境下使用的stylus的样式穿透 使用：（>>>）外层类 >>> 想要修改的类名 { 要修改的样式}.wrapper >>> .el-card__header { border-bottom: none}第二种、sass和less的样式穿透 使用：（/deep/）/deep/深度修改外层类 /deep/ 想要修改的类名 { 要修改的样式}例：.wrapper
2021-12-13 16:39:52
210
原创 使用绝对定位设置盒子的大小
//高度会占满整个视图.css{ width:250px; position:absolute; left:0; bottom:0; top:70px;}.left_side { width: 250px; position: absolute; top: 70px; left: 0; bottom: 0; /*设置滚动条y坐标的 */ overflow-y: auto; .el-menu { height: 100%; }}/*//父盒子
2021-12-13 16:39:10
366
原创 git常用命令
1. 本地通过create-react-app创建一个react项目2. gitlab上创建一个仓库3. 本地项目关联远程仓库：git remote add origin ssh地址4. 把本地的项目代码提交到远程仓库： git push origin master5. 如果提交失败，先更新代码：git pull origin master --allow-unrelated-histories6. 如果出现冲突，先解决代码里面的冲突， 然后再git add .和git commit -m 'xx
2021-12-13 16:38:10
68
原创 Element日期选择器带快捷选项切换日期
Element 日期选择器改造，需求是打开选择器里面可以按日期选，按月份选，按年份选，如下图我们要怎么去实现这个需求尼？那我们就简单粗暴一点上代码html代码<el-date-picker key="date" ref="date" size="mini" v-model="time" @focus="focus" v-if="timeType=='d
2021-12-13 16:30:33
1488
原创 自定义组件svg的用法
自定义组件svg的用法我的使用场景：因为有好几个都用到svg图，而且大小布局都一样，所以就有了这个自定义组件。效果图：第一步 ： 在components中创建一个svgIcon.vue文件aria-hidden属性的作用： 把 aria-hidden=“true” 加到元素上会把该元素和它的所有子元素从可访问性树上移除。这样做可以通过隐藏下列内容来提升使用辅助技术的用户体验：1、纯装饰性的内容，如图标、图片2、重复的内容，如重复的文本3、屏幕外或被折叠的内容，如菜单<template
2021-11-08 11:11:58
1179
原创 element下拉框hover时的样式
element下拉框hover时的样式单选下拉框在禁用状态时正常的hover是没有边框出现的，但是el-select的就有：看图把鼠标放边框上就会现在这个问题hover的效果，如果想要去掉，很简单修改一下他原来有的样式就可以了解决方案// 找到响应的代码添加样式即可 .el-input--suffix:hover .el-input__inner { border: 1px solid #dcdfe6 !important; }下图是解决后的效果2 下拉多选框当
2021-10-27 15:42:56
2347
1
原创 对象转为数组
对象转成数组在开发中，前端处理数据，很多时候都会用到把对象转成数组，话不多说，咱们直接上代码// 对象转数组，想要转成什么字段根据需求function fmObjToArr (data) { let arr = [] for (let key in data) { arr.push({ label: data[key], // label 字段 value: key // value字段 }) } return arr}//举一个例子
2021-10-27 15:21:53
10726
原创 去掉el-input输入框弹出历史记录框
去掉el-input输入框弹出历史记录框1、输入框在输入内容时会下拉展示浏览器的历史数据例如“：解决方案：1 给input加一个 autocomplete属性，off代表关闭，on代表开启// autocomplete="off" 就是关闭 autocomplete="on" 就是开启 <el-input v-model="accountForm.idCard" placeholder="请输入身份证号码" :disabled
2021-10-26 16:10:29
4247
2
原创 el-table实现表格内容超出规定行数内容滚动
el-table实现表格内容超出规定行数内容滚动效果图elementUI前往elementUI:https://element.eleme.cn/#/zh-CN/component/tablehtml代码 <el-table-column prop="value" class-name="table_column-over-scroll__y words-bold"></el-table-column># css 代码// 加到相应的table就可以 .dat
2021-09-17 10:09:45
2312
原创 ts语法封装一个下载下载文件的函数
ts语法封装一个下载下载文件的函数// Internet Explorer 10 的 msSaveBlob 和 msSaveOrOpenBlob// 方法允许用户在客户端上保存文件，方法如同从 Internet 下载文件// ，这是此类文件保存到“下载”文件夹的原因。export function downloadFile (blob: Blob, filename: string) { if ('msSaveOrOpenBlob' in navigator) { window.navi
2021-08-31 15:11:47
435
原创 根据时间显示隐藏
根据时间显示隐藏显示隐藏全局提示语，在public文件创建一个js文件定义变量例如：var time = { start: '2021/07/31', end: '2021/10/31', message: '这里可以写你想要提示的东西，也方便配置。'}在vue文件操作const {time} = windowconst {start, end, message} = timeconst startime = new Date(start).gettime()const e
2021-08-17 16:17:42
166
原创 vue项目的html引进public里面的js文件
vue项目的html引进public里面的js文件首先在public文件夹添加js文件夹,再在js文件夹里面加一个后缀为js的文件 public->js->config.js// 在html页面去引进js文件<script src="<%= BASE_URL %>js/config.js"></script>如果项目是vue +js// 在js文件中用定义好的const { showConfig} = window// 在ts中用cons
2021-08-10 10:04:02
1703
原创 vue使用wangeditor富文本的使用
vue使用 wangeditor富文本的使用开始使用首先要把wangeditor.js引入到项目里面。第一种 ：方式就是直接下载wangeditor.js文件通过script引入，点击 https://github.com/wangfupeng1988/wangEditor/releases 下载最新版。进入release文件夹下找到wangEditor.js或者wangEditor.min.js即可第二种 ：就是通过 npm install wangeditor 下载第一种 只有一个容器，编
2021-07-27 17:02:58
436
原创 标题的样式
例如：html文件 <p class="title"> {{title}} </p>css样式 .title { margin-top: 15px; font-size: 16px; font-weight: 600; color: #333333; padding-left: 10px; position: relative; } .title:before { content:
2021-07-16 14:11:55
64
原创 打开新的页面
如果你在页面跳转的时候需要跳转到一个新的页面就用到window.open直接上代码// this.baseUrl就是其他环境要加的url &{}里面的参数就是需要放请求头带过去的 lookOver (row) { window.open(`${this.baseUrl}/domainGeneralCatalog.html#/listItemDetail?id=${row.id}&parentId=${row.parentId||''}&showBtn=no`)
2021-07-15 15:31:12
103
原创 服务器获取数据的购物车
页面刷新的时候就要获取数据封装好一个 // 公用的函数方法 totalFn(data) { //获取商品总列表 //因为数据会一直发生改变所以需要重新解构数据 let { cartList, cartTotal } = data; this.listData = cartList; this.cartTotal = cartTotal; //每次渲染数据就得清空一下数组 this.result = [];
2021-07-07 17:32:56
109
原创 内容折叠组件
内容折叠1，为了方便复用，我们封装一个组件HTML代码 <div> <el-col :span="span" class="font-first" ref="content">{{content}}</el-col> <el-col :span="2"> <el-button class="btn-detail float-right" type="text" @clic
2021-07-07 17:31:20
110
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人