![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端
戴向天
我不是一个优秀的人,但我是一个肯努力的人。
展开
-
前端函数配置化编程 - Element-plus
Vue函数化配置编程原创 2023-12-26 17:35:37 · 454 阅读 · 0 评论 -
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 · 2117 阅读 · 0 评论 -
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 · 1457 阅读 · 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 · 106 阅读 · 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 · 7923 阅读 · 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 · 852 阅读 · 0 评论 -
Vue的生命周期 简单文字描述 - 戴向天
第一步: 实例化一个Vue对象 代码:new Vue();第二步: 初始化一些事件集:events 创建生命周期:lifecycle第三步: 告知即将要进行创建Vnode: beforeCreated;原创 2021-04-20 14:12:48 · 114 阅读 · 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 · 121 阅读 · 0 评论 -
js判断input file 是否有进行选择文件,监听资源管理器的关闭操作 - 戴向天
大家好!我叫戴向天QQ群:602504799如若有不理解的,可加QQ群进行咨询了解实现思路,当电脑的资源管理器被打开的时候,浏览将会处于一个等待的状态,相当于资源管理器被打开类似于js里面的一个await Promise一样。浏览器的所有事件将会进行被阻塞。于是我们可以利用这一点来进行实现监听资源管理器是否关闭,判断input file是否有进行选择文件。在我们进行打开资源管理器的时候,我们顺便个document加上一个鼠标移动事件(mousemove)当该事件被触发的时候,就说明资源管理器已经关原创 2021-04-01 23:15:15 · 3780 阅读 · 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 · 745 阅读 · 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 · 1231 阅读 · 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 · 486 阅读 · 0 评论 -
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 · 528 阅读 · 0 评论 -
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 · 359 阅读 · 0 评论 -
数据单位转换 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 · 280 阅读 · 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 · 203 阅读 · 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 · 136 阅读 · 0 评论 -
YcConnect 连接器 - 戴向天
YcConnect 文档什么是YcConnect?YcConnect顾名思义就是洋铲(Yc)的连接器(Connect)。YcConnect由前端工程师戴向天提出来的,其作用和node差不多,但本质上还是由区别的。Node相对来说就是一个非常强大的依赖仓库,里面包含了各种各样的插件。使用的方法也十分的简单,只需要打开电脑的dos窗口就可以进行操作了。例如:npm insatll xxxx。但是想使用这些指令的话,首先就是需要进行下载Node。让Node在电脑的生成一个命令集,也就是npm命令。而Y原创 2020-11-02 17:23:08 · 243 阅读 · 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 · 177 阅读 · 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 · 1093 阅读 · 4 评论 -
Vue之重写$emit函数,全局监听$emit的触发 - 戴向天
大家好!我叫戴向天QQ群:602504799如若有不理解的,可加QQ群进行咨询了解本编文章写得比较简洁,感兴趣的可以进群咨询。或许有人会很疑惑,干嘛重写$emit方法。原因是重写以后就可以进行异步改变子组件暴露出去的方法例如:<component @clickHandler="clickHandler" @clickOne="clickOne" @clickTwo="clickTwo" />从上面的例子可以得知,子组件至少使用的三次$emit。并且每个emit的第一个参数名,都原创 2020-07-18 00:16:32 · 1823 阅读 · 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 · 1847 阅读 · 2 评论 -
前端安全机制集合(不定期更新) -- 戴向天
大家好!我叫戴向天QQ群:602504799如若有不理解的,可加QQ群进行咨询了解关于前端的安全机制大致分为:控制台、数据加密处理,文件访问权限等等。由于vue现在比较火热,所以以下的所有处理都是基于vue进行操作的。关于打开控制台的方法一、鼠标右击二、F12三、Ctrl + Shift + i四、在页面还没有进行加载完成,强行使用F12进行打开控制台五、利用浏览器的工具选项进行打开禁止打开控制台的操作我大概的进行了封装代码如下:import {isDev} from '@/co原创 2020-07-03 11:07:29 · 3439 阅读 · 0 评论 -
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 · 814 阅读 · 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 · 947 阅读 · 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 · 744 阅读 · 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 · 696 阅读 · 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 · 977 阅读 · 0 评论 -
Vue 之 路由跳转封装
大家好!我叫戴向天QQ群:602504799如若有不理解的,可加QQ群进行咨询了解在一个项目中封装路由跳转的方法还是很有必要的。因为当你封装了以后,关于一些参数的操作完全可以进行了统一管理,例如加上公共参数、跳转外部链接等等。goPage(param, replace) { if (typeof param == 'string') { param = { path: param } } if (replace) { // 判断是不是重定向 thi原创 2020-05-11 10:22:41 · 1484 阅读 · 0 评论 -
如何更好的使用VUE之数据处理方式
大家好!我叫戴向天QQ群:602504799如若有不理解的,可加QQ群进行咨询了解在我前端工作之前,在处理数据的时候,我经常在想如何更好的处理数据,对数据的可空性更高,更好的变换。其实这个也不是什么技术要点,只是在开发的时候,更加如意,特别在修改的是也方便。我的思路是,基础数据是不容改变的。然后通过其它的方式来进行获取相对应的数据,或者其它的数据格式。例如:const arr = [...原创 2020-03-11 12:50:59 · 1793 阅读 · 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 · 1906 阅读 · 0 评论 -
Windows系统下如何删除已经保存的账号密码
Windows系统下如何删除已经保存的账号密码:https://blog.csdn.net/ouyang_peng/article/details/80983996以管理员身份运行gitbash.exe文件使用 git config --system --unset credential.helper 方法 清除保存好的账号密码git config --system --unset cre...原创 2020-02-10 14:53:56 · 1446 阅读 · 0 评论 -
实现ElementUI-colorPicker颜色选择器组件 - 戴向天
大家好!我叫戴向天。QQ群:602504799QQ:809002582实现vantUI-colorPicker颜色选择器组件样式代码我就不贴出来了:加群(602504799)可获取样式代码包效果图代码如下<template> <div class="p-20 bg-f width-350 height-240 border-s-e"> <d...原创 2020-01-20 09:54:36 · 4552 阅读 · 0 评论 -
实现vantUI-tab组件选项卡 - 戴向天
大家好!我叫戴向天。QQ群:602504799QQ:809002582vantUI-TAB组件实现选项卡只是初步实现,关于一些van-tabs组件的其它API我目前还没有写。不过其它的API也挺简单的。有时间的话,我会将其它的API进行实现。代码如下van-tabs.vue组件文件<template> <div> <div class="h...原创 2020-01-19 10:24:20 · 4437 阅读 · 3 评论 -
前端开发常用方法 - formatTime - 时间戳格式转换以及计算 - 戴向天
大家好!我叫戴向天。QQ:809002582前端开发常用方法 - formatTime - 时间戳格式转换以及计算代码如下原创 2019-06-16 09:13:49 · 20468 阅读 · 0 评论 -
前端 (css兼容) 开发常用的css样式集 - flex布局 - position等 -戴向天
大家好!我叫戴向天QQ群:602504799QQ:809002582如若有不理解的,可加QQ群进行咨询了解/* css 样式优先级是可以通过顺序来进行使用的。越是写在后面的样式就会越优先被浏览器进行调用 当然也是是用 !important 来告诉浏览器该样式的优先级最高 示例: 下面这个div就可以实现全屏了 <div ...原创 2019-06-20 07:33:51 · 11213 阅读 · 0 评论 -
前端JS H5 touch事件封装,更加高效的开发移动端 - 戴向天
大家好!我叫戴向天。今天我给大家分享一个我自己封装的H5 touch事件的封装。QQ:809002582该方法的使用特别的简单,废话不多说。先上代码 ↓↓↓↓↓/** 给元素绑定事件 */ function touch({dom, start, move, end, stop = true, change}) { const f = { dat...原创 2019-06-04 10:34:57 · 11740 阅读 · 0 评论 -
过滤链接的参数 urlFilter - 戴向天
大家好!我叫戴向天,今天跟大家分享一个关于网络链接参数的操作,获取 || 过滤QQ:809002582详情的代码内容如下↓↓↓// 获取链接上的所有参数,返回的是一个Objectfunction getUrlParams(url) { const params = url.split("?")[1]; const reg = /&?([^&]+)/g; le...原创 2019-06-10 11:54:14 · 12470 阅读 · 0 评论 -
vue 自适应图片组件 前端 - 戴向天
大家好!我叫戴向天。今天我给大家分享一个关于vue的图片自适应的组件。该组件的自适应原理是利用css3的flex布局进行完成的,使用起来简单易懂下面的代码完全是纯手写的,若有写错的地方还望指正。QQ:809002582 戴向天废话不多说了,直接上代码原创 2019-06-03 22:00:45 · 13434 阅读 · 0 评论 -
前端 利用自定义组件 div 和 封装的touch事件做的刻度 -rule -戴向天
大家好!我加戴向天。QQ:809002582<template> <!--尺子刻度--> <div class="posi-r dh-150 mar-a w-600 over-h" :style="{border:`3px solid ${color}`}"> <div class="posi-a w100 flex-x-cen...原创 2019-06-14 18:12:09 · 489 阅读 · 0 评论