JiAyInNnNnN123的博客

原创 基于vantui自定义底部导航标签栏组件

但是在接口层面，需要后端只会返回一个menuicon的字段。无法使用tabbar满足当前业务需求。自定义底部组件原因：当前需要在管理端配置菜单数据，以及icon数据。可以支持自定义icon，但是需要维护两个icon文件。

原创 组件内部watch后切换数据报错Error in callback for watcher “xxxx“

报错信息：报错代码：百度了一下是因为这里写了箭头函数，导致this指向为父级作用域上下文，不是vue实例导致修改为：progressData: { handler: function(newValue, oldValue) { this.setChartData(newValue) }, deep: true, },...

原创 vant2 ui库定制主题

开发过程中前端会遇到过很多，需要覆盖原有ui库的样式的情况，基本上都是以v-deep或者important强制修改。在使用vant2开发过程中，官方说明了一个方式可以直接直接定制主题。3.修改配置，当运行的时候直接读取我们自定义的less文件。案例：当前我想修改nav-bar的左侧icon的颜色。此时我再次运行项目，就会变成我自定义的颜色了。1.当前项目main.js确定引入样式文件。4.根据官网给出的less变量，修改样式。官方右侧demo默认是蓝色。2.创建一个less文件。

原创 vue路由守卫死循环及路由守卫使用

按照正常逻辑处理：获取token，判断token，如果有token正常处理，没有token直接跳转login页面。问题场景：用户登陆进入页面内部，点击退出登录，清除本地用户信息，页面跳转至登陆页面，出现原因：每次跳转时都会触发全局守卫，但是判断的条件没有变，所以一直循环。通过判断本地sessionstorge判断当前是否需要登陆页面。from：当前导航正要离开的路由。解决方式：使用vue的路由守卫。需要改成：停留在登陆页面。to：即将进入的目标。

原创 easyui动态修改layout高度

需求：添加高级搜索按钮，点击后展示更多的搜索组件，否则不展示。

原创 点击button按钮整体页面刷新

(2)表单提交时，所有具有name属性的html输入元素(包括input标签、button标签、select标签等)都将作为键值对提交，除了Submit对象。(1)Submit将表单提交(form.submit())作为其onclick后的默认事件，Button并非如此。button按钮的默认type是submit,当type是submit的时候会触发action。当前form中action为空，所以直接跳转当前页面，导致搜索按钮点击，页面重新加载一遍。问了同事，说可能是button默认的type导致的。

原创 easyui布局:表格底部页码被遮挡

由于在布局中，表格上面有操作按钮，导致表格底部的页码无法固定在底部。按钮那一行是自己多添的，造成下面的高度超出了窗体高度,分页显示不全。正确使用easyui layout。

原创 vue路由跳转不执行mounted方法

2.在路由配置中，当前组件使用了keepalive 导致有缓存，可以不使用keepalive，正常使用mounted生命周期进入即可。activated：被 keep-alive 缓存的组件激活时调用。一进入页面就触发，可用于初始化页面数据。就是解决本文的方式。问题：列表页面，进入详情，使用route跳转传值，进入详情。首次进入执行mounted方法，二次进入不执行mounted方法。离开页面就触发，用于离开清楚当前页面的定时器。keepalive：用于保存组件当前状态，以避免反复重新渲染导致的性能问题。.

原创 elementui日历组件二次开发+样式+按钮事件触发

先上实现样式需求：日期分为三种情况1，安全的日期，展示为绿色背景颜色2，不安全日期，展示为红色背景颜色，鼠标滑过显示不安全内容3，正常无数据的日期，展示默认蓝色使用了elementui里的日历组件注意点：弹出框不能写嵌套内容，否则会加载多余的日期，导致样式错乱。通过动态class判断当前样式通过后端数据返回对应控制当前是否是危险日期，判断弹出框是否显示。...............

原创 TypeError: wave.ensureState is not a function

使用echarts水球图的时候如果版本不匹配则会报这个错误解决方式：修改相关对应的node包版本echarts5.x 版本 适用于 echarts-liquidfill3.x.xecharts4.x 版本 适用于 echarts-liquidfill2.x.x另附 适用于echarts5以上的liquidfill3插件地址：liquidfill 使用方式：在mian.js文件中引入：直接在页面中使用即可注意的点：color的设置为array......

原创 页面展示组织架构-vue2-org-tree插件使用

前端展示组织架构

原创 echarts自定义柱状形状 带有上调下降趋势

1，自定义柱状图形状处理方式：用echarts里的symbolseries:[{ data: this.yData, type: 'pictorialBar', symbolRepeat: true, symbol: //图片base64位编码 这里省略 animationEasing: 'elasticOut', symbolSize: ['50%'.

原创 echarts地图自定义tooltip样式

效果图：自定义tooltip样式 tooltip: { position: ['50%', '50%'], trigger: 'item', backgroundColor: 'rgba(0,0,0,0)', borderColor: 'rgba(0,0,0,0)', extraCssText: 'box-shadow: 0 0 0 rgba(0, 0, 0, 0);', zInde

原创 vue3与vue2的差异--【ref&$set】+ $refs

针对于vue2中对于数组和对象修改里面的value或者是数组中的内容，有时不会触发到vue的变更检测。使用$set进行赋值。详情请见下文链接。VUE数据不能驱动视图？$set详细教程浅学了一天vue3，在vue3中使用了ref这个回调函数进行vue组件中：接受一个内部值并返回一个响应式且可变的 ref 对象。ref 对象仅有一个 .value property，指向该内部值。...

原创 css-置换元素与非置换元素

html中我们知道什么是行内元素，什么是块元素，什么是行内块元素。置换元素，与非置换元素其实是很少去使用的名词。css权威指南上写：置换元素：为其他内容占位的元素。典型的置换元素是img，它指向一个图像文件，那个图像及插在img元素在文档流中的位置。大多数表单元素也是置换元素。非置换元素：内容包含在文档中的元素。例如，段落（p）是非置换元素，因为段落中的文本内容在元素自身中。但看这个有些晦涩，在w3c中对于上面两者的说明更让人能理解：置换元素：一个 内容 不受CSS视觉格式化模型控制，CSS

原创 JS的继承（未完待续。。。）

1.原型链继承 function Animal(name){ this.name = name || 'Animal'; this.food='菜'; this.skill=['吃饭','睡觉','打豆豆'] this.sleep = function(){ console.log(this.name+'睡了晚安') } } // 在原型上添加一个方法 A

原创 vue-seamless-scroll插件使用后点击事件无效

场景：当前使用vue-seamless-scroll包裹了一个滚动div 的list，当前list中的div需要点击进行其他逻辑处理问题：部分div点击不触发点击事件原因：因为vue-seamless-scroll中间包裹的dom复制渲染，没有带上dom的事件导致。解决方式：使用事件委托。在vue-seamless-scroll外部的div添加点击事件，获取$event的target <div class="scroll-list" v-if="safeData.brandList" @cl

原创 a.x = a = {n:2} 结果是？

在****中学习，看到了这篇文章，光看文字描述比较的晦涩难懂，说是一道值得考究的面试题。单拎出来看看其实也是很有趣的一道题，考察了很多方面。本文就仔细讲一下这道题相关的知识点以及最后的结果。var a = {};a.z = a = [];alert(a.z); //c.a是什么？《JavaScript 权威指南》中的一段文字（4.7.7 运算顺序），曾提到过：JavaScript 总是严格按照从左至右的顺序来计算表达式。那么我们拆分一下上面这段代码的含义：简单的画了一个图，最后的结果就

原创 vue中改变v-html元素样式

<div class="brand-article" v-html="content.article"></div>实现样式：设计图：当前article是一篇文章，有标题有段落，想给v-html中元素添加样式，同原来组件中访问元素给加样式不同，会不好使。前提：css中使用了scoped，导致样式只在本组件生效，并且使用了sass解决方式：1.在brand-article下 使用 >>>注意：>>> 只作用于css2.需要用 /de

原创 【vue】计算属性

vue官网对于计算属性的描述：模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。当你想要在模板中的多处包含此翻转字符串时，就会更加难以处理。所以，对于任何复杂逻辑，你都应当使用计算属性。计算属性的使用当我们有一个数组对象，想要在页面中直接展示数组对象某一个值的总和时，我们可以使用method或者使用计算属性。后续为什么使用计算属性，而不用method后文会提及到的。页面展示书的总价这里就使用了计算属性，在计算属性中定义一个值，可以在页面

原创 Mac下搭建一个vue项目

原创 使用mac 安装前端环境记录

下载git环境下载node环境+npm切换node版本

原创 CSS重绘和重排

定义重绘：当元素的一部分属性发生改变，如外观、背景、颜色等不会引起布局变化，只需要浏览器根据元素的新属性重新绘制 ，使元素呈现新的外观叫做重绘。重排（回流）:当render树中的一部分或者全部因为大小边距等问题发生改变而需要DOM树重新计算的过程。什么属性会触发重绘或者重排引起重绘的属性：colortext-decoration //设置文本的装饰，下划线，上划线，删除线等。outline outline-color //轮廓颜色outline-width //轮廓宽度

原创 【VUE2.0:Angular】过滤器的使用

本文更多介绍的是vue2.0与3.0的使用。angular框架也有类似过滤器的用法，名为管道，参考文章：Angular day2 组件相关 + pipe自定义管道：Angular7 自定义管道pipevue2.0过滤器的使用：在vue实例中使用filters进行过滤，用法同angular中的管道一致上代码： data() { return { list: [ { name: "测试vue咕噜噜器", type: 1 }, { name: "

原创 echarts 开发问题记录

1.动态改变echart宽度：需求：当前选中农业，旗下展示两个图表当前选中渔业，仅展示左侧折线图当前页面不需要自适应。如果需要自适应的小伙伴仅供参考哈。首先外部以及内部的宽度初始值动态切换： activeName: { handler(newValue) { if (newValue === 4) { this.$refs.lineGradient.style.width = '100%' //修改chart外面包着的div的宽度

原创 Vue--学习笔记+实际开发遇到问题记录

组件化：一个页面拆分成一个个的功能块，每个功能块完成属于自己的这部分独立功能，整个页面的管理和维护变得更加容易维护。vue中注册组件：调用Vue.extend()方法，创建组件构造器调用Vue.component()方法注册组件在Vue实例的作用范围内使用组件...

原创 gitlab响应时间过长修改域名

https://github.wuyanzheshui.workers.dev/https://hub.fastgit.org/https://github.com.cnpmjs.org/

原创 常用问题记录

v-show和v-if的区别：1）v-if是通过控制dom节点的存在与否来控制元素的显隐；v-show是通过设置DOM元素的display样式，block为显示，none为隐藏；2）编译过程：v-if切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件；v-show只是简单的基于css切换；3）编译条件：v-if是惰性的，如果初始条件为假，则什么也不做；只有在条件第一次变为真时才开始局部编译（编译被缓存？编译被缓存后，然后再切换的时候进行局部卸载); v-show是在任何条

原创 Angular报错Error: StaticInjectorError(AppModule)

报错如下：意思是：没有注入1中的2解决:2 哪个组件报错，就在对应的module.ts注入即可，在我这里是app.module.ts。规范来说每个组件应该有对应的一个module.ts文件，用于链接懒加载。只需要在AppModule中注入报错文件即可...

原创 你不知道的JS--词法作用域-函数作用域和块作用域-整理

词法作用域：定义在词法阶段的作用域。 是由你在写代码时将变量和快作用域写在哪里来决定的。作用域查找会在找到第一个匹配的标识符时停止。tip:多层嵌套的作用域可以定义统一标识符。被叫做：遮蔽效应。全局变量会自从成为全局对象，例如window对象的属性。...

原创 Ueditor自定义三方弹窗展示+angular框架中使用

业务场景：在基于Ueditor的功能基础上，需要二次开发。本文就是记录如何二次开发Ueditor这个富文本编辑器的。首先本文不适合vue3.0以上，因为对应的Ueditor在系统中引入方式不同，仅介绍2.0及以下项目基于现有的按钮进行二次开发的Ueditor1.定义按钮在项目目录中找到此文件，搜索文件中的btnCmds把要添加的自定义的按钮名称写入。此处我的按钮名称为：tencentmap2.给按钮添加事件在当前js文件中： // 地图按钮 UE.registerUI('tencent

原创 angular引入腾讯地图组件+相关配置

1.配置对应appkey 腾讯地图我的应用2.在项目中的index.html中用script标签引入访问地址：<script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=你配置的appkey"></script>3.在要展示地图的组件中，写一个标签，使用id选择器ts代码：//当前我的id是：map-content getMap() { let map = new TMap.M

原创 前端调试--断言函数介绍，比console.log好用

碰巧在书里看到有调试方法 assert顾名思义：就是用于调试的函数在网上查了一下，其他语言也有。下面介绍一下前端的方式前端的话，较多的就是console.log或者是打断点了再此给大家介绍一下新的调试手法----使用assert方法上面也有介绍过，其他语言也有，js肯定也是有的。只不过js把这个方法封装在conosle这个对象中了，只需要在console里调用此方法就可以使用了使用方式：如图，如果你的调试内容不符合，就会对应爆出error的样子，提示内容为你定义的提示语了浏览器支持con

原创 formgroup--表单切换后，必填字段显示验证

当前场景：当用户选择【协议分类】为【业务数据】时，展示下面两个formcontrol，并且两个formcontrol为必填，切换事件： this.form.get('dataOwnerIds').setValue(''); this.form.get('pushTargetIds').setValue(''); this.form.get('dataOwnerIds').setValidators(!this.showOtherData ? Validators.required

原创 你不知道的JS--作用域-整理

var a =2引擎：执行js程序编译以及执行过程。编译器：负责语法分析，代码生成作用域：收集并且维护所有声明的变量组成的一系列查询，执行一套非常严格的规则，确定当前执行的代码对这些标志符的访问权限。当我写下这段代码，编译器会执行哪些操作呢？1.遇到var a编译器会询问作用域是否存在这么一个名称为a的变量。如果有名称为a的变量，直接忽略这条声明。如果没有名称为a的变量，会在当前作用域下声明一个新的变量，命名为a。2.处理a=2：编译器会为引擎生成运行时所需要的代码。这些代码用来处理 a.

原创 angular父子组件传入字段顺序

业务场景：父组件传给子组件两个值：分别为：type 和data在子组件中，在data接受的input方法中，使用了最新的type值。问题：当我传入data时，type不是最新值。排查：打断点，两个值都是同时有的，执行顺序问题1.input的顺序，type需要在input之前，执行在data时，就是最新的type值了。2.父组件引用子组件传值的顺序在标签中，第一个传入type 第二个传入data ，否则就算1是按照顺序来的，但是实际执行还是会按照外层标签传入值的顺序执行。...

原创 超出部分省略号显示--CSS

单行：width:100%;overflow: hidden;text-overflow:ellipsis;white-space: nowrap;display: inline-block

原创 angular中formArray中formGroup动态添加controlName注意点

当前场景：一个动态表格形式。上图更能清晰说明情况。本文介绍的问题背景：动态表头，当我添加一个列的时候，需要在formarray中的formgroup中添加一个controlName问题出现：进入编辑状态，添加一个表头，第一条数据进行修改后，第二条数据默认同第一条数据一致。但是页面上没同步数据。解决思路：编辑状态下，所以看新建状态有无同样问题。==结果没有。确定是哪里数据进行了变化。=结果是formgroup数据变化就赋值，所以问题锁定formgroup相关上。最后位置：在添加一列的事件上：

原创 angular响应式表单动态修改表单验证

问题背景：需求如图，下方列表是一个formArray组成的一个表单数组。通过上方的修改我可以修改这个formArray中的表头，以及每一个formArray中的formGroup中的controlName。当前问题：点击必填后，页面展示* 取消必填，对应表头不展示*，但无法保存。问题原因：点击必填checkbox时，修改了当前controlName的Validators.required为null，但是无效。解决方法：当用户的取消选择必填时： this.form.controls.forEa

原创 angular父子组件传值时没有执行input中的方法

场景：在子组件1中向外emit一个datafu