- 博客(42)
- 收藏
- 关注
RSS订阅
原创 对elementui中el-popover增加拖拽功能
我这里是依据原生的jq进行操作的；通过鼠标事件进行操作，通过鼠标的onmousemove事件进行拖拽移动定位；通过onmouseup进行管控拖拽结束功能话不多说上代码：首先是html的代码，先是使用咱们的el-popover使用之后咱们通过代码的细化可以看到在el-popover中写了一个它自身的Class：popoverClass，通过这个class咱们可以获取到它的dom节点通过console.log(popover)输出我们可以看到其中的层次结构然后使用debugg
2020-12-04 14:49:18
1939
5
原创 vue-elementui中使用el-tree、el-radio-group、el-checkbox-group选择器的简单封装
直接开搞上代码说事首先我们要先建三个文件，分别是静态文件html，样式文件css、js文件html文件中首先我是这样布局先说第一个文件的el-tree组件再说另一个el-radio-group和el-checkbox-group接下来说一说css文件接下来使我们的js文件，其中的列表Api是选中后通过id去获取完整的数据接下来data里的初始化数据配置生命周期计算属性computedmethods方法
2020-11-11 16:12:29
1443
原创 vue+elementui中对el-select封装
通过对el-select的简单封装可以在整个项目中进行使用，既然代码优化了，也让技术人员对代码的操作性提高了不说那么多直接上代码：通过define对vue和element-ui进行引入在html中使用是通过tg-el-select然后传入必要性的属性...
2020-09-28 11:01:42
2241
原创 vue+elementui中对el-table进行封装
组件简单的封装之后可以进行重复的使用，并且也规定好各种规则，对于代码的优化，页面的一致性有很大的好处不说那么多直接上代码：首先我们需要建三个文件分别是css、js、html，当然如果是纯vue的项目的话就直接vue文件和css文件我这里是通过define、require进行的封装的建好这三个文件后首先可以先写html：接下来就是js：这里面需要注意的就是方法中的handleClick和handleCurrentTableChange通过这两个方法$emit回传
2020-09-28 10:39:30
1999
3
原创 vue/cli中使用vue ui可视化创建3.x的脚手架
无论是通过命令行还是通过可视化都是可以创建vue-cli3.x的脚手架的，只不过对于新手来说可视化的工具更加的直观，更加方便那我们通过可视化的工具来创建一个：第一步：打开命令窗口先把我们所需的基础给下载下来：npm、nodejsnodejs官网地址http://nodejs.cn/其实npm集成就在node中直接在窗口中输入npm -v查看版本号当然你也可以使用cnpm通过命令行npm install -g cnpm--registry=https://registr..
2020-07-28 10:41:28
836
原创 vue-treeselect的自定义部分说明和使用心得
在vue中出现了各种各样的框架，vue-treeselect就是vue的树选择；就是基于vue的多选组件在平常的情况下一般我把vue-treeselect再次封装一遍为自己业务提供便利当然它的功能还是有很多的例如：单选、多选、模糊搜索、清除等等不说废话了直接看代码吧咱们来一个一个说明一下吧首先命名一个树的名字，到时候组件调用的时候好调用也就是name之后是透传的参数和数据配置props组件肯定是子的嘛，props中的东西都是可以从父级里面透传过来的template就是我所需
2020-07-23 11:44:00
11433
原创 vue中的计算属性和class、style的绑定
计算属性：模块中的表达式存在过多的逻辑会导致代码臃肿并且过重造成难以维护在计算属性中可以进行复杂的逻辑，可以进行运算、函数调用等，然后返回自己所想要的结果在计算属性中计算属性可以进行相互的依赖并且可以依赖不同的vue实例，其中的实例只要一项数据进行变化，计算属性就会进行重新的执行，视图也会就行更新在计算属性中有两个方法，一个getter,一个setter，一般会直接使用getter，对于setter而言很少在业务逻辑中使用到函数定义和计算属性不同的是计算属性是基于它们的依赖进行缓存的。计
2020-07-22 10:59:03
2727
原创 Server-Sent Events（以下简称 SSE）以及event-source-polyfill使用单向长连接(后台主动向前端推送)
SSE 与 WebSocket 作用相似，都是建立浏览器与服务器之间的通信渠道，然后服务器向浏览器推送信息SSE 是单向通道，只能服务器向浏览器发送，因为流信息本质上就是下载。如果不使用event-source-polyfill只需要把new EventSourcePolyfill替换成new EventSource()然后去掉传的参数即可。如果不使用event-source-polyfill咱们直接new EventSource()就行。现在咱们先说一下使用event-source-polyfill。
2023-12-27 10:19:01
745
原创 vue2中自定义右击菜单--vue-contextmenujs
当然其中还是有很多别的属性，比如label、icon、hidden、onClick等等，基本上这些已经满足我们日常使用了。第三步在我们需要右击菜单的代码上增加如下代码。第二步把我们的依赖引入到全局中。第一步我们先安装这个依赖。第四步在方法中写入方法。
2023-12-26 17:41:21
1047
原创 el-date-picker中可能会遇到下拉选项框偏移
一般情况我们的下拉选项框偏移造成这种情况的就是我们同一个html页面中出现不同形式的下拉时间选择。当我们出现这种情况的时候只需要在我们这个html的日期时间选择器上加上不同的key值就可以了。
2023-12-26 17:28:43
603
原创 el-table中表头自定义动态渲染
会对 Table 进行重新布局。当 Table 或其祖先元素由隐藏切换为显示时，可能需要调用此方法。有人会使用this.$refs.table.doLayout这个只能动态渲染更换数据布局。el-table中有时候我们可能遇到需要表头自定义以数组的形式进行循环显示。当我们改变tableHead时我们自定义的表头没有跟随渲染。所以我们需要在里面添加一个key值去动态布局我们的表头。如果大家有其他的方法可以留言共同学习。不会对我们所需要的表头进行重新布局。
2023-12-26 17:25:24
608
原创 qiankun中子系统变化透传到主系统调用主系统方法
3、在微应用子系统main.js的qiankun的mount中获取到全局设备参数属性并是设置为子系统全局。4、在微应用子系统中需要去调主系统方法时就在那个地方改变透传过来的参数。1、首先在主系统中qiankun启动前把变动的参数初始化。这是我用的方式，有什么问题或者有更好的方式大家共同交流。2、初始化之后就可以通过全局状态通信把参数透传为全局。5、然后在主系统中就能监听到子系统中改变此属性。
2023-12-14 11:08:33
385
原创 qiankun中主系统启动子系统本地静态图片加载404或者跨域问题
rule就会把assets中images中png、jpg、gif、svg的图片转为base64，当然这里有一个limit这个就是把不能大于多少kb的图片转为base64。1、第一种也是我常用的，就是把子系统中的静态图片全部转为base64这样通过主系统访问的时候就不是通过路径访问而是直接访问base64转为图片。3、第三种就是和第一种差不多就是在第一种的options中有一个publicPath这个路径去通过不同的环境配置不同的路径。有什么不对的请大家共同学习，可以在下面留言。
2023-12-14 10:51:55
824
原创 hash模式下路由跳转页面不刷新
举个例子：当我在注册页面->注册状态页面->注册页面，在这个期间我从注册状态页面进行缓存的数据想要在注册页面使用，然而注册页面不会重新加载，显示的还是跳转前的状态；mode为hash时，纯粹页面，路由跳转过之后跳转上一级重复路由页面不会重新渲染。//js原始方法刷新，相当于按F5刷新页面，会有短暂的白屏，相当于页面的重新载入。说实话问题是处理了，但是我对于这两种方式去重载页面会造成什么问题不太了解；刚开始的时候我时候的是watch去监听路由然后刷新页面。这种情况下我们需要把页面销毁掉就可以进行重载了；
2023-06-09 18:08:54
1798
原创 vue中使用高德
当然还有直接在index中添加但是后台如果有域名限制，就需要把域名限制增加一部分，当然前端也是可以的。的时候选择个人就可以，如果是企业级的项目，可能会涉及人员变动，建议使用公司邮箱进行注册。首先我们要申请高德地图的key，当前升级过后高德地图使用也需要加上安全秘钥。当然还有其他安全的引入方法，具体可以去高德api文档看一下。安装完之后在main.js中引入全局依赖进行使用。创建完之后就可以通过key和安全秘钥进行使用。注册之后在我的应用中创建新应用。然后再页面就可以进行使用了。之后我们就下载安装依赖。
2023-04-06 10:08:42
354
原创 js中Number数据进行乘法再加上‘%’会出现精度问题解决
平常我们使用的方式就是Number(0.38)*100 + '%'这样有可能会出现精度的问题出现38.000000000000003%这种情况解决这种情况的方法在自己的方法库中添加一个方法然后再main.js中添加成全局属性然后就可以在 页面中调用
2023-04-04 17:33:41
228
原创 vue中父传子，父传孙说明
先来说一下，vue中父传往子组件用v-bind绑定属性，在子页面用props接收，子传往父的用$emitthis.$emit('change',data)，data就是你要传的数据，change为父页面中绑定的事件说一下父传孙的，在vue2中可以使用v-bind="$attrs"这个咱们统一上代码说：当然还有别的方法在vue版本为2.2.0以上的也可以使用provide与inject还能使用eventBus来传参接参当然大部分时候会使用vue...
2022-03-28 17:56:08
2086
原创 ES6过滤两数组取差集以及some和every的使用
两个例子：JSON数组var list1 = [{name: 'a', id: '123'},{name: 'b', id: '1234'},{name: 'c', id: '12345'}]var list2 = [{name: 'a', id: '123'}]首先我先使用ES6来处理var arr = [...list1].filter(res=>{return [...list2].every(t=>{return...
2022-03-24 09:48:04
1752
原创 vue-elementui中el-table跨页选择和v-if导致列错乱
在vue-elementui中使用el-table，当type="selection"的时候，分页数据进行不同页跳转选择需要这种功能的时候我们需要在el-table的标签上为每个el-table-column都创建一个id；所以就用到了row-key="id"这个属性；然后我们就需要在el-table-column为type="selection"添加一个属性reserve-selection;当这两个属性同时使用时就能实现我们的需求不能重置我们的选择总结一下：跳转页不重置我们的选择1、
2022-03-16 16:40:23
1781
原创 vuex存储刷新页面刷新不缓存
这种情况有知道有两种方式去解决，但是sessionStorage和localStorage的使用不知道为什么没有起作用；sessionStorage和localStorage：我在vue-vant-admin的H5项目中在app.vue中使用了replaceState请大家指教一下为什么没有起作用然后第二种方法可以；我使用了vuex-along的依赖或者使用yarn add vuex-along；就看你有npm还是yarn，两个都行之后你的依赖中就有有vuex-along
2022-02-22 17:22:14
293
原创 js中小数乘法问题
在js中0.025*3 = 0.075 但是实际上所以就用一个方法来先乘后除的方法num代表你需要多少的位数e为乘法的值（0.025*3）
2022-02-22 15:13:44
643
原创 前端async和await中使用try---catch进行捕获
在使用async和awaitawait只能放在async函数里 为了使我们的异步代码，更像同步的代码 如果asycn里的代码都是同步的，那么这个函数被调用就会同步执行在使用时可能会出现你需要捕获错误信息等等...
2022-02-21 18:03:01
681
原创 在vue的项目中文件流格式进行下载和导出：使用blob格式
在做项目时我们可能会遇到下载功能以及导出功能：其实这两个功能是一样的只是看客户需求是什么；说一下原生的文件流下载方法我这里的下载方法分两种，一种是带请求头token的一直是不带的其实本质上没有太大的区别：我写了一个公共的方法区分有请求头和无请求头；当然还有预览我一般使用window.open()...
2022-02-21 17:51:36
555
原创 vue-elementui-admin中v-has的自定义指令和v-if的冲突问题
在vue-elementui-admin的后台管理系统中往往就会使用到按钮的权限控制以及角色的权限控制问题，一般情况使用的就是自定义指令v-has的使用，在这个后台管理系统中就有这个自定义指令；不说太多直接上代码的使用方式：如上面的如果v-if和v-hasPermi同时使用时，除非我们页面进行重定向，v-haspermi是不会起到作用的，就是因为这里的v-if把咱们的dom元素给删除了，导致这个v-haspermi找不到这个dom元素了，所以我们把这里的v-if改为v-show就可以使用了.
2022-02-21 17:43:33
3529
原创 通过纯粹的vue、elementui通过el-dialog、el-tree、el-card扩展弹框，通过import导入
在项目的过程中会遇到各种各样的弹框形式；这里介绍一个我使用的弹框中的树形选择不说太多直接上代码template模板中的代码el-dialog中包含el-row，通过el-row去布局右边的展示框和删除选中数据通过import引入数据接口当然你写完的组件也可以成为局部组件和全局组件，全局组件需要在main.js中引入，这样不需要再使用import引入去使用，当然局部组件需要通过import去引入使用各个模块的说明data模块mounted模块
2021-04-19 15:52:57
856
原创 vue中this.$root.Bus.$on多次调用方法被覆盖或者出现多次调用的情况
在spring boot的前端vue项目中，各个组件间进行的方法通信：this.$root.Bus.$on问题比如我在组件中进行全局化的通知上面的这种情况就会出现后面的覆盖前面的，造成联动的失败，并且如果不进行判断的话就会出现重复调用的情况所以我需要在我的组件方法中添加vue的生命周期beforeDestory，当一个使用完之后，就先清除了，然后再通知下一个...
2021-01-04 17:04:19
1472
原创 idea中添加less并解析为css使用
1、首先先全局进行下载less在idea先查看自己是否已经安装好node检查好之后通过npm安装less npm i -g less安装好less后来到设置中打开后查找file watchers，如果没有查到可以进行以下操作进行查找，查到后进行下载安装然后就能在工具中看到file watchers进去后点击+号进行添加然后做完这些可能你在添加less文件的过程中你会把less文件添加为text文件，她就不识别这个less文件了，在设置中...
2020-10-27 10:54:17
3000
原创 css中的@font-face使用和vue中全局和局部引入css
vue中全局引入css在main.js中通过import引入然后就能在代码中使用csscss在局部使用有两种写法第一种写法就是：直接在vue文件中写不过要注意需要在style中添加scoped的属性样式就起作用了还有一种就是直接在外部创建css文件通过import局部导入文件css中使用font-face，使用时，你要先找到自己使用的字体，通过自己转换得到woff和woff2文件推荐自定义字体网址https://fontmeme.com/zit
2020-09-24 11:43:44
2110
原创 vuex的使用和浏览器的兼容性问题
1.兼容性所谓的浏览器兼容性问题，是指因为不同的浏览器对同一段代码有不同的解析，造成页面显示效果不统一的情况。但我们需要是无论用户用任何一个浏览器来查看网站或者登陆系统时，都应该是统一的界面显示。浏览器的兼容性是一个最基本的问题，所以对解决兼容性的问题提出了答案1.问题：当在a标签中嵌套img标签时，在某些浏览器中img会有蓝色边框；解决方案：给img添加border：0；或者是border：none；2.问题：给上边元素设置了margin-bottom，给下边元素设置了margin-...
2020-09-17 10:05:23
1279
原创 marquee、map、jq中的forEach在vue中使用
一、marquee标签是用来滚动数据的marquee中的属性 1、 onMouseout：用来设置鼠标移动此区域的滚动状态 ；onMouseout="this.start()" 设置鼠标移出该区域时继续滚动； onMouseover="this.stop()"：设置鼠标移入该区域时停止滚动 2、align：此属性不经常使用 用来设置marquee标签中内容的对齐方式，具体可以去w3c中看看 3、behavior：此属性用来设定内容的滚动方式 alte...
2020-08-24 10:27:09
307
原创 使用vue项目中在浏览器中增加调试工具vue-devtools
vue-devtools是一款对vue进行调试的工具，当然对vue进行调试的时候你要使用vue.js不能使用vue.min.js的包接下来说一下怎么安装这个调试工具安装这个调试工具我这里有两种方法第一种就是通过谷歌的应用商店进行下载扩展程序就行，但是有一个限制就是你的浏览器要支持能够翻墙才行第二种就普遍很多了，没有什么要求，通过在网上查找vue-devtools下载一个，当然网上有很多是错的你下载之后也不能使用，我这里有一个地址可以使用https://chrome.zzzmh.cn/info
2020-08-05 11:04:55
1483
原创 js中shift、unshift、filter方法的使用和其中字母大小写的转换
js中有许多便利的方法：shift() 方法shift会删除数组的第一个元素，并返回第一个元素的值，这样也会改变数组的长度注：当然有删除第一个的也会有删除最后一个的pop()是删除最后一个并返回它unshift()方法unshift会向数组的开头增加一个或者多的元素，并返回这个重组的数组的长度注：当然有向数组的开头增加元素的也就会有向数组最后增加一个或者多的方法push()方法filter()方法filter用于对数组进行过滤，对数组中符合过滤条件的输出，重新
2020-08-05 10:36:41
480
原创 js中filter()、find()的使用
filter:作用：被用于对数组的过滤后，创建一个新的数组，新的数组是通过过滤后符合要求的数据用法：es6语法例子：es6:find:作用：被用于获取数组过滤中第一个符合测试元素的值用法：es6:例子：es6:filter()和find()两个都是如果测试的值为空，则返回值返回undefined...
2020-07-27 10:06:18
2743
原创 基于vue的脚手架vue-cli3.0
vue cli是基于vuejs进行快速开发的完成系统，并用渐进式框架构建用户界面具体可以去官方的文档看看vue的介绍其中需要用到vue、nodejs、npm等等第一步安装nodejsnodejs 是一个开源的和跨平台的 JavaScript 运行时环境nodejs 在浏览器外运行 Google Chrome 的内核。 这使 nodejs表现得非常出色，并且应用程序运行于单个进程中，无需为每个请求创建新的线程。打开命令窗口如果已经安装或者安装完成node可以在命令窗口通过node -v
2020-07-24 11:22:04
234
原创 通过idea导入vue脚手架项目并创建快捷打包和快捷运行
第一步没有idea的需要下载ideahttps://www.jetbrains.com/zh-cn/idea/download/?utm_expid=.RdPW--XiRkKf4C3iyfxVwg.0&utm_referrer=https%3A%2F%2Fwww.jetbrains.com%2Fzh-cn%2Fidea%2Fpromo%2F%3Futm_source%3Dbaidu%26utm_medium%3Dcpc%26utm_campaign%3Dcn-bai-br-intellij-ex
2020-07-24 09:26:13
1665
原创 vue的脚手架vue-cli2.0
vue cli是基于vuejs进行快速开发的完成系统，并用渐进式框架构建用户界面具体可以去官方的文档看看vue的介绍其中需要用到vue、nodejs、npm、webpack等等第一步安装nodejsnodejs 是一个开源的和跨平台的 JavaScript 运行时环境nodejs 在浏览器外运行 Google Chrome 的内核。 这使 nodejs表现得非常出色，并且应用程序运行于单个进程中，无需为每个请求创建新的线程。打开命令窗口如果已经安装或者安装完成node可以在命令窗口通
2020-07-23 15:02:25
237
原创 vue中v-model、v-bind、$root、axios的说明和深入理解
vue中最显著的特点就是响应式和数据的绑定v-model会进行创建双向绑定进行更新和渲染，但是v-model本质上就是一个语法糖对于双向绑定也就是说是mvvm数据的双向绑定：数据变化更新视图，视图变化更新数据；当然在vue中你需要双向绑定时对数据进行初始化的操作；说一下mvvm也就是model层到view层，view层到model层；数据进行同步变化当然说的详细一点就是说v-model的绑定就是触发事件然后回填就是通过$emit去进行回调当然绑定的时候也会出现一点小问题；当出
2020-07-22 14:34:59
548
原创 关于requirejs中的define理解与使用
对于模块模式是为单例创建私有变量和特权的方法模块可以让函数内部转为私有化，这样可以保证命名不起冲突；并且模块可以进行复用，可以大大提高开发效率；在requirejs中，使用define([],function(){})来定一个模块的如果模块存在依赖：则第一个参数是依赖的名称数组；第二个参数是函数，在模块的所有依赖加载完毕后，该函数会被调用来定义该模块，因此该模块应该返回一个定义了本模块的object。依赖关系会以参数的形式注入到该函数上，参数列表与依赖名称列表一一对应。这个是通过requir
2020-07-22 09:15:21
1413
转载 IE兼容性问题
产生这个问题的主要原因是市面上的浏览器的种类很多，但由于不同的浏览器的内核不一致，从而导致各个浏览器对网页的解析就产生了差异。 解决浏览器兼容性问题，还是从三个方面入手：html部分、css部分、js部分。 1、html部分 a、最突出也是最容易想到的就是高版本的浏览器用了低版本的浏览器无法识别的元素，从而导致不能解析。这点主要体现在ht
2017-10-29 12:28:56
961
原创 前端使用组件和常出现问题链接
异次元软件世界http://www.iplaysoft.com/axios简书http://www.jianshu.com/p/df464b26ae58组件Element http://element.eleme.io/#/zh-CN/component/installation less中文网 http://lesscss.cn/#getting-started
2017-10-23 17:46:31
312
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人