- 博客(31)
- 收藏
- 关注
RSS订阅原创 CSS使用clip-path绘制一个不规则边框
简介clip-pathCSS 属性可以创建一个只有元素的部分区域可以显示的剪切区域。区域内的部分显示，区域外的隐藏。剪切区域是被引用内嵌的URL定义的路径或者外部svg的路径，或者作为一个形状。clip-path属性代替了现在已经弃用的剪切clip属性。...
2021-06-19 15:16:23
3650
原创 与src同级目录下创建一个文件，并且在打包的时候根据变量设置打包哪个文件
我们都知道vue打包的时候一般src下面的文件会自动打包，我这里的需求是我们有一批图片，想要根据不同的版本加载不同的图片，打包的时候指定是哪个版本，就打包哪个文件1.src同级，创建文件夹oem，此文件夹下面放的是我们指定打包的文件2.在vue.config.js里面设置使用CopyWebpackPluginimport CopyWebpackPlugin=require('copy-webpack-plugin');module.exports={ configureWebp
2020-09-21 16:16:09
935
1
转载 vue中的 .env .env.development .env.production
1.项目根目录下创建.env、.env.development和.env.production三个文件，文件名解释分别如下： .env无论开发环境还是生产环境都会加载的配置文件 .env.development开发环境加载的配置文件 .env.production生产环境加载的配置文件2.环境变量的简单使用示例。需要注意，配置文件里的属性名必须以VUE_APP_开头，比如在.env文件这样声明一个环境变量：VUE_APP_buildSetting = `aaa`然后在代码里...
2020-09-21 15:45:34
759
1
原创 vue-cli3.0配置图片转base64的规则
vue-cli3.0发现打包的时候，一些小于10k的图片没有转base64，需要自己新建一个vue.config.js的文件（在根目录），然后进行如下配置，就可以控制图片转义规则module.exports = { chainWebpack: config => { config.module .rule('images') .use('url-loader') .loader('url-loader') .tap(options =&
2020-09-21 10:54:34
1895
1
原创 Vue中如何使用sass实现换肤(更换主题)功能
原理:通过设置html的attribute属性在封装的函数中进行判断，进行相应的设置不同的颜色css中 [ ] 可以识别到在html标签上设置的属性，所以在html上对应属性发生变化时，就会执行相应的样式，这一步有点类似于平时给div添加一个.active属性，css自动执行相应样式。1.首先切换的样式文件我们需要两个 varibale.scss：颜色，字体，背景的配置文件 mixin.scss：定义mixin方法的文件。下面贴出代码: varib...
2020-09-03 17:41:44
1341
原创 vue-cli+node.js 实现excel文件上传
excel文件上传，我这里面整理了两种方案第一种：前端读取excel文件，然后封装数据，传给后端，后端直接写入数据库第二种：前端传formData数据，后端获取到之后读取数据，然后写入数据库以下是实现的代码逻辑，我这里面专门封装了一个文件上传的组件<template> <div class="fileBox"> <input type="file" ref="upload" @change='exportData' accept=".x
2020-08-21 10:58:30
938
2
原创 webpack-theme-color-replacer webpack插件 实现web项目 全局修改主题颜色
第一步安装插件:npm install ---savewebpack-theme-color-replacer第二步在vue.config.js里面引入 修改配置const BASE_URL = './'const ThemeColorReplacer = require('webpack-theme-color-replacer')const forElementUI = require('webpack-theme-color-replacer/forElementUI')co..
2020-08-21 10:14:17
5478
2
原创 nodeJS中定时任务cron的使用
cron模块可以帮助我们在node中定时执行任务。如果定时需求是简单的setInterval()与setTimeout()计时器所无法满足的比较复杂的定时规则，可以使用cron来配置。安装cron模块npm install cron代码中启动一个任务var cronJob = require("cron").CronJob;//每秒执行一次new cronJob('* * * * * *', function () { //需要定时执行的任务代码写在这里}, null,
2020-08-07 15:04:56
2081
原创 Nodejs Global 模块
开发中遇到一个问题，使用node写接口时发现我需要使用一个全局变量来记录一个参数，浏览器上有自己的全局对象 window，那在node里面全局对象是什么呢？进行一波百度发现:nodejs 下也有自己的全局对象 global，并且在各个模块下 都可以直接访问 global 对象直接上代码，网码粘出了这样一段代码，猜测这段应该是在js文件下可以直接运行的，但是我使用的是ts文件，语法上不支持global.a = 666; // 全局变量都在global对象中。a = 555; //等价于 gl.
2020-08-07 14:47:42
745
原创 解决打开github速度慢的问题
打开GitHub真的好慢啊，想学习优秀的开源项目，打开速度慢简直是打击学习热情。去网上找一圈，终于给我找到百度方案了：优化思路：通过绕过DNS解析，直接在本地绑定host，接下来跟大家详细介绍：1.在浏览器中打开DNS查询网站http://tool.chinaz.com/dns，我们输入github.com，然后点击检测，在下方的结果列表中，选择TTL值小的IP地址13.229.188.59，如下图所示：2.接着我们打开本地电脑的C:\Windows\System32\drivers\e
2020-08-03 11:21:57
586
原创 怎么将节点转为注释节点，怎么移除
1.转化为注释节点里面的this.elDome指的是当前dom元素const comment = document.createComment(' ');Object.defineProperty(comment, 'setAttribute', { value: () => undefined,});let vnode = this.$createElement("div", {domProps:{innerHTML:this.elDome}})vnode.elm = ..
2020-07-31 17:37:25
236
转载 JS数组追加数组采用push.apply的坑(转)
JS数组追加数组没有现成的函数，这么多年我已经习惯了a.push.apply(a, b);这种自以为很酷的，不需要写for循环的写法，一直也没遇到什么问题，直到今天我要append的b是个很大的数组时才遇到了坑。a = new Array(); b = new Array(125624); a.push.apply(a, b);以上的代码在mac的chrome下抛出了如下的异常Uncaught RangeError: Maximum call
2020-06-24 09:27:42
388
原创 vue使用动态路由，从后端给的数据里面加载路由表
很多时候我们在项目的路由都是在前端配置好的但是有的时候为了进行全面的权限控制，会需要后台给出路由表，前端再渲染。不用在前端配置。下面主要讲一下思路1、和后台小哥哥沟通好数据，把我们前端配置的路由表数据给他，他就能看懂了2、拿到数据需要我们自己再处理，我们路由的处理放在路由守卫，Router.beforeEach里面做，但是路由中的component后台是给不了的，我这想了两种解决方法//第一种 可以跟后端小哥约定一个字段，把路由的url后半段直接给后端小哥哥我们直接加载，这里面注意impo
2020-06-19 10:14:34
2787
1
转载 axios中取消请求及阻止重复请求的方法（防抖点击请求）
前言 在实际项目中，我们可能需要对请求进行“防抖”处理。这里主要是为了阻止用户在某些情况下短时间内重复点击某个按钮，导致前端向后端重复发送多次请求。这里我列举两种比较常见的实际情况：PC端 - 用户双击搜索按钮，可能会触发两次搜索请求移动端 - 因移动端没有点击延迟，所以极易造成误操作或多操作，造成请求重发以上情况有可能在有Loading遮罩时依然发生，所以我们要考虑前端阻止重复请求的方法。核心——CancelToken 在Axios中取消请求最核心的方法是CanelToken...
2020-06-03 16:05:38
738
原创 谷歌浏览器跨域处理
一、关闭谷歌浏览器二、在某个盘下面创建文件夹，这时是在C盘根目录下面创建文件夹aaaa三、在谷歌浏览器的属性配置中目标最后 空一格 添加代码--disable-web-security --user-data-dir=C:\aaaa（创建文件夹目录）...
2020-05-21 17:27:41
147
转载 vue[mini-css-extract-plugin]Conflicting order between 警告解决方式
vue打包的时候报vue[mini-css-extract-plugin]Conflicting order between 警告，特地去网上找了一下解决方法，在这里记录一下，转自:墨水白云博主原创文章地址:https://blog.csdn.net/lxy869718069/article/details/103504654问题出现：大体意思是说mini-css-extract-plugin 这个插件在js里css的引入顺序导致的问题，如上图所述，就是指component-..
2020-05-13 10:55:26
2193
原创 用Navicat自动备份mysql数据库
1.打开navicat客户端，连上mysql后，双击左边你想要备份的数据库。点击“计划”，再点击“新建批处理作业”。2.双击任务代表选中3.保存，设置任务名4.设置任务计划，什么时候执行，如果想要高频率执行就选择高级，如果想要设置多条计划就把下面显示多条计划打勾5.最后输入电脑密码，(一定是电脑密码，而不是数据库密码)6.最后文件的保存路径:一般会在 文档\Navicat\MySQL 下面7.还原备份文件...
2020-05-13 10:46:19
507
原创 vue打包时时候报错asset size limit ：the following asset（s）exceed the recommended size limit （244kib）
vue项目打包时报文件过大的问题，虽然不影响正常打包，但是看起来太不爽错误原因，资源(asset)和入口起点超过指定文件限制，需要在 vue.config.js 文件内做如下配置：module.exports = { //webpack配置 configureWebpack: { //关闭 webpack 的性能提示 performance: { hints:false } //或者 //警告 webpack 的性
2020-05-12 14:21:13
6154
原创 分页及排序
分页/** * 分页 arr原始数组，pageSize每页多少条数据*/ const paging = (arr,pageSize)=>{ let obj = {} for(var i = 0 ; i < arr.length;i++){ let key = Math.floor(i / pageSize) +...
2019-11-05 17:26:55
137
原创 iView表格行验证问题
需求： 在表格里面添加文本框校验，这里面只添加了姓名和用户名的校验（1、必填，2、只能输入大小写字母 + 数字 + / + ：+ _ + . + - + \）解决思路： 将表格嵌套在form表单里面，然后在输入框的位置使用FormItem，将验证规则直接写在FormItem标签上，这里面的prop属性里面绑定的值必须是data（表格绑定的数据）.index（表格行的下标...
2019-11-05 16:39:54
559
转载 CSS3特殊图形制作
1、三角形//html<div class="triangleBox"> <div class="triangle"></div> <div class="triangle1"></div> <div class="triangle2"></div> <div c...
2019-07-06 20:57:46
567
转载 移动端几种做前端适配的方法讲解
目前我所知道是有几种方法来做适配:1.使用rem单位来做网页适配，这个是我比较推荐的一种，效果很好，浏览器的兼容性也不错只要一行代码就能适配多个分辨率终端 (function(doc,win){ var docEl =doc.documentElement, resizeEvt = 'orien...
2019-05-15 14:28:20
495
原创 使用vue-cli+element-ui但是element-ui的样式修改不了
最近在开发使用了vue+element-ui，但是发现element-ui的样式修改不了的问题，最后发现是因为我在样式上加了scoped这个属性，一个局部作用域的问题 当加了scoped的时候代表这段样式代码只在这个组件内有效，elementUI的样式是定义在全局中，我们使用scoped时，局部样式会被全局样式所覆盖（vue默认的是全局样式覆盖局部样式）所以样式上加了scoped...
2019-05-15 10:28:31
1231
1
原创 上传图片并且判断图片大小、类型、宽高
上传图片并且判断图片大小、类型、宽高项目中需要上传图片并且判断大小、类型、宽高// An highlighted blockchangeCarousel(e){ //判断文件大小 var file = e.target.files[0] var size = e.target.files[0].size / 1024; var that = this //判断大小 ...
2019-05-15 09:57:21
713
转载 分享一些前端开发中最常用的JS代码片段~ 干货~
分享一些前端开发中最常用的JS代码片段~ 干货~HTML5 DOM 选择器// querySelector() 返回匹配到的第一个元素var item = document.querySelector('.item');console.log(item);// querySelectorAll() 返回匹配到的所有元素，是一个nodeList集合var items = documen...
2019-05-14 18:18:09
377
原创 element-ui自定义表单验证及清除表单验证
element-ui自定义表单验证及清除表单验证element-ui提供了一套表单验证规则，非常方便，但是有时候我们需要添加一些正则或者是添加一些判断，这个时候官网上并没有这个例子，这里特地总结一下当时踩过的坑html<el-form ref="formtheadAllianceCharef" :rules="formtheadAllianceChaRules" :model="for...
2019-05-13 16:37:22
5855
原创 如何在vue-cli中更新element-ui的版本
如何在vue-cli中更新element-ui的版本之前搭建项目的时候element-ui是2.7.2，今天发现element-ui升级到了2.8.2.第一步:需要先卸载原来的element-uinpm uninstall element-ui第二步：npm下载最新版本的element-uinpm i element-ui -S第三步：在 main.js 中按官文文档更换以引入的内...
2019-05-13 14:58:01
2443
转载 vue 自定义指令实现拖动边框变大
vue 自定义指令实现拖动div的边框变大，可以全局引入到main.js里面Vue.directive('drag', { bind: function (el) { var eleLeft = $(el).offset().left; var isMouseDown = false; var borderLen = 2; //左右边框 el.onmoused...
2019-05-10 14:28:50
1664
转载 vue实现div拖拽互换位置且有过渡效果
vue实现div拖拽互换位置且有过渡效果template模板<transition-group tag="div" class="container"> <div class="item" v-for="(item,index) in items" :key="item.key" :style="{background:item.color,width:'80px',h...
2019-05-10 14:07:28
1824
1
原创 iframe 嵌套页面怎么通信
iframe 嵌套页面怎么通信html <iframe src="text.html" frameborder="0" name="ifrLink" id="ifrLink"></iframe>js 调取子页面的方法 document.getElementById("ifrLink").contentWindow.qureListClass(); //调取子页面...
2019-05-10 13:56:48
854
原创 elementUI本地引入
elementUI本地引入element-ui是和vue配套使用的一个框架，官网上给出了在vue-cli下使用的例子，并没有说具体的本地引入，所以自己整理了一下，element-ui引入的时候主要是除了引入css和js之外，还有一个字体库需要下载引入，下面是代码第一步：把vue.js,element.css,element.js下载下来，保存到本地。第二步把element-ui的两个字体...
2019-03-12 09:21:15
5362
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人