- 博客(180)
- 资源 (3)
- 收藏
- 关注
RSS订阅
原创 vue-cli3.0 模式以及env环境文件相关配置
环境变量vue-cli-3.0总共提供了四种方式来制定环境变量：在根目录添加.env文件，配置所有情况下都会用到的配置（不知道这个存在的意义，所有的都需要的也就不需要配置了吧）。在根目录添加.env.local 文件，配置所有情况下都会用到的配置，与.env的区别是只会在本地，该文件不会被git跟踪。在根目录添加.env.[mode] 文件，配置对应某个模式下的配置,比如：.env.development来配置开发环境的配置。在根目录添加.env.[mode].local文件，配置对应某个模式下
2021-11-25 10:02:44
2225
原创 书本45°斜封面
书本45°斜封面代码<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
2022-04-13 09:34:48
505
原创 elementUi自定义主题色（最简单优雅）
elementUi自定义主题色Element 的 theme-chalk 使用 SCSS 编写，如果你的项目也使用了 SCSS，那么可以直接在项目中改变 Element 的样式变量:1、新建一个样式文件：例如 element-variables.scss，写入以下内容:/* 改变主题色变量 */$--color-primary: red;/* 改变 icon 字体路径变量，必需 */$--font-path: '~element-ui/lib/theme-chalk/fonts';@im
2022-03-02 16:34:12
8288
原创 手写模板引擎
模板引擎阅读vue和mustache源码后，自己实现一个简易版的模板引擎实现思路1、获取页面模板字符串let template = document.getElementById(id).innerHTML2、解析成树结构tokens数组，通过栈管理3、 将数据替换上去然后渲染到页面上// 渲染function resuleStr(Tokens, data) { let resuleStr = '' Tokens.forEach((item, index) => { if
2022-03-02 14:55:23
432
原创 css3毛玻璃效果
css3毛玻璃效果效果如下：代码：<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>毛玻璃效果</title> </head> <style> * { margin: 0; padding: 0; } .bg { background: url(img.jpg) no-r
2022-02-22 17:08:49
364
原创 手写promise
手写promisepromise.jsclass Promise { constructor(executor) { // 参数校检 if (typeof executor !== 'function') { throw new TypeError(`Promise resolver ${executor} is not a function`) } this.initValue() this.initBind() try {
2022-02-22 17:02:34
151
原创 vue3.x router4.x 路由hash与History的设置
vue3.x router4.x 路由hash与History的设置关键字：createWebHistory createWebHashHistory
2021-12-30 09:39:07
1908
原创 vue基于scss的动态切换主题颜色
根据预设的配色方案，在前端动态切换系统主题颜色大概的思路就是给html根标签设置一个data-theme属性，然后通过js切换data-theme的属性值，Scss根据此属性来判断使用对应主题变量。这里可以选择持久化Vux或接口来保存用户选择的主题。具体实现新建themes.scss文件这里只是做示例就写两个样式参考，更多的自己补充一下$themes: (Red: ( //整体主色调/菜单栏背景/图标.按钮主色/悬停状态 mainColor: #D6000F, //主题色
2021-11-25 15:20:12
3333
原创 自定义时间格式化输出
自定义时间格式化输出描述按所给的时间格式输出指定的时间格式说明对于 2014.09.05 13:14:20yyyy: 年份，2014yy: 年份，14MM: 月份，补满两位，09M: 月份, 9dd: 日期，补满两位，05d: 日期, 5HH: 24制小时，补满两位，13H: 24制小时，13hh: 12制小时，补满两位，01h: 12制小时，1mm: 分钟，补满两位，14m: 分钟，14ss: 秒，补满两位，20s: 秒，20w: 星期，为 [‘日’, ‘一’, ‘
2021-11-04 11:25:34
184
原创 ts写法vue组件内守卫beforeRouteLeave不生效问题
解决办法需要加上下面一行代码Component.registerHooks(['beforeRouteEnter', 'beforeRouteLeave', 'beforeRouteUpdate']);然后正常示使用即可beforeRouteLeave(to:any, from:any, next:any) { to.meta.keepAlive = true; next(0);}
2021-09-28 14:12:10
3285
原创 ts中引入js文件以及使用全局js方法报错问题
ts中引入js报错一、 无法找到模块“@/xxx/xxx”的声明文件。“xxx.js”隐式拥有 “any” 类型。[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Txigu319-1631930149705)(C:\Users\oyzq\AppData\Roaming\Typora\typora-user-images\1631929576599.png)]解决办法：使用 require引用const { encryptionJump,decryptJump } =
2021-09-18 09:56:51
13708
原创 vue指令 只能输入正整数保留两位小数 （视图数据都更新）
vue指令 只能输入正整数保留两位小数Vue.directive('onlyNum', { // 当被绑定的元素插入到 DOM 中时…… inserted: function (el) { let ele:any = el.tagName === 'INPUT' ? el : el.querySelector('input') ele.addEventListener("input", function () { //进行验证 onlyNum(el);
2021-09-16 09:40:35
711
原创 在Vue项目中，等待所有请求（方法）完成以后执行操作
使用场景比如一个弹窗需要请求表格跟树组件的数据需要发两个请求，这时我们需要等两个请求完成拿到数据后再去打开弹窗。多个请求axios.all([axios.post("/test1"),axios.post("/test2")]).then((test1,test2)=>{ console.log('两个接口都执行完毕啦')})// 或者这样function getUserAccount() { return axios.get('/user/12345');}funct
2021-09-09 10:19:36
12778
原创 Vue 3 传送组件 —— Teleport
使用场景在使用vue的时候我们经常会有这样的需求：希望某个组件内部的dom可以放到全局，而其内部的状态数据之类的又可以在改组件内部控制。比如：我们在某个组件内部写一个弹窗，我们将它放在了我们的模板template里面，但是由于希望弹窗位于页面的最上方，这时候我们将其挂载在body上面是最好控制的，我们能够很好的通过zIndex来控制弹窗的位置，但是该弹窗嵌套在templat里面的时候就不那么容易操作了。Props：**to - string 。 需要 prop，必须是有效的查询选择器或 HTM
2021-09-08 15:06:24
674
原创 一次完整的HTTP事务流程详解
一次完整的HTTP事务流程浏览器进行DNS域名解析，得到对应的IP地址根据这个IP，找到对应的服务器建立连接（三次握手）建立TCP连接后发起HTTP请求（一个完整的http请求报文）服务器响应HTTP请求，浏览器得到html代码（服务器如何响应）浏览器解析html代码，并请求html代码中的资源（如js、css、图片等）浏览器对页面进行渲染呈现给用户服务器关闭TCP连接（四次挥手）过程详解一、DNS解析首先会搜索浏览器自身的DNS缓存（缓存时间比较短，大概只有1分钟，且只能容纳1
2021-09-07 10:16:24
2638
原创 原生上传：input实现上传
input实现上传<input type="file" id="importFile" /><input type="button" @click="submitBt" id="import-submit" value="提交导入文件" /><script>function submitBt() { const formData = new FormData(); const name = $('#importFile').val();
2021-09-06 15:51:09
1030
原创 原生js以及vue 文件下载
文件下载普通js下载function fileDown(formData, url) { var xhr = new XMLHttpRequest(); xhr.open('POST', url, true); xhr.setRequestHeader('Content-Type', 'application/json;charset=utf8'); xhr.setRequestHeader('bwTicket', $bw.bwUtil.getLocalData('bwTicket')); x
2021-09-06 14:16:14
331
原创 手写demo了解vue响应式原理，订阅模式，观察者模式
Vue2.X响应式原理一.defineProperty 的应用在Vue2.X响应式中使用到了 defineProperty 进行数据劫持，所以我们对它必须有一定的了解，那么我们先来了解它的使用方法把， 这里我们来使用 defineProperty来模拟Vue 中的data<body> <div id="app"></div> <script> // 模拟 Vue的data let data = {
2021-07-26 17:40:58
439
原创 JS forEach循环不能break或return的原因
语法arr.forEach(callback(currentValue [, index [, array]])[, thisArg])参数callback为数组中每个元素执行的函数，该函数接收一至三个参数：currentValue数组中正在处理的当前元素。index 可选数组中正在处理的当前元素的索引。array 可选forEach() 方法正在操作的数组。thisArg 可选可选参数。当执行回调函数 callback 时，用作 this 的值。如上图实例可以清楚看到forE
2021-07-22 10:03:51
2060
2
原创 echarts tooltip提示框内容过多超出边界
echarts tooltip提示框内容过多超出边界文档链接如下在tooltip里加上confine: true就行了var option = { tooltip: { trigger: 'axis', confine: true // 将tooltip框限制在图表的区域内 }, xAxis: {... ````
2021-07-13 15:59:32
2032
原创 jquery获取最外层（最顶部）window对象
window.topTop属性返回当前窗口的最顶层浏览器窗口。在不跨域的前提下，window.top就能获得最顶层的window对象，然后通过window.top.document.getElementById(…)或者window.top.(...)（window.top.(...)（window.top.(...)（window.top.即是顶层frame的jQuery实例）来查找元素了。...
2021-07-12 18:05:44
2897
原创 jquery/js 获取iframe父窗口、子窗口元素
jquery获取子窗口document.getElementById("iframe的id").contentWindow.document.getElementById("iframe中的元素id"); var ifmEle = document.getElementById("ifrId").contentWindow.document.getElementById("child"); 获取父窗口window.parent.document.getElementById('pa
2021-05-28 17:37:13
412
原创 原生js实现点击复制文本
效果如下核心代码select()方法用于选择该元素中的文本。document.execCommand('copy')执行浏览器复制命令document.execCommand()详细介绍语法bool = document.execCommand(aCommandName, aShowDefaultUI, aValueArgument)返回值一个 Boolean ，如果是 false 则表示操作不被支持或未被启用。注意：在调用一个命令前，不要尝试使用返回值去校验浏览器的兼容性
2021-05-18 14:35:24
757
原创 手写js表格表头宽度拖动
github地址如图html代码使用方法：new tableResizable(id)表格需要用一个div包裹住，然后传入div的id<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <title></titl
2021-05-13 18:06:38
652
转载 前端chrome浏览器调试总结
前端chrome浏览器调试总结 看了一篇文章,结合自己实习的经历,觉得文章说得非常好,转载记录一下。文章内容来源: 简书–cayley的编程之路一、前言转载博主说:初学者仅仅掌握了alert、console这些基本的调试方法。我刚自学前端初期的时候,也是只用这种方法调试,天真地以后所有调试都可以通过console解决。后面去公司实习,看大佬们调试页面,这边打个断点,那边记录一下,马上就把问题定位出来了。确实,学会浏览器调试工具真的能大大提高自己的工作效率,尤其是在大...
2021-05-10 10:27:11
535
原创 第一个子元素在未超过父元素高度的情况下设置margin-top导致出现竖向滚动条的问题
分析问题在页面布局时，我们经常会设置html,body的height为100%，让处于最外面的父级元素刚好充满整个屏幕高度，但是，如果此时body下面第一个子元素，刚好设置了margin-top的值，你会发现页面出现了竖向滚动条，问题是这个子元素并没有超过父容器高度也导致出现竖向滚动条，似乎这个margin-top是添加到了父容器上。例子：假如一个页面有一个列表，第一个子元素需要保持和最顶部有一些上边距，于是你设置了这个子元素margin-top:20px，这个子元素的高度并没有超过父元素的高度，但是整
2021-05-08 15:03:11
1155
原创 媒体查询加上rem实现页面字体大小自适应
媒体查询加上rem实现页面字体大小自适应实现以375px大小为基准把根字体设为16px通过媒体查询适配不同屏幕大小，加上计算属性和rem实现字体大小自适应代码下面是一套在实际开发中，兼容性较好的实践代码：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <meta name="viewp
2021-04-09 14:40:04
1830
原创 原生js 元素拖拽动态排序
效果github预览拖拽html1、使用拖拽事件的时候，报错‘Cannot set property ‘ondragstart’ of null’：原因：JS的引进放在了head标签里面，浏览器遇到<script>标签的时候会立即执行脚本，这个时候DOM树还没有构建完成，访问不到节点解决：把JS的引进放在body标签底部使用’defer’异步加载js文件，不会影响DOM渲染，js脚本会在DOM渲染完毕后，DOMContentLoaded事件调用前执行defer和async：a
2021-04-06 14:18:35
3156
原创 input框校验：小数点保留两位，只能输入0--100
input输入值校验$('input').keyup(function(){ var value = $(this).val() var sum = 0; // 清除"数字"和"."以外的字符 value = value.replace(/[^\d.]/g,""); // 验证第一个字符是数字 value = value.replace(/^\./g,""); // 只保留第一个, 清除多余的 value = value.replace(/\.
2021-04-02 15:02:17
3460
原创 HTML页面空格不显示问题
white-spacewhite-space属性设置如何处理元素内的空白。默认空白会被浏览器忽略。需要显示空白只需要white-space: pre测试
2021-03-31 15:48:13
2276
原创 es6 class类小demo
使用如下代码<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <style> </style> <body> </body></html><script src="jquery.min.js"></script>
2021-03-30 11:15:40
158
原创 layui-数据表格-重新加载reload-回到第一页
代码如下table.reload('test', { where: obj, page: { curr: 1 //重新从第 1 页开始 }, });错误实例（点击下一页数据永远是第一页的）table.reload('test', { where: { libraryName: $('#txt-search').val(), deptName: deptName, platformCode: pla
2021-03-22 16:22:36
2386
原创 $(‘input‘).checked = true不生效 checked为undefined
$(‘input’).checked = true不生效设置input的checked 不生效，并且获取checked 值为undefined这是因为当前input没有checked 属性，需要设置属性值在再赋值$('input').prop('checked', 'true');
2021-03-17 11:05:45
1263
原创 jQuery穿梭框
jQuer穿梭框git仓库// 初始化穿梭框$("#shuttleBox").transferItem({ 'leftName':'左侧列表', 'rightName':'右侧列表', data:{ leftArr:[{id:'0',name:'1'},{id:'1',name:'哈哈哈哈'},{id:'3',name:'说没说过'},{id:'4',name:'我们沙发上'}], rightArr:[{id:'5',name:'沙发上的1'},{id:'6',na
2021-03-05 12:00:06
558
原创 table表头固定表体滚动（动态出内部滚动条）
效果如图代码实现<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <title></title> </head> <script src="jquery.min.js"></s
2021-02-09 15:20:17
962
原创 防抖和节流的小demo
防抖：连续触发事件，只要不是最后一次触发，就不执行异步操作<button>点我试试</button><script> var btn = document.querySelector('button') var timer = null btn.onclick = function() { // 每次执行把上一次定时器清除，第一次执行也会清除timer clearTimeout(timer) // 延时 0.5s 执行 timer = setTi
2021-01-29 11:37:16
201
1
原创 正确比较0.1+0.2 与 0.3的方法
0.1+0.2 != 0.3这里输出的结果是 false，说明两边不相等的，这是浮点运算的特点，也是很多同学疑惑的来源，浮点数运算的精度问题导致等式左右的结果并不是严格相等，而是相差了个微小的值。正确的比较方式检查等式左右两边差的绝对值是否小于最小精度，才是正确的比较浮点数的方法。这段代码结果就是 true 了。...
2021-01-20 17:01:04
364
原创 echarts legend名称过长自定义换行显示
效果如图代码如下formatter: function (params) {//超过十个字符就换行展示 var newParamsName = "";// 最终拼接成的字符串 var paramsNameNumber = params.length;// 实际标签的个数 var provideNumber = 5;// 每行能显示的字的个数 var rowNumber = Math.ceil(paramsNameNumber / provideNumber);// 换行的话，需要显示
2021-01-20 09:26:36
2257
原创 纯css绘制斜线表头
效果图如下代码<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html;
2021-01-19 09:52:28
426
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人