依古比古*-CSDN博客

原创 2021-05-11

nexus构件库-npm-文档编写

2022-05-17 10:20:24 475

原创获取当前url参数并跳转指定链接拼接参数

<template> <div class="app-container"> 当前浏览器url的参数 {{ params }} <el-button @click="goSubSystem"> 登陆</el-button> </div></template><script>export default { name: "subSystem", data() { return

2022-04-26 15:18:45 827

原创 echarts 柱状图名称显示不全问题

代码附赠如下 const barChart = echarts.init(indexChart.value); // barChartOptions 配置项，推荐放在外部引入。 resizeChart(indexChart.value, barChart, state.obj.option); var div = document.createElement("div"); div.clas.

2022-02-11 17:25:10 1390

const backgroundColor = '#101736';const color = ['#EAEA26', '#906BF9', '#FE5656', '#01E17E', '#3DD1F9', '#FFAD05']; //2个以上的series就需要用到color数组const title = { text: '销售来源', textStyle: { color: '#fff', fontSize: 16, }, padding: 0, top: 35.

2022-01-19 14:26:01 1443

原创 echarts

let list = [ {percentage: 3.2258, name: "医养健康", value: 1}, {percentage: 0, name: "文化创意", value: 2}, {percentage: 9.6774, name: "新一代信息技术产业", value: 3}, {percentage: 38.7097, name: "新能源新材料", value: 12}, {percentage: 3.2258, name: "现代海洋",.

2022-01-19 14:05:36 545

原创 echarts 旋转饼图

var data = [],data2=[];var trafficWay = [ { name: '病假', value: 20},{ name: '事假', value: 1},{ name: '婚假', value: 30},{ name: '丧假', value: 40},{ name: '年休假', value: 40}];var color=['#2A8BFD','#BAFF7F','#00F.

2022-01-18 18:18:06 4080

原创跨网段校验实现地址IP比较大小（终止IP大于起始IP）

思路笔者在听到这个需求后表示很懵，了解过后才知道是地址对象在选择范围的情况下，终止IP 是需要大于起始IP的，那么在跨网段的情况下该如何比较呢在这里，笔者有两种思路。1.第一种大概是大家脑子里会不由自主的想到通过字符串分割ip 地址来比较数组前三位的方法如果前三位都符合的话那么再去比较最后一位。如果最后一位的大小符合逻辑，那么校验通过当然如果前三位不相等就属于跨网段我们还需要去比较网段大小2.第二种：说起来第二种了也是受了旁边那位同事的启发在其帮助下实现了这个

2021-12-29 15:14:08 2132 3

原创 js校验字符长度（中文占据三个，英文占据一个）

js校验字符长度（中文占据三个，英文占据一个）export const checkServiceDesc = (rule, value, callback) => { var len = 0; for (var i = 0; i < value.length; i++) { var c = value.charCodeAt(i); //单字节加1 if ((c >= 0x0001 && c <= 0x007e) || (0xff60 &lt

2021-11-23 17:51:21 1646

原创 js正则校验文件路径（Windows，linux）

js正则校验文件路径（Windows，linux）亲测好用！！windows 路径校验如下/^[a-zA-Z]:((\\)[\S].+\s?)*\\$/Linux路径校验如下/^\/([\u4E00-\u9FA5A-Za-z0-9_]+\/{1})+$/

2021-11-23 17:46:19 5626 1

原创 vue-cli4.0搭建

vue.js越来越火爆.更多的项目vue进行开发,实际开发搭建开发脚手架.html css javascript node.js环境(npm包管理工具) webpack构建工具webpack是一个静态资源构建，打包的工具1.安装node.js2.版本10.0.0以上默认c盘可下载淘宝镜像比较稳定也可以使用yarn二:安装vue-cli脚手架构建工具cnpm install -g @vue-cli 全局安装vue -V查看版本 3.0为4.5.6创建vue3.0项目vue cre

2021-08-01 18:36:59 1574

原创 Module build failed (from ./node_modules/eslint-loader/index.js)

Module build failed (from ./node_modules/eslint-loader/index.js)昨天在Git上拉代码时候，在进行npm install 之后报了这个一个错！在经过了不断地删除安装依赖之后还是不行，最后发现了一个问题：那就是我们需要降低babel-eslint的版本，直接安装下来的是10.*.*以上的版本，我们需要安装到稳定版本下载指令npm install [email protected] 即可，启动项目！完事...

2020-10-28 10:51:17 1695

原创 × eslint --fix found some errors. Please fix them and try committing again.

解决git push提交代码之前代码规范问题现在可以说是大多数公司都开启了代码规范问题，有良好的编码习惯是程序员必备！！拒绝垃圾代码丑恶代码！！！今天小编在提交的时候报了这样一个错`×eslint --fix found some errors. Please fix them and try committing again.`只需要输入 git commit --no-verify -m "提交时的注释"...

2020-07-31 17:53:20 4513

原创 Node Sass could not find a binding for your current environment: Windows 64

出现问题的原因是当前电脑所运行的Node和项目运行所需的版本不一致在这之前更新了以为是node-sass出现问题所以使用cmd更新了npm rebuild node-sass 但是启动后仍然发现报错检查没有问题后重新构建Node-sass项目目录下打开cmd：输入命令： npm rebuild node-sass然后在更新一下：npm update最后npm run dev 就好了~...

2020-07-30 10:09:23 265

原创实现鼠标悬浮下拉菜单箭头会旋转

实现鼠标悬浮下拉菜单箭头会旋转代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> &

2020-07-29 15:56:52 707

原创 vue中elementui的el-input实现中文和英文的正则校验

vue中elementui的el-input实现中文和英文的正则校验在我们写后台管理的时候难免要自定义一些校验的规则，比如说标题必须是中文的，组件名必须是英文的。而如果这个时候，输入框已经是封装好的，我们该咋样去修改实现呢？今天小编也是搞了一个下午出来了代码分享给大家！！仅供参考页面中代码  <el-form-item label="菜单标题" prop="title"> <el-input

2020-07-27 19:07:21 7840

原创微信小程序路由

wx.switchTab()跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面{ "tabBar": { "list": [{ "pagePath": "index", "text": "首页" },{ "pagePath": "other", "text": "其他" }] }}wx.switchTab({ url: '/index'})wx.reLaunch()关闭所有页面，打开到应.

2020-06-24 17:04:39 301

原创微信小程序中实现父子传值

小程序搁置了一段时间着实忘记了挺多。今天复习的是父子传值。欢迎随时补充！！！父组件给子组件传值第一步：定义父组件在父组件json 中引入子组件{ "usingComponents": { "sonCom":"../components/add.js" }}第二步：在子组件中给自己定义成一个子组件{ "usingComponents": { "sonCom":"../components/add.js" }}第三步：在父组件中，子组件的引用处，绑

2020-06-23 23:25:34 289

原创微信小程序中的生命周期

微信小程序的生命周期大概分为三步1.全局生命周期2.页面生命周期3.组件生命周期一. 生命周期 App（全局）项目根目录app.js文件App({ onLaunch (options) { console.log('小程序初始化') // 在项目打开时可以写一些业务逻辑 }, onShow(options) { console.log('监听小程序启动或切前台') }, onHide() { console.log('监听小程序切

2020-06-22 23:41:03 424

原创 js实现蜘蛛网效果

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</ti

2020-06-22 00:08:00 1065

原创 Vue 中methods，computed watch的区别

Vue 中methods，computed，watch的区别methodsmethods中定义的都是具体的方法，根据一些触发条件，调用一次，重新执行一次。比如说点击事件<template> <div>  <div @click="onClick"> </div> </div></template>

2020-06-20 01:19:47 196

原创 javascript实现贪吃蛇小游戏

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>贪吃蛇</title><script> var map; //地图类对象 var snake; //蛇类对象 var food; //食物类对象 var timer; //定时器对象 var sum=0; //分数 //地图类 functi

2020-06-18 23:42:21 250

原创 JavaScript实现随机点名器功能

js实现点名器功能代码： - css样式 <style> .box{ width: 350px; height: 300px; background-color: antiquewhite; margin: 0 auto; text-align: center; } #names{ width

2020-06-18 00:39:07 828

原创 jQuery实现轮播图

jQuery实现轮播图学习了js原生实现轮播图，今天我们尝试用jQuery库来实现，给你不一样的感觉。上代码！！！HTML中：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http

2020-06-16 15:55:38 1144

原创 jQuery实现拖拽

直接上代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title

2020-06-15 22:56:09 826

原创关于js正则的总结

一：什么是正则表达式是对字符串操作的一种逻辑公式，事先定义好的一些特定的字符、及这些特定字符的组合，组成一个“规则字符串”,这些特定字符串是对字符串一种过滤逻辑。二：正则表达式的作用:给定一个正则表达式和一个字符串，我们可以做到以下目的1.给定的字符串是否符合正则表达式的过滤逻辑2.可以通过正则表达式，从字符串获取我们想要的特定的部分正则表达式的特点:1.灵活性，逻辑性和功能性非常强2.可以迅速的用极简单的方式达到对字符串的复杂的控制3.对于没有基础的人来说有点难理解创建正则表达式

2020-06-15 10:19:38 137

原创 js原生实现购物车功能

js原生实现购物车功能功能实现：1. 用JavaScript实现静态购物车功能2. 点击+号数量增加，点击-号数量递减；3. 实现全选、反选和删除功能；4. 求出小计、总数量和总价；效果图献上：上代码：css中：<style> table{ width: 900px; border-collapse: collapse; margin: 0 auto; }

2020-06-12 23:48:10 671

原创 js原生实现留言板功能

功能实现：点击提交按钮，讲输入框中文字添加到显示留言下，并清空文本框；点击删除，将添加的姓名与内容以及删除按钮都删除。代码如下：css:<style> *{ margin: 0; padding: 0; } .box{ width: 500px; border: 1px solid red; margin: 0 auto;

2020-06-11 23:15:58 754

原创 javascript事件冒泡和事件捕获及事件代理

一：什么是事件？事件是文档和浏览器窗口中发生的特定的交互瞬间。事件是javascript应用跳动的心脏，也是把所有东西黏在一起的胶水，当我们与浏览器中web页面进行某些类型的交互时，事件就发生了。事件可能是用户在某些内容上的点击，鼠标经过某个特定元素或按下键盘上的某些按键，事件还可能是web浏览器中发生的事情，比如说某个web页面加载完成，或者是用户滚动窗口或改变窗口大小。二：什么是事件流？事件流描述的是从页面中接受事件的顺序，但有意思的是，微软（IE）和网景（Netscape）开发团队

2020-06-04 23:09:18 182

原创 Javascript原生的DOM操作方法

Javascript的DOM操作方法原生js5中操作dom一共是有三种方法：第一种：标签式的绑定（HTML事件处理）第二种：DOM0级事件处理第三种:DOM2级事件处理但是频繁的操作dom可能造成页面元素的重绘和重流。所以现在我们经常用的就是虚拟dom，数据驱动组件化。但是跟随时代发展潮流的同时，我们也不能忘记了原生！！！补充一个面试题vue 和jQuery最大的区别：jQuery：是一个操作DOM的神奇，我们可以通过$(),ajax $().get等vue呢是数据驱动组

2020-06-03 22:23:08 543

原创 vue封装一个搜索组件

vue封装一个搜索组件话不多说，直接上代码！！！搜索组件：<template> <div> <input type="text" v-model="inputValue" placeholder="请输入" @input="getValue" @keydown.enter="search" /> </div></template&g

2020-06-03 21:41:21 953 2

原创 JavaScript递归实现深拷贝

深浅拷贝：深拷贝和浅拷贝是针对复杂数据类型来说的，浅拷贝只拷贝一层，而深拷贝是层层拷贝。深拷贝复制地址的内容。就是说递归的复制内部数据找到基本数据类型之后才复制出来深拷贝复制变量值，对于非基本类型的变量，则递归至基本类型变量后，再复制。浅拷贝拷贝的存贮在栈内存深拷贝后的对象与原来的对象是完全隔离的，互不影响，对一个对象的修改并不会影响另一个对象，深拷贝存储在堆内存。浅拷贝：只是复制外层地址的拷贝，没有继续往内部找基本数据类型。浅拷贝是会将对象的每个属性进行依次复制，但是当对象的属性值

2020-06-03 21:22:28 1202 1

原创浅谈js 防抖节流

防抖：在固定的事件，间隔内不会执行我们的代码逻辑除非某个时间段内有事件触发会再次延长如果在某个时间段后没后触发就在n秒后执行代码逻辑我们用防抖实现一个函数的封装。生活小例子：比如说电梯的实现原理还有我们的手机啊电脑啊自动锁屏我们通常按下电梯的时候， <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="vie

2020-06-02 21:30:19 203

原创浅谈js中call,apply,bind的区别

Call、 apply 区别，原生实现 bind Call、apply、bind都是改变this指向的，其中call的话是通过第一个参数来改变this指向，函数在传参的时候一个一个进行传参，apply也是通过第一个参数改变this指向，函数传参的时候通过数组或是一组的形式进行传参，而且他只能用于函数的调用时候，而bind呢不能用于函数的标准调用传参，只能是事件或是方法的后边进行改变this的指向他们都是用来改变this指向的。call：改变this指向函数被执行了call（上下文环境，参

2020-06-02 20:04:40 653

原创 js数据类型的转换

一：数据类型1.1、数字类型(number) 整型浮点型 NaN 不是数字1.2、字符串类型(String) 字符串直接量转义字符1.3、布尔类型(boolean)1.4、Undefined 未定义1.5、Null 空对象1.6、对象类型(Object)二、Typeof操作符定义：typeof操作符返回一个字符串，表示未经计算的操作数的数据类型。typeof操作符后跟操作数：typeof 操作数

2020-06-01 22:07:55 284

原创 js闭包的介绍

我们的JavaScript分为三部分：EcmaScript(JS核心),DOM,BOM。、面试中经常会有面试官问我们什么是闭包？你理解的闭包是什么？优缺点？使用场景？一：闭包的概念：闭包就是一个的函数的返回值是另外一个函数，返回的这个函数调用了其父函数的内部变量且在外部被执行，就产生了闭包。特点：函数嵌套函数，内部的函数可以访问外部函数的变量。闭包=函数+自由变量。优点： 1. 长期驻扎在内存中2. 私有成员的存在3. 可以隔离作用域，不造成全局污染缺点：由于常驻内存，使用

2020-06-01 20:39:09 269

原创 vue封装dialog弹框组件

vue封装dialog弹框组件dialog.vue<template> <div class="dialog" v-show="showMask"> <div class="dialog-container"> <div class="dialog-title">{{title}}</div> <div class="content" v-html="content"

2020-05-31 22:51:07 2055

原创 vue 封装一个toast组件

vue 封装一个toast组件第一步创建一个toast.vue<template> <transition name="fade"> <div v-show="visible">{{message}}</div> </transition></template><script>export default { data () { return { visible: fal

2020-05-31 14:54:13 584 1

原创 vue移动端实现滚动到顶部

<template> <div class="home"> <div @scroll="scroll()"> <div v-for="(item,index) in this.list" :key="index" class="every">{{item}}</div> </div> <div class="scrolltop" v-show="isShow" @click="goTop"&

2020-05-31 14:35:59 2198

原创 vue递归组件实现树形结构

vue递归组件实现树形结构一：递归组件什么是递归组件？简单来说就是在组件中内使用组件本身。函数自己调用自己。很多情况下我们呢刷数据的时候，不知道到底这个数据结构是有多少层，那么这个时候我们就用到了递归来实现。二：先用for来遍历：父组件中：<template> <div class="home"> <tree :title="list.name" :list="list.children"></tree> </div&gt

2020-05-29 13:08:03 4298

原创 vue自定义指令的使用（directive）

vue自定义指令的使用：全局指令和局部指令：【全局指令】使用Vue.diretive()来全局注册指令。【局部指令】也可以注册局部指令，组件或Vue构造函数中接受一个directives的选项。钩子函数。指令定义函数提供了几个钩子函数（可选）。【bind】只调用一次，指令第一次绑定到元素时调用，用这个钩子函数可以定义一个在绑定时执行一次的初始化动作。【inserted】被绑定元素插入父节点时调用（父节点存在即可调用，不必存在于d ocument中）。【 update】所在组件的

2020-05-28 20:56:18 626

web前端学习路线.xmind

空空如也