- 博客(73)
- 资源 (2)
- 收藏
- 关注
RSS订阅
原创 前端安全机制集合（不定期更新） -- 戴向天
大家好！我叫戴向天QQ群：602504799如若有不理解的，可加QQ群进行咨询了解关于前端的安全机制大致分为：控制台、数据加密处理，文件访问权限等等。由于vue现在比较火热，所以以下的所有处理都是基于vue进行操作的。关于打开控制台的方法一、鼠标右击二、F12三、Ctrl + Shift + i四、在页面还没有进行加载完成，强行使用F12进行打开控制台五、利用浏览器的工具选项进行打开禁止打开控制台的操作我大概的进行了封装代码如下：import {isDev} from '@/co
2020-07-03 11:07:29
3421
原创 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
970
原创 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
595
原创 Vue3 + TS 关于如何将组件进行挂载body 例如：$message / $notify - 戴向天
大家好！我叫戴向天QQ群：602504799如若有不理解的，可加QQ群进行咨询了解关于messgae 和 notification 的组件内容我就不贴出来了。若想要的就直接加群获取吧。使用方式 this.$message({ message: "这个是$message", }); this.$notify({ message: "这个是$notify", });效果图fileName: main.tsimport { createApp } from 'vu
2022-04-12 10:12:38
2041
原创 Vue3 + TS Scrollbar组件 - 戴向天
大家好！我叫戴向天QQ群：602504799如若有不理解的，可加QQ群进行咨询了解<template> <div class="y-scrollbar" ref="box"> <div class="y-scrollbar__wrap" ref="wrap" :style="wrapStyle" @scroll="handlerScroll"
2022-04-02 22:06:51
956
原创 Vue3 + TS Slider组件，支持上下左右收起 - 戴向天
大家好！我叫戴向天QQ群：602504799如若有不理解的，可加QQ群进行咨询了解Tips: 是在Element-UI的基础上进行更改操作的，原有的Element-UI是不支持方向性的处理，以及动画时间的设定，并且还需要通过CSS进行动画处理，当前改造过的该组件不需要CSS，可以直接进行复制使用。使用方法: <Slider :direction="sliderDirection" :duration="duration" > <div style="wid
2022-03-30 11:29:28
1413
原创 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
446
原创 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
99
原创 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
7840
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
816
原创 Vue的生命周期 简单文字描述 - 戴向天
第一步： 实例化一个Vue对象 代码：new Vue();第二步： 初始化一些事件集：events 创建生命周期：lifecycle第三步： 告知即将要进行创建Vnode: beforeCreated;
2021-04-20 14:12:48
109
原创 数据字段转换 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
115
原创 js判断input file 是否有进行选择文件，监听资源管理器的关闭操作 - 戴向天
大家好！我叫戴向天QQ群：602504799如若有不理解的，可加QQ群进行咨询了解实现思路，当电脑的资源管理器被打开的时候，浏览将会处于一个等待的状态，相当于资源管理器被打开类似于js里面的一个await Promise一样。浏览器的所有事件将会进行被阻塞。于是我们可以利用这一点来进行实现监听资源管理器是否关闭，判断input file是否有进行选择文件。在我们进行打开资源管理器的时候，我们顺便个document加上一个鼠标移动事件（mousemove）当该事件被触发的时候，就说明资源管理器已经关
2021-04-01 23:15:15
3715
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
731
原创 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
1200
1
原创 element-ui 表单TS封装table-form -戴向天
大家好！我叫戴向天QQ群：602504799如若有不理解的，可加QQ群进行咨询了解<template> <div :class="getClassName()" class="flex-sw-22"> <el-form :label-width="labelWidth" :model="params" ref="form" :rules="rules" > <div class="
2021-03-05 17:20:58
476
原创 element-ui table封装信息列表table-list，自动化处理（无需再写过多冗余的方法） - 戴向天
大家好！我叫戴向天QQ群：602504799如若有不理解的，可加QQ群进行咨询了解<template> <div ref="table" :class="getClassName(full ? 'full' : '')"> <el-table style="width:100%" :stripe="true" :class="getClassName('table')" :data="data" :b
2021-03-05 17:18:20
468
原创 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
355
原创 vue 路由守卫，更好的封装和使用拦截 -戴向天
大家好！我叫戴向天QQ群：602504799如若有不理解的，可加QQ群进行咨询了解/** * beforeMehodMap * 主要是做多个守卫处理 * 每一个方法返回的不是true 就是 重定向的地址 */const beforeMehodMap: any = { /** * 判断有没有相对应的地址 若是没有就进行跳转404页面 */ notFound(to: any, from: any) { const pathMap = getAllRouterPaths
2021-03-05 17:10:32
483
原创 一个不走缓存的存储记录（返回列表页的时候展示出来离开列表页时候的数据） - 戴向天
大家好！我叫戴向天QQ群：602504799如若有不理解的，可加QQ群进行咨询了解 Vue.mixin({ methods:{ /** * $pageParams 使用方发 * 一个不走缓存的存储记录 * Author: 戴向天 * * (this as any).setPageParams({ * pageSize: 10, * pageNumber: 2,
2021-03-05 17:06:36
69
原创 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
742
原创 数组转成树结构 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
2960
4
原创 vue是用sass的配置 - 戴向天
大家好！我叫戴向天QQ群：602504799如若有不理解的，可加QQ群进行咨询了解sass-loader依赖于node-sass,所以要安装node-sassnpm install node-sass --save-dev //安装node-sassnpm install sass-loader --save-dev //安装依赖包sass-loadernpm install style-loader --save-dev //安装style-loa
2020-12-17 10:00:38
110
原创 数据单位转换 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
268
原创 获取链接上的参数，返回一个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
201
原创 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
129
原创 YcConnect 连接器 - 戴向天
YcConnect 文档什么是YcConnect?YcConnect顾名思义就是洋铲（Yc）的连接器（Connect）。YcConnect由前端工程师戴向天提出来的，其作用和node差不多，但本质上还是由区别的。Node相对来说就是一个非常强大的依赖仓库，里面包含了各种各样的插件。使用的方法也十分的简单，只需要打开电脑的dos窗口就可以进行操作了。例如：npm insatll xxxx。但是想使用这些指令的话，首先就是需要进行下载Node。让Node在电脑的生成一个命令集，也就是npm命令。而Y
2020-11-02 17:23:08
226
原创 数组等份分割 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
168
原创 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
1071
4
原创 Vue使用sass的配置 - 戴向天
大家好！我叫戴向天QQ群：602504799如若有不理解的，可加QQ群进行咨询了解sass-loader依赖于node-sass,所以要安装node-sassnpm install node-sass --save-dev //安装node-sassnpm install sass-loader --save-dev //安装依赖包sass-loadernpm install style-loader --save-dev //安装style-loa
2020-08-23 13:59:44
1069
原创 Vue之重写$emit函数，全局监听$emit的触发 - 戴向天
大家好！我叫戴向天QQ群：602504799如若有不理解的，可加QQ群进行咨询了解本编文章写得比较简洁，感兴趣的可以进群咨询。或许有人会很疑惑，干嘛重写$emit方法。原因是重写以后就可以进行异步改变子组件暴露出去的方法例如：<component @clickHandler="clickHandler" @clickOne="clickOne" @clickTwo="clickTwo" />从上面的例子可以得知，子组件至少使用的三次$emit。并且每个emit的第一个参数名，都
2020-07-18 00:16:32
1780
原创 前端 利用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
1831
2
原创 VUE利用CSS + DIV实现SELECT (简单) -戴向天
大家好！我叫戴向天QQ群：602504799如若有不理解的，可加QQ群进行咨询了解组件内容<template> <div class="select"> <div tabindex="1" @blur="blur">{{value}}</div> <ul> <li v-for="(item,key) in options" :key="key" @mousemove="txt = item">{{
2020-06-26 18:28:01
796
原创 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
937
原创 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
712
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
690
原创 Vue 之 路由跳转封装
大家好！我叫戴向天QQ群：602504799如若有不理解的，可加QQ群进行咨询了解在一个项目中封装路由跳转的方法还是很有必要的。因为当你封装了以后，关于一些参数的操作完全可以进行了统一管理，例如加上公共参数、跳转外部链接等等。goPage(param, replace) { if (typeof param == 'string') { param = { path: param } } if (replace) { // 判断是不是重定向 thi
2020-05-11 10:22:41
1470
原创 如何更好的使用VUE之数据处理方式
大家好！我叫戴向天QQ群：602504799如若有不理解的，可加QQ群进行咨询了解在我前端工作之前，在处理数据的时候，我经常在想如何更好的处理数据，对数据的可空性更高，更好的变换。其实这个也不是什么技术要点，只是在开发的时候，更加如意，特别在修改的是也方便。我的思路是，基础数据是不容改变的。然后通过其它的方式来进行获取相对应的数据，或者其它的数据格式。例如：const arr = [...
2020-03-11 12:50:59
1784
通用的前端效验工具.js
2019-08-09
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人