- 博客(238)
- 收藏
- 关注
原创 js逻辑判断的常用方式
好吧,看起来比 if/else 层次结构更清晰一些,细心的读者可能也发现了一个小窍门:case 2 和 case 3 的逻辑一样时,可以把前面的逻辑处理代码省略,case 2 会自动执行与 case 3 的逻辑。上面的代码看起来确实比较干净,这种方法的巧妙之处在于,它把判断条件作为对象的属性名,把处理逻辑作为对象的属性值。这里你也可以看到 Map 和普通对象的区别,其中 Map 可以用任何类型的数据作为键。从上面的例子中可以看到,当你的逻辑升级到双重判断的时候,你的判断力就会加倍,你的代码就会加倍。
2024-01-05 15:26:34 1154
原创 js中断后续执行的几种方法
我们看到在testD中调用了testC,在testC中想通过return把alert(‘d’);也终止了,事与愿违return只终止了testC,程序执行会依次弹出’c’,‘d’。两个函数做了修改,testC中返回false,testD中对testC的返回值做了判断,这样终止testC的同时也能将testD终止,程序执行弹出’d’便会终止。以上是常规的中断执行方法,那么函数调用函数如何在嵌套的函数里面中断执行呢?程序执行会依次弹出’a’,‘b’,‘c’。(二)非function方法里面。
2024-01-03 15:31:46 1008
原创 antd中DatePicker禁选范围如何设置
在这里插入图片描述](https://img-blog.csdnimg.cn/direct/d903b63443584600b9e859599d76bcab.png)可选的时间单位有day(默认今天)、week(默认本周)、month(默认本月)以及year(默认本年)同时我们要知道antd是默认使用moment.js来实现日期格式化的,文档中有体现。在官方api中也提到,可以设置disabledDate来实现日期的禁选。这样我们就可以将该方法运用到disabledDate 函数中。
2023-12-28 15:01:41 447
原创 WebGL 概念和基础入门
WebGL 技术出现的时间并不算短,然而尽管能够开发出拥有炫酷效果的 3D 网页却一直未能大火,现今应用的最多的也不过是 3D 网页游戏的开发。这其中很大一部分的原因便是受到网速发展的制约,在当今这个快节奏的社会中人们对于网页加载速度的忍耐度是极低的,一个 WebGL 开发的 3D 网页动辄需要三四秒的打开时间对用户而言无疑是极度不友好的。但是相信随着 5G 通信技术的发展,网络通信技术飞速发展下,WebGL 技术的明天可能会迎来新的发展契机。
2023-07-21 15:17:23 7314
原创 Uncaught TypeError: Failed to resolve module specifier “three/examples/jsm/controls/OrbitControls“.
做three.js项目遇到这个问题。(网上找到的,还没验证)
2023-07-17 15:17:37 2213
原创 TypeError: originalEvents[key].apply is not a function
以上错误时因为,v-model, v-decorator,@change 三者同时存在造成的,任意去掉一个报错消失,即可进行下拉多选了。在antd 中写select组件。
2022-11-08 19:33:10 854
原创 vue里浏览器返回键如何禁用
如图所示浏览器左上角返回键如何禁用掉呢?mounted () { // 禁用浏览器返回键 history.pushState(null, null, document.URL); window.addEventListener('popstate', this.disableBrowserBack);},destroyed() { // 清除popstate事件 否则会影响到其他页面 window.removeEventListener("popstate", th.
2022-03-28 19:40:07 3287 2
原创 antd select palceholder不显示
当select的value绑定一个state默认值时,如果默认值是’'或null时,placeholder不生效解决方案:默认值设为undefined例如: <a-select v-model="imageId" placeholder="请选择私有镜像" @change="handleImageChange" > data() {imageId
2022-03-24 13:48:41 420 1
原创 echarts legend修改形状
legend: { icon: "circle", // 字段控制形状 类型包括 circle,rect,line,roundRect,triangle,diamond,pin,arrow,none itemWidth: 10, // 设置宽度 itemHeight: 10, // 设置高度 itemGap: 40 // 设置间距 },icon 也可自定义图片 icon : 'image://../../images/hsyb/water.png'
2022-03-23 12:41:07 3523
原创 antd Table组件的插槽使用
对于table里每一列的数据,根据接口返回,有的时候接口只返回纯数据或者类型,前端还要进行处理。当然有很多种方法,1.在拿到数据后直接用map方法,改变原本的数据,data-source修改绑定的数据。2.使用scopedSlots: { customRender: 'upCapacity' }插槽,在渲染template的时候修改。const columns = [ { title: '存储类型', dataIndex: 'storage' }, { title: '容量范围',.
2022-03-15 17:15:30 5653 1
原创 js在字符串中增加空格
js字符串拼接空格,一个老生长谈的问题经常忘记,下面记录一下吧要求:由于规格配置是字符串拼接的,如图要求规格配置这个字符增加空格试了几种方法都没效果1.直接+' '直接忽略,毫无效果。2.直接+' '直接把 输出来了,负作用。3.直接+'\xa0',直接成功,需要几个空格就拼接几个'\xa0'上图的拼接方法如下: const specificationConfigu
2022-02-11 20:18:23 13223
原创 antd select选择器下拉框跟随滚动条滚动解决方案
选择器如下:滚动条滚动之后:原本代码 <div class="title">提交方式</div> <a-form-model-item ref="submitType" prop="submitType" class="select-item"> <a-select v-model="form.submitType" > <a-select-option v-for="item in
2022-02-10 10:22:23 3364
原创 数组对象排序
一般后端返回一个数组对象,让前端来排序。有很多种方法:如上图所示返回一个数组对象,按顺序排列。接口返回如下,让后端加一个order字段,根据order字段来排序即可。今天写下一个最简单的吧:利用数组api ——> sort来进行排序var person = [{name:"Jack",age:12},{name:"Bob",age:22},{name:"Rose",age:5},{name:"Tony",age:25}] person.sort((a,b)=>{ return a
2022-01-05 21:30:24 295
转载 cherry-pick如何使用?
多分支开发,然后从测试分支合并到生产分支,测试分支有些内容此次不上线,所以不能全量merge,此时该如何操作呢?这时候就需要使用git cherry-pick下面是阮一峰的教程http://www.ruanyifeng.com/blog/2020/04/git-cherry-pick.html对于多分支的代码库,将代码从一个分支转移到另一个分支是常见需求。这时分两种情况。一种情况是,你需要另一个分支的所有代码变动,那么就采用合并(git merge)。另一种情况是,你只需要部分代码变动(某几个提交)
2021-12-10 14:35:38 4788
原创 antd Table组件增加一个自增序号
完整代码如下:<a-table :columns="columns" :data-source="students" :pagination="false" rowKey="id" @change="handleTableChange"> <div slot="num" slot-scope="text, record, index">{{ (currentPage - 1) * pageSize + (index + 1) }}</div>
2021-11-25 11:12:45 2030
原创 input type=“password“密码自动带入密码如何解决
用input type="password"密码框,浏览器会自动带入密码,可以加个autocomplete=“new-password”比如 <a-input-password v-model="password" style="width:370px;margin-left:10px;" placeholder="8-15个字符,必须同时包含数字、英文、特殊符号" autocomplete="new-
2021-11-15 21:00:29 7963 1
原创 opacity数值变为1%
今天开发遇到一个坑,只是设置了透明度opacity:60%;自己本地怎么测都没问题,但是发布部署到测试环境就出问题了,页面直接看不见了,害我找了好久,最终审查元素的时候发现,内容还在,只是透明度变成了1%,刚开始我还以为是其他部分设置了该样式,被覆盖了,然后我就加了!important最早打包后结果如下,还是不行!!然后结果网上搜索后发现opacity设置为百分比的时候,打包后数值被强制改成了1%,就离谱!!那么如何解决呢?把opacity设置为小数就行,如opacity:0.6,继续审查元素如下图
2021-11-10 14:35:59 859 1
原创 禁止复制怎么办?
人狠话不多,直接给出方法,chrome打开所要复制的页面,按顺序 F12 - F1 - 在perference里面找Debugger点选 Disable JavaScript。就可以复制了。其中中文界面如下:当然还有其他方法,但是万变不离其中,这个方法感觉最简单。...
2021-11-05 10:54:35 583 1
原创 git合并代码时如何忽略某个文件
合并代码时候不同分支的配置文件经常不一样,比如vue.config.js、deploy.yml,每个分支都需要保持自己的配置文件,从自己分支合并到dev分支或者maser分支时不受影响。首先git merge大致是这样的逻辑(可以去看英文原文):git在merge分支时,有一个默认的merge驱动,这个驱动会去检查每个文件的每一行,如果按照一定规则发现两个分支的同一个文件有不同,那么认为两个分支都对这个文件做了修改,会merge两个文件,此时有可能产生冲突;那么如果我们自定义一个merge驱动,在里面定义
2021-11-04 10:30:10 6340 3
原创 git撤销、还原、放弃本地文件修改
今天在写代码的时候,修改了一些内容,忽然要切换分支,但是修改的不是很好,只能临时放弃,这时候又不知道修改了哪些内容了,接下来就需要git的一些骚操作了,下面来总结一下:1. 未使用git add 缓存代码使用git checkout -- filepathname,注意中间有--( 不要忘记中间的 “- -” ,不写就成了切换分支了!!)git checkout -- filepathname 放弃所有文件修改 git checkout .git checkout .此命令用
2021-11-03 16:59:38 17660 1
原创 ant design vue 表格table 默认选择几项getCheckboxProps
首先我们看一下场景在table组件里默认选择第一项,如下图所示:查看table文档后发现只有getCheckboxProps或许能修改checkbox文档说是一个函数,然后就写一个方法,有一个默认的形参record。但是文档并没有解释怎么用,无奈继续在网上大浪淘沙,终于找到有一个defaultChecked属性table里点击 checkbox 会触发onChange , 从而得到selectedRowKeys,selectedRowKeys就是选中的 key 数组。 onChange: (s
2021-10-14 20:40:44 10401 1
原创 CSS实现文字少居中换行居左
“用 css 对一行文字进行布局,当文字不够换行的时候,这行文字要居中显示,当文字出现换行的时候,这行文字要靠左显示。”效果如上,如果直接居中的话会出现这种效果:实现方式如下:总结实现方法:(1)通过行内样式实现<!DOCTYPE html><html><head> <meta charset="utf-8"> <title></title> <style>
2021-09-13 11:19:52 4649 1
原创 Ant design vue Popover组件样式设置无效
审查元素的时候在.ant-popover-title里加上background-color:red;是有效的,但是我自己写代码的时候,这样写/deep/.ant-popover-title{background-color:red;}无效,折腾了半天,死活不起作用,最后查资料是把<style lang="less" scoped>里的scoped去掉,然后再把/deep/去掉就可以了这样做影响了其他界面,但好歹对我这个项目没啥影响,可以这样用。查了更详细的资料后,发现popo..
2021-09-10 17:50:08 5433 7
原创 Ant design vue Table组件中Filters的覆盖问题解决方案
页面实现效果如下:接口文档如下:如上天图账号和姓名字段升降序用了同一个字段orderField,代码片段如下在方法里面这样引用就可以这样的话username 和name就不会覆盖了,不然的话选完name之后再选username就不起作用了...
2021-09-09 11:08:22 1454
原创 vue 跳转到本地的html文件预览pdf
今天做项目使用pdf.js预览需要跳转到pdf下载的本地viewer.html文件,不管是使用window.open还是window.location.href一跳就被vue-router路由拦截跳转到404页面,走了不少弯路,心想要不要再vue-router里面直接import html文件试试看,然后编译报错。下载了html-loader后还是报错,可能我的方法不对吧,随即换方法。选择了把html文件放在static文件下然后放在根目录下,因为我的项目没有static文件夹,然后新建的,还是访问不
2021-09-07 14:32:07 1925 2
原创 git修改项目中的user name/email 和打标签
Git:如何为项目设置自己的user name/email因为有的适合我们不想修改全局的user name/email而只是需要修改某个特定项目的user name/email在项目根目录下查找 .git/config 。打开,添加如下内容(值换成你自己的名字和邮箱)即可:选择用记事本打开,加入如下字段就可以[user]name = tomemail = tom@163.com如下图所示...
2021-08-31 15:50:37 765
原创 解决v-for img src 渲染不出来以及动态拼接不显示的问题
问题描述:定义了一个数组,数组里面装的有图片的路径,使用for循环渲染页面时,图片路径对但是图片不显示。解决办法:数组里面图片的路径要写成如下:解决办法:数组里面图片的路径要写成如下:image:require('../assets/img/login.png')渲染的时候要写<img :src="item.image" />具体事例<a-menu v-for="(v, i) in navData" :key="i" :d
2021-08-25 15:29:48 523 1
原创 InputNumber输入框如何去掉加减
用的是antdesign-vue中的inputNumber数字输入框,如图所示需求去掉加减功能:选中直接给个display:none;就可以了在自己的组件下面加入如下代码就可以了/deep/.ant-input-number-handler-wrap { // display: none;}...
2021-08-20 10:31:44 2901 1
原创 Avoid mutating a prop directly since the value will be overwritten whenever the parent component
首先我们看一下页面报错其实问题很简单父子组件传值的问题;子组件的代码也很简单父组件:问题:按保存不报错,按取消报如上所示错误。然后找原因,原理应该Vue单项数据流的原因,不能随意修改props里的值,那为什么我保存的这个函数是可以不报错的呢??我两个调用都是同一个函数呀?真的有点懵逼!但是我问题还是解决了我把v-model换成了:visiable,这样保存和取消都没有报错了这个具体原因我还没有搞清楚,应该是ant-design-Vue底层设计的原因吧...
2021-08-17 17:34:13 1286
原创 js数组删除指定元素
js删除指定元素方法有很多,下面给出一个最简单的给数组添加个remove方法:Array.prototype.remove = function(val) { var index = this.indexOf(val); if (index > -1) { this.splice(index, 1); }}调用方式为:var element = "xx"arr.remove(element)有时间再回来总结一下其他方法...
2021-08-12 19:03:26 4211
原创 Cleaning up file based variables ERROR: Job failed: exit status 1
今天上传发布代码的时候老是发布失败然后进来看了一下失败原因:如下图找寻很久原来是端口被别人改了,和下图这个指出来的类似:解决办法:修改/opt/docker_gitlab/data/gitlab-rails/etc下的gitlab.yml文件中的端口随即再发布一次:成功解决...
2021-08-05 10:02:35 3613
原创 css如何实现自动换行、强制换行、强制不换行?
首先描述问题,今天写一个项目的时候,由于换行了,导致我的卡片都不对齐了代码很简单 <div v-for="item in distributedTestBed" :key="item.id" class="mydevice" @click="detailTestBedFun(item)"> <div>资源名称:{{ item.name }}</div> <div class="smalldivi
2021-08-04 19:59:27 6877
原创 element ui table表头样式修改
网上找了不少方法,都不行,可能是因为版本的问题,下面直接写成可以成功的方法吧:给表格一个代表表头的类header-row-class-name <el-table ref="multipleTable" :data="tableData" border tooltip-effect="dark" style="width: 100%" header-row-class-name
2021-08-04 14:07:57 3603 2
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人