![](https://img-blog.csdnimg.cn/20201014180756738.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
JS
戴向天
我不是一个优秀的人,但我是一个肯努力的人。
展开
-
scss / less 转换成css 包含有scope设置 - 戴向天
大家好!我叫戴向天。QQ群:602504799可设置样式scoped作用域scss/less转换的时候暂不支持 变量 以及 函数处理/** * author: 戴向天 * time: 2022-03-03 * QQ: 809002582 * desc: * 可设置样式scoped作用域 * scss to css / less to css * scss/less转换的时候暂不支持 变量 以及 函数处理 *//** * scss to css /原创 2022-03-03 22:36:36 · 450 阅读 · 0 评论 -
js文件下载 - 戴向天
大家好!我叫戴向天QQ群:602504799/** * Author: 戴向天 * 文件下载 * 使用方法 * const server = new DownloadServer({ * baseUrl: '' * }) * server.run('get', url).then(res => { * downloadByURL(res.url, fileName) // 直接下载 * }) * @return {Promise} */export default原创 2021-09-17 16:10:14 · 104 阅读 · 0 评论 -
JS数组对象使用new Set() 快速去重 - 戴向天
大家好!我叫戴向天QQ群:602504799QQ:809002582const a = [{a: 1},{b:1}]const b = [{a: 1},{b:1}]const c = a.concat(b)// 无法去重const e = [...new Set(c)]// 开始去重const d = [...new Set(c.map(t=>JSON.stringify(t)))].map(s=>JSON.stringify(s))// 去重原理/* Set的方原创 2021-07-19 22:14:56 · 7909 阅读 · 2 评论 -
js findIndex 查询多维数组的下标值,返回array<index> - 戴向天
大家好!我叫戴向天QQ群:602504799如若有不理解的,可加QQ群进行咨询了解let data = [ [ {prop: 'prop1'}, [ {prop: 'prop1-1'}, {prop: 'prop1-2'}, [ {prop: 'prop1-3-1'}, {prop: 'prop1-3-2'}, {prop: 'prop1-3-3'}, ] ] ], {prop:'prop2'}, '戴向天']function原创 2021-07-01 18:17:17 · 840 阅读 · 0 评论 -
Vue的生命周期 简单文字描述 - 戴向天
第一步: 实例化一个Vue对象 代码:new Vue();第二步: 初始化一些事件集:events 创建生命周期:lifecycle第三步: 告知即将要进行创建Vnode: beforeCreated;原创 2021-04-20 14:12:48 · 112 阅读 · 0 评论 -
数据字段转换 dataFiledChange - 戴向天
大家好!我叫戴向天QQ群:602504799如若有不理解的,可加QQ群进行咨询了解let dataMap = { obj: { name: '戴向天', age: '24', friends: [ { name: '戴向天1', age: '24', }, { name: '戴向天2', age: '24', }, ], family: { father:{ name: '戴向天3', age: '24原创 2021-04-09 13:41:47 · 120 阅读 · 0 评论 -
js判断input file 是否有进行选择文件,监听资源管理器的关闭操作 - 戴向天
大家好!我叫戴向天QQ群:602504799如若有不理解的,可加QQ群进行咨询了解实现思路,当电脑的资源管理器被打开的时候,浏览将会处于一个等待的状态,相当于资源管理器被打开类似于js里面的一个await Promise一样。浏览器的所有事件将会进行被阻塞。于是我们可以利用这一点来进行实现监听资源管理器是否关闭,判断input file是否有进行选择文件。在我们进行打开资源管理器的时候,我们顺便个document加上一个鼠标移动事件(mousemove)当该事件被触发的时候,就说明资源管理器已经关原创 2021-04-01 23:15:15 · 3763 阅读 · 1 评论 -
js 文件与文件夹选择(已封装) - 戴向天
大家好!我叫戴向天QQ群:602504799/** * 使用方法: * openLocalREsource(function(fileList){ * console.log('文件选择的结果=>',fileList); * },'file'); * * openLocalREsource(function(fileList){ * console.log('文件夹选择的结果=>',fileList); * },'folder'); */export原创 2021-03-29 14:01:00 · 743 阅读 · 0 评论 -
JS实现innerText的获取 - 戴向天
大家好!我叫戴向天QQ群:602504799如若有不理解的,可加QQ群进行咨询了解function strToInnerText(str){ const tags = str.match(/<[A-Za-z]*[0-9]*>/g) if(tags){ tags.reduce((total,key)=>{ // 起到去重加速的功能 if(total.indexOf(key) < 0){ total.push(key) } retu原创 2021-03-09 13:29:42 · 1224 阅读 · 1 评论 -
vuex获取TS封装 - 戴向天
大家好!我叫戴向天QQ群:602504799如若有不理解的,可加QQ群进行咨询了解interface IStore { _actions: any; getters: any;}/** * 获取模块名称和指定的方法 * @param args */function getArgumentsResult(...args: any[]) { const arg = args[0]; let module = null; let methods: string[] = [原创 2021-03-05 17:13:59 · 356 阅读 · 0 评论 -
vue 路由守卫,更好的封装和使用拦截 -戴向天
大家好!我叫戴向天QQ群:602504799如若有不理解的,可加QQ群进行咨询了解/** * beforeMehodMap * 主要是做多个守卫处理 * 每一个方法返回的不是true 就是 重定向的地址 */const beforeMehodMap: any = { /** * 判断有没有相对应的地址 若是没有就进行跳转404页面 */ notFound(to: any, from: any) { const pathMap = getAllRouterPaths原创 2021-03-05 17:10:32 · 491 阅读 · 0 评论 -
一个不走缓存的存储记录(返回列表页的时候展示出来离开列表页时候的数据) - 戴向天
大家好!我叫戴向天QQ群:602504799如若有不理解的,可加QQ群进行咨询了解 Vue.mixin({ methods:{ /** * $pageParams 使用方发 * 一个不走缓存的存储记录 * Author: 戴向天 * * (this as any).setPageParams({ * pageSize: 10, * pageNumber: 2,原创 2021-03-05 17:06:36 · 69 阅读 · 0 评论 -
a标签在IE浏览器进行download下载,出现中文乱码 - 戴向天
大家好!我叫戴向天QQ群:602504799如若有不理解的,可加QQ群进行咨询了解function getEncodeUrl(url = ''){ return url.split('/').map((str)=>/[\u4e00-\u9fa5]+/g.test(str)?encodeURI(str):str).join('/')}use method:getEncodeUrl('http://www.yangchan.com/文件夹/压缩包/test.zip')Vue file:原创 2021-01-07 15:33:09 · 753 阅读 · 0 评论 -
数组转成树结构 arrayToTree - 戴向天
大家好!我叫戴向天QQ群:602504799如若有不理解的,可加QQ群进行咨询了解const data = [ {pid:1,id:2,name:'一级'}, {pid:2,id:3,name:'二级'}, {pid:3,id:4,name:'三级'}, {pid:4,id:5,name:'四级'}, {pid:4,id:6,name:'五级'}, {pid:4,id:7,name:'六级'},];const data2 = [ {parentId:1,id:2,name:'一级'原创 2021-01-06 17:02:38 · 2999 阅读 · 4 评论 -
数据单位转换 BIT=>KB=>MB=>GB=>T - 戴向天
大家好!我叫戴向天QQ群:602504799如若有不理解的,可加QQ群进行咨询了解function useToDataUnit(val){ let num = 0; const units = ['bit','KB','MB','GB','T'] while(val>=1024 && num < units.length - 1){ val/=1024; num++ } return原创 2020-12-14 19:30:40 · 278 阅读 · 0 评论 -
获取链接上的参数,返回一个Object对象 - 戴向天
大家好!我叫戴向天QQ群:602504799如若有不理解的,可加QQ群进行咨询了解function getParams(href = window.location.href, key = null){ const res = href.split('?').slice(1).join('?').split('&').reduce(function(f,n){ if(n){ const keyVal = n.split('=') f[keyVal[0]] = keyVal[1原创 2020-11-19 09:28:55 · 202 阅读 · 0 评论 -
JS格式化数字(每三位加逗号)两行代码 - 戴向天
大家好!我叫戴向天QQ群:602504799如若有不理解的,可加QQ群进行咨询了解const a = '12345'.split('').reverse();const res = new Array(Math.ceil(a.length / 3)).fill('').map((item,i)=>a.slice(i*3,(i+1)*3).join('')).join(',').split('').reverse().join('');...原创 2020-11-16 19:16:00 · 133 阅读 · 0 评论 -
YcConnect 连接器 - 戴向天
YcConnect 文档什么是YcConnect?YcConnect顾名思义就是洋铲(Yc)的连接器(Connect)。YcConnect由前端工程师戴向天提出来的,其作用和node差不多,但本质上还是由区别的。Node相对来说就是一个非常强大的依赖仓库,里面包含了各种各样的插件。使用的方法也十分的简单,只需要打开电脑的dos窗口就可以进行操作了。例如:npm insatll xxxx。但是想使用这些指令的话,首先就是需要进行下载Node。让Node在电脑的生成一个命令集,也就是npm命令。而Y原创 2020-11-02 17:23:08 · 237 阅读 · 0 评论 -
数组等份分割 Array.cutBlock - 戴向天
大家好!我叫戴向天QQ群:602504799/** * @param num {Number} 分割数量 num为true的时候会返回:Array(this) * @param fill {any} 当最后一个没填满,默认填充的数据 */Array.prototype.cutBlock = function(num,fill){ if(isNaN(Number(num)) || !Number(num))return []; const len = Math.ceil((this.原创 2020-10-14 14:52:53 · 175 阅读 · 0 评论 -
JsonUtil将vue文件转换成字符串 - 戴向天
大家好!我叫戴向天QQ群:602504799import jsPlugIn from './js-plugIn'/** * Author:戴向天 * createdTime: 2020-09-04 * * 创建该文件的目的是为了将vue文件进行相对应的转换成字符串 * 然后通过解析字符串来进行生成vue文件 * * 因为有些机制的传输数据格式必须为字符串形式 * 所以可以通过jsonUtils来进行操作编译和反编译 * */const jsonUtils = windo原创 2020-09-04 00:32:25 · 1088 阅读 · 4 评论 -
Vue之重写$emit函数,全局监听$emit的触发 - 戴向天
大家好!我叫戴向天QQ群:602504799如若有不理解的,可加QQ群进行咨询了解本编文章写得比较简洁,感兴趣的可以进群咨询。或许有人会很疑惑,干嘛重写$emit方法。原因是重写以后就可以进行异步改变子组件暴露出去的方法例如:<component @clickHandler="clickHandler" @clickOne="clickOne" @clickTwo="clickTwo" />从上面的例子可以得知,子组件至少使用的三次$emit。并且每个emit的第一个参数名,都原创 2020-07-18 00:16:32 · 1818 阅读 · 0 评论 -
前端 利用Vue实现数据可视化 - 戴向天
大家好!我叫戴向天QQ群:602504799如若有不理解的,可加QQ群进行咨询了解先进行展示效果吧<!-- 数据可视化--><template> <div class> <div class="flex-wrap m-t-10 flex" v-for="(item,key) in this.getDataInfo" :key="key"> <span class="flex-s-0 p-l-20 p-r-10 h原创 2020-07-03 11:20:35 · 1841 阅读 · 2 评论 -
前端安全机制集合(不定期更新) -- 戴向天
大家好!我叫戴向天QQ群:602504799如若有不理解的,可加QQ群进行咨询了解关于前端的安全机制大致分为:控制台、数据加密处理,文件访问权限等等。由于vue现在比较火热,所以以下的所有处理都是基于vue进行操作的。关于打开控制台的方法一、鼠标右击二、F12三、Ctrl + Shift + i四、在页面还没有进行加载完成,强行使用F12进行打开控制台五、利用浏览器的工具选项进行打开禁止打开控制台的操作我大概的进行了封装代码如下:import {isDev} from '@/co原创 2020-07-03 11:07:29 · 3437 阅读 · 0 评论 -
JS利用iframe实现局部打印 - 戴向天
大家好!我叫戴向天QQ群:602504799如若有不理解的,可加QQ群进行咨询了解sheetToSelf 代码===》https://blog.csdn.net/weixin_41088946/article/details/106767106// 将canvas的内容转换成图片并进行插入到dom里面去 document.querySelectorAll('canvas').forEach(canvas => { const img = document.createEle原创 2020-06-17 16:02:18 · 942 阅读 · 0 评论 -
JS将样式表的样式转换成行内样式 sheetToSelf - 戴向天
大家好!我叫戴向天QQ群:602504799如若有不理解的,可加QQ群进行咨询了解// 将样式表的样式装换成行内样式let sheetToSelf = function(dom){ const sheets = document.styleSheets; const sheetsArry = Array.from(sheets); const $dom = dom.parentNode function cssTextToJSON(cssText){原创 2020-06-15 17:21:04 · 737 阅读 · 1 评论 -
Js 实现文件生成并下载 - 无需用户再次点击-已封装 - 戴向天
大家好!我叫戴向天QQ群:602504799如若有不理解的,可加QQ群进行咨询了解function download(content,fileName){ const a = document.createElement('a'); const event = document.createEvent("MouseEvents"); const blob = new Blob([content]); a.href = URL.createObjectURL(blob) a.down原创 2020-06-11 10:12:31 · 693 阅读 · 0 评论 -
VUE 之 封装自己的vue插件
大家好!我叫戴向天QQ群:602504799如若有不理解的,可加QQ群进行咨询了解写自己的vue插件的好处是,方便调用,方便管理,可以随处使用,甚至不管哪个项目都可以使用.并且调用的方法也很简单:this.xxxx()第一步: 创建vue-plugIn.js文件(名字可自定义:例如:Clover-vue-plugIn.js。自己方便记住就好)内容:// 根据需求进行引入import efficacy from './efficacy' // 效验方法import cache from '.原创 2020-05-11 10:34:04 · 975 阅读 · 0 评论 -
Vue 之 路由跳转封装
大家好!我叫戴向天QQ群:602504799如若有不理解的,可加QQ群进行咨询了解在一个项目中封装路由跳转的方法还是很有必要的。因为当你封装了以后,关于一些参数的操作完全可以进行了统一管理,例如加上公共参数、跳转外部链接等等。goPage(param, replace) { if (typeof param == 'string') { param = { path: param } } if (replace) { // 判断是不是重定向 thi原创 2020-05-11 10:22:41 · 1479 阅读 · 0 评论 -
如何更好的使用VUE之数据处理方式
大家好!我叫戴向天QQ群:602504799如若有不理解的,可加QQ群进行咨询了解在我前端工作之前,在处理数据的时候,我经常在想如何更好的处理数据,对数据的可空性更高,更好的变换。其实这个也不是什么技术要点,只是在开发的时候,更加如意,特别在修改的是也方便。我的思路是,基础数据是不容改变的。然后通过其它的方式来进行获取相对应的数据,或者其它的数据格式。例如:const arr = [...原创 2020-03-11 12:50:59 · 1792 阅读 · 0 评论 -
实现vant Dialog 函数 - 戴向天
大家好!我叫戴向天QQ群:602504799如若有不理解的,可加QQ群进行咨询了解JS代码如下// 保持DOM元素唯一const baseDom = { overlay: null, dialog: null,}// 显示const fadeIn = (dom) => { dom.style.display = ''; dom.classList.add('m...原创 2020-03-05 21:56:42 · 1900 阅读 · 0 评论 -
js 批量修改CSS样式表(px,rem互转) elementUI适配rem - 戴向天
大家好!我叫戴向天QQ群:602504799QQ:809002582我封装这个函数的初心的,公司的项目都是属于PC端,要求不管PC端的屏幕有多大都要完整的展示。在开发的时候一切都很好,但是在使用elementUI的时候,发现使用的组件不只如何进行相对应的调整,根据屏幕的大小而进行自适应。因为elemetUI使用的都是“px”单位所以我就自己做了一个方法将“px”和"rem"之间互转的方法。...原创 2019-10-14 15:24:16 · 3075 阅读 · 1 评论 -
JS 快速处理上万数据 (asyncFor已封装) - 戴向天
大家好!我叫戴向天QQ群:602504799QQ:809002582function asyncFor({data,num,handle}){ return new Promise(function(r,j){ // arr 数据 num 每组数据的个数 function getGroup(arr,num){ let group = [] for(...原创 2019-10-12 10:54:36 · 599 阅读 · 0 评论 -
前端 getSuccessData - 利用getType获取正确的返回值 -戴向天
大家好!我叫戴向天getType 详细代码==> https://blog.csdn.net/weixin_41088946/article/details/91038867/** 获取正确的数据格式, * 如果传进来的数据格式是正确的就返回自身, * 如果不是就进行返回一个需要的数据格式 */ function getSuccessData(obj, type) { let...原创 2019-06-14 13:08:18 · 11522 阅读 · 0 评论 -
过滤链接的参数 urlFilter - 戴向天
大家好!我叫戴向天,今天跟大家分享一个关于网络链接参数的操作,获取 || 过滤QQ:809002582详情的代码内容如下↓↓↓// 获取链接上的所有参数,返回的是一个Objectfunction getUrlParams(url) { const params = url.split("?")[1]; const reg = /&?([^&]+)/g; le...原创 2019-06-10 11:54:14 · 12463 阅读 · 0 评论 -
前端 vue axios封装+debug+error (包含文件上传加参) - 戴向天
大家好,我叫戴向天。QQ:809002582废话不多说,直接上代码↓↓↓祝你前端开发愉快import axios from "axios"; //导入axios cmd安装 => 淘宝镜像 ? cnpm install axios -S : npm install axios -Sconst backendPath = "http://127.0.0.1", //...原创 2019-06-13 10:36:08 · 11187 阅读 · 0 评论 -
前端 readFileContent XMLHttpRequest + Promise读取文件内容 - 戴向天
大家好!我叫戴向天QQ群:602504799QQ:809002582function readFileContent(path = null) { if (!path) return false return new Promise(function (resolve, reject) { const xhr = new XMLHttpRequest(); xhr...原创 2019-07-07 19:16:22 · 528 阅读 · 0 评论 -
前端 vue组件 layout-button-group - 按钮组 - 高效开发 - 戴向天
大家好!我叫戴向天QQ群:602504799QQ:809002582如若有不理解的,可加QQ群进行咨询了解layout-div 组件详情 》https://blog.csdn.net/weixin_41088946/article/details/91448369layout-image 组件详情》https://blog.csdn.net/weixin_41088946/article...原创 2019-06-25 23:37:01 · 14411 阅读 · 0 评论 -
前端 vue 高效开发 - input-file + 回显 组件封装 - 戴向天
大家好!我叫戴向天QQ群:602504799QQ:809002582如若有不理解的,可加QQ群进行咨询了解dd-layout-div 组件详情 》https://blog.csdn.net/weixin_41088946/article/details/91448369dd-layout-img 组件详情》https://blog.csdn.net/weixin_41088946/art...原创 2019-06-18 10:20:49 · 12332 阅读 · 0 评论 -
前端 《优化改良》 - VUE高效开发 - div - 自定义div的load事件 - 戴向天
大家好,我叫戴向天。不说废话了,看代码 ,该说的都下在注释里面了↓↓<template> <div :style="getStyle"> <slot/> </div></template><script> /** * 据之前的开发,由于每次的 宽、高、背景,颜色在公共样式里面时有时无的 ...原创 2019-06-11 16:59:28 · 12703 阅读 · 4 评论 -
JS 比type更加精准的获取数据的类型 包含dom | map | json | array | number等 - 戴向天
大家好!我叫戴向天。今天跟大家分享一个获取精准的数据类型的方法。QQ:809002582废话不多说。直接上代码↓↓↓ function getType(obj,string){ if (Object.prototype.toString.call(obj) === '[object Array]') { return string?string == 'array...原创 2019-06-06 09:35:09 · 11962 阅读 · 0 评论