- 博客(46)
- 收藏
- 关注
RSS订阅转载 vue 弹层弹起 底部内容禁止滚动 并且保留当前滚动条高度
这是一个通用的需求，当页面提示框弹起禁止下边的内容滚动，并且保留滚动到的当前的高度，我是在vue公共的方法中写的，全局通用。第二步 ：在你的公共js里边写入这个方法，导入全局，现在还不知道怎么注册全局方法的，请移步。关于vue全局引用公共的js和公共的组件的折腾。第一步：先在你的公共css里边写入这个样式。第三步 ：在你的弹层组件内使用。
2022-09-07 14:00:24
699
1
转载 Element表格固定第一列和第一行，并通过属性名动态渲染数据
Element表格固定第一列和第一行，并通过属性名动态渲染数据渲染结果 滚动条可拉动，第一列为固定不动，nano为简称对应sentimentData里面的各个值。
2022-07-12 13:51:19
2880
转载 HTML5 WebSocket
WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。WebSocket 使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。在 WebSocket API 中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。在 WebSocket API 中，浏览器和服务器只需要做一个握手的动作，然后，浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。现在，很多网站为了实现推送技术
2022-01-25 10:55:11
164
转载 python语言提取四位数_解释(((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1)
首先需要提醒的是这条语句是有语言平台局限性的，在C语言、Python、Java等语言是无法进行浮点数位运算的，因为位运算只能是整型。但你会发现在JavaScript中却可以执行这条语句：首先我们需要了解一些知识点：1.单双精度分别对应于编程语言当中的float和double类型。其中float是单精度的，采用32位二进制表示，其中1位符号位，8位阶码以及23位尾数。double是双精度的，采用64位二进制表示，其中1位符号位，11位阶码以及52位尾数，js中的浮点数就是双精度的。2.
2022-01-18 16:56:44
1443
转载 UUID和验证码的关系
UUID的组成和生成我们先了解一下UUID的结构和怎么生成的。UUID是唯一标识的字符串,下面是百度百科关于UUID的定义：UUID是由一组32位数的16进制数字所构成，是故UUID理论上的总数为1632=2128，约等于3.4 x 10^38。也就是说若每纳秒产生1兆个UUID，要花100亿年才会将所有UUID用完。UUID的标准型式包含32个16进制数字，以连字号分为五段，形式为8-4-4-4-12的32个字符。示例：550e8400-e29b-41d4-a716-4466554400
2022-01-18 16:53:00
1402
转载 JS生成uuid的四种方法
在开发过程中，有时候需要js生成全局唯一标识符，在java中可以使用uuid，但是JS中没有现成的函数。总结了一下，JS生成唯一标识符的几种方法。第一种：function guid() { return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) { var r = Math.random() * 16 | 0, v = c == 'x' ? r : (r
2022-01-18 16:41:18
19925
1
转载 echarts中tooltip自定义使用值params参数详解
tooltip-formatter（params）首先是tooltip格式其次就是分析params参数最后formatter怎么return显示在做项目的过程中，需要增加点悬浮内容来解释当前点的数据。但是查了echarts和一些资料，说是需要用formatter函数。但是由于搜索能力也不行，困扰许久。1.不理解fomatter这个函数中的params的数据到底是从哪儿来的2.尝试从外界注入一些数据到formatter函数，不用params，失败！3.不了解params到底是什么，尝试暴力增加
2022-01-04 11:15:14
6306
1
转载 vue项目刷新当前页面的三种方法
想必大家在刨坑vue的时候也遇到过下面情形：比如在删除或者增加一条记录的时候希望当前页面可以重新刷新或者如下面这种：如果希望点击确定的时候，Dialog 对话框关闭的时候，当前http://localhost:9530/#/supplier/supplierAll页面可以重新刷新下那么表格的数据可以重新加载，Dialog 对话框设置的数据可以在确定后刷新出现在页面上这时候我们最直接的思维就是想到下面这种：但是，试过的会发现用vue-router重新路由到当前页面，页面是不进行刷新的，
2021-12-09 15:56:40
2943
转载 element-ui table中使用type=‘selection‘实现多选、禁用的问题总结
问题1. 在表格中使用type='selection'实现多选，但表头中用label无法添加全选字样解决方法：使用css伪类元素添加.el-table__header .has-gutter tr .el-table-column--selection .cell .el-checkbox:before(或after) {undefined content: "全选 ";}问题2： 在表格中使用type='selection'实现多选，需要禁用某一行解决方法：<el-t..
2021-12-01 14:53:51
6103
1
转载 使用require.context实现前端工程自动化
require.context是什么一个webpack的api,通过执行require.context函数获取一个特定的上下文,主要用来实现自动化导入模块,在前端工程中,如果遇到从一个文件夹引入很多模块的情况,可以使用这个api,它会遍历文件夹中的指定文件,然后自动导入,使得不需要每次显式的调用import导入模块什么时候需要用到require.context如果有以下情况,可以考虑使用require.context替换index.jsmodules在Vu..
2021-12-01 14:37:50
100
转载 vue-router做路由拦截时陷入死循环
今天分享一下使用vue-router做路由拦截时遇到的坑。需要提前了解的api1：router.beforeEach( to , from ,next) ; to: Route: 即将要进入的目标路由对象 from: Route: 当前导航正要离开的路由 next: Function: 一定要调用该方法来resolve这个钩子。执行效果依赖next方法的调用参数。 next(): 进行管道中的下一个钩子。如果全部钩子执行完了，则导航的状态就是confi...
2021-10-28 16:23:58
1077
转载 在vue中，如何防止element-ui message重复弹框？
场景在使用element-ui框架的时候，我们会经常使用到Message组件。但是原生的有个bug，就是会形成消息队列，消息提示会越来越多！那么该如何解决呢？解决利用element-ui中message的close方法，在下一个弹框弹出前先把上一个弹框实例关闭掉resetMessage.jsimport { Message } from 'element-ui'; // 引入messagelet messageInstance = null;const re.
2021-09-22 17:04:35
1079
1
转载 vuecli3中移动端使用方法，postcss-pxtorem+amfe-flexible的适配方法
移动端适配配置npm install postcss-pxtorem -Dnpm i -S amfe-flexiblepostcss-pxtorem：可以把px自动切换为rem，如果需要使用px的时候改成 Px 就可以生效amfe-flexible：移动适配方案，自动计算html的 font-size 字体的大小。mian引入import 'amfe-flexible'index.html<meta name="viewport" content="width=d.
2021-06-15 11:47:18
477
转载 使用js-cookie实现两个vue项目的单点登录
需求是这样的：之前用vue做的两个系统，现在由于业务需要，要实现两个系统之间的相互跳转以及登录联动。分析需求：也就是说在登录了任意一个系统的情况下，另一个系统也默认登录，同理，任意一个系统退出登录另一个系统也要退出登录，也就是说我们要实现退出联动。两个系统之前都是利用localStorage进行存储登录相关信息的，但是localStorage无法实现跨域访问，那么我就想到cookie是可以通过设置domain来实现一级域名相同的两个系统之间实现跨域访问的，所以就想到使用js-cookie这个插件来实
2021-06-15 11:39:01
1735
转载 学习Javascript闭包（Closure）
闭包（closure）是Javascript语言的一个难点，也是它的特色，很多高级应用都要依靠闭包实现。下面就是我的学习笔记，对于Javascript初学者应该是很有用的。一、变量的作用域要理解闭包，首先必须理解Javascript特殊的变量作用域。变量的作用域无非就是两种：全局变量和局部变量。Javascript语言的特殊之处，就在于函数内部可以直接读取全局变量。 var n=999; function f1(){ alert(n); } f1(); /
2021-03-26 16:27:12
67
转载 git 修改用户名命令和gitlab修改位置
git 修改用户名第一处设置的地方：使用命令在git中修改全局设置用户名和密码1、查看git配置信息git config --list2、查看git用户名git config user.name3、查看邮箱配置git config user.email4、全局配置用户名git config --global user.name "johnson"5、全局配置邮箱git config --global user.email "[email protected]"
2021-03-23 10:54:55
782
转载 Vue3---路由权限动态管理：router.addRoute()
Vue2中，可以通过路由的addRoutes() 和 addRoute()两种方法实现路由权限动态渲染，但在Vue3中，摒弃了addRoutes() 方法，只保留了addRoute() 单个添加路由配置的方法。Vue2中路由对象Vue3中路由对象Vue3动态添加路由：在main.js中或者在登录回调中进行动态渲染路由。代码参考如下：const about = { //接口返回路由信息 path: '/about', name: 'About', comp...
2021-03-22 11:06:28
5166
转载 关于在vue项目中使用wangEditor
1，vue中安装wangEditor使用的npm安装 npm install wangeditor --save2，创建公用组件在components中创建wangEnduit文件夹组件内容为<template lang="html"> <div class="editor"> <div ref="toolbar" class="toolbar"> </div> <div ref="editor"..
2021-03-22 10:57:51
403
转载 Vuejs之axios获取Http响应头
今天在开始接入后端Api 就遇到了一个问题了在用 axios 获取 respose headers 时候获取到的只有的Object { cache-control:"private, must-revalidate", content-type:"application/json"}下面是服务器返回的响应头， 我需要拿到的是 Authorization使用 respose.headers 拿到的只用两个默认的headers, 尝试了使用捕获响应头的方法 axio
2021-03-22 10:53:41
5355
转载 简述 Blob 构造函数以及 window.navigator.msSaveBlob 和window.navigator.msSaveOrOpenBlob 方法
使用Blob构造函数可以直接在客户端上创建和操作 Blob（通常等效于一个文件）。Internet Explorer10 的msSaveBlob和msSaveOrOpenBlob方法允许用户在客户端上保存文件，方法如同从 Internet 下载文件，这是此类文件保存到“下载”文件夹的原因。//创建var blobObject = new Blob(["I scream. You scream. We all scream for ice cream."]);用法：1....
2021-03-19 15:16:56
3134
转载 基于elementUI的Vue 中 el-form 嵌套 el-table的写法
前端页面：前端vue代码：<el-form :model="ruleForm" :rules="rules" ref="ruleForm"> <el-table :data="ruleForm.evidenceTemplateList" stripe border style="width: 100%" size="mini"> <el-table-column type="index" label="序号" min-width="20"
2021-03-19 13:28:23
1743
转载 使用V-chart时踩过的一些坑
如何配置图表信息echart的配置项可谓是相当的海量，能不看就不看。而v-chart对其进行了不少的简化，所以我们想要自定义一个图表时，最好按照以下步骤来检查：图表私有属性v-chart每一个图表都有自己独有的设置项，想要配置这些项需要在组件上加入 :setting="chartSettings"，然后在vue组建的data里设置chartSettings的值，如下:<template> <ve-line :data="chartData" :settings=.
2021-03-18 16:50:13
790
转载 vue.nextTick()方法的使用详解
什么是Vue.nextTick()？？定义：在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。所以就衍生出了这个获取更新后的DOM的Vue方法。所以放在Vue.nextTick()回调函数中的执行的应该是会对DOM进行操作的 js代码；理解：nextTick()，是将回调函数延迟在下一次dom更新数据后调用，简单的理解是：当数据更新了，在dom中渲染后，自动执行该函数， <template> <d..
2021-01-18 11:53:13
182
原创 js获取农历
js获取农历getLunar() { var that = this var CalendarData = new Array(100); var madd = new Array(12); var tgString = "甲乙丙丁戊己庚辛壬癸"; var dzString = "子丑寅卯辰巳午未申酉戌亥"; var numString = "一二三四五六七八九十"; var monString = "正二三四五六七八九十冬腊"; var w
2021-01-15 11:37:33
6961
1
转载 css实现文字颜色渐变的三种方法
在web前端开发过程中，UI设计师经常会设计一些带渐变文字的设计图，在以前我们只能用png的图片来代替文字，今天可以实现使用纯CSS实现渐变文字了。下面就介绍3中实现方式供大家参考！基础样式： 1 .gradient-text{text-align: left;text-indent:30px;line-height: 50px;font-size:40px;font-weight:bolder; position: relative; } 第一种方法，使用
2021-01-15 10:56:03
1633
转载 饼状图报错：Uncaught TypeError: Cannot read property ‘getAttribute‘ of null
1、错误描述 谷歌浏览器 火狐浏览器 TypeError: Cannot read property 'getAttribute' of null at Object.s.init (echarts-all.js:1) at buildChart (map.js:720) at b.$scope.queryChart (map.js:138) at map.js:175 at angular....
2021-01-15 10:26:14
230
转载 vue中使用echarts 实现两个柱状图的 渐变色
效果图代码：1.先要在option外面定义两个颜色2.根据需要判断，然后直接返回注意：如果将渐变写在color回调里面 报错 Error in mounted hook: “TypeError: Cannot read property ‘$echarts’ of undefined”，如下如果直接返回this 表示undefined 所以说 要定义在外面。...
2021-01-15 09:53:48
1063
1
转载 vue中echarts饼图实现循环高亮效果
1、首先echarts绘图需要有个盒子来盛它这就是那个盒子<div class="echarts" ref='topPie'></div>在data中注册echartsPie:'', // 扇形图实例 // 扇形图配置 optionPie:{ // animation: false, // 取消动画 // 提示框组件 // tooltip: { // trigge
2021-01-15 09:44:00
1856
1
转载 Vue动态渲染本地图片
今天总结一下Vue动态渲染本地图片的一些问题~如果你直接使用本地图片地址，像下面这样<div> <img src="../../images/icon_01.png"></div>这是可以正常显示图片的，但是如果你想遍历渲染本地图片，直接引用图片地址是不行的，需要用require解析引入 <div class="box point" v-for="(item,index) in navList" :ke..
2021-01-14 15:58:56
3425
转载 如何在 Vue 项目中使用 echarts
如何在 Vue 项目中使用 echarts数据的重要性我们大家都知道，就算再小的项目中都可能使用几个图表展示，我最近在做项目的过程中也是需要用到图表，最后选择了echarts 图表库，为什么选择 echarts，第一：简单上手容易，第二：它几乎可以满足我们所有的开发需要，第三：echarts 应该是国内做的最好的可视化库之一了。废话不多说，那我们就看看如何在 Vue 的项目中使用 echarts。第一种方法，直接引入echarts安装echarts项目依赖npm install ech
2021-01-04 11:40:08
155
转载 md 文件的编辑
正文：1、标题的几种写法：第一种： 前面带#号，后面带文字，分别表示h1-h6,上图可以看出，只到h6，而且h1下面会有一条横线，注意，#号后面有空格第二种： 这种方式好像只能表示一级和二级标题，而且=和-的数量没有限制，只要大于一个就行第三种： 这里的标题支持h1-h6，为了减少篇幅，我就偷个懒，只写前面二个，这个比较好理解，相当于标签闭合，注意，标题与#号要有空格那既然3种都可以使用，可不可以混合使用呢？我试了一下，是可以的，但是为了让页面标签的...
2021-01-04 11:19:02
116
原创 去除input输入框默认在ie或者edge下出现删除按钮
去除input输入框默认在ie或者edge下出现删除按钮1.去除ie下的删除按钮代码如下::-ms-clear{display: none;}::-ms-reveal{display: none;}2.去除edge下的删除按钮代码如下::-o-clear{display: none;}
2021-01-04 11:09:39
532
转载 优雅的elementUI table 单元格可编辑实现方法
最近在做可编辑特定列的单元格的elementUI table，看了N多的开源、文章，找到一个很优雅的实现方式，分享给大家。PS:单元格可编辑的table，用英文搜索：Inline editable table with ElementUI 会得到高质量结果。先上效果：APP.vue：<template> <div id="app"> <div style="margin-bottom: 30px"> <el-switch
2020-12-05 17:03:25
783
转载 vue axios在IE浏览器的接口缓存问题 解决方案
场景当请求后端接口参数一样时,ie浏览器会自动读取接口的缓存数据,导致数据不能实时回显到的页面上解决方法:在axios中参数加入时间戳,是每次调用接口的是参数不一致get方式: this.$axios({ methods:'get', url:"", params:{ date:Date.parse(new Date()) //加入时间戳 } }) post方式: this.$axios({ ..
2020-12-01 14:23:33
802
转载 element-ui 多选级联cascader 选择器回显问题
大家在使用element-ui的时候肯定会遇到这样一个问题就是在你使用级联选择器的时候，假设后台给你的数据是1,3,6,而你的的级联选择器选中后绑定的值可能是这样的[[1],[2,3],[4,5,6]],它直接将所有的父级都保存下来了。所以我们前端在编辑的时候进行回显就很难受，还要处理一下。今天是我带来的最笨的方法进行处理操作，话不多说直接看代码吧条件：1、后端接口需要的字段是interfaceCateId,值是字符串类型'1,2,3'2、前端请求到的接口是interfaceCate...
2020-12-01 10:51:30
3536
转载 解决element-ui中级联选择器(Cascader)出现空白选项的bug---空级联bug
在使用element-ui级联选择器的过程中，发现出现 空级联 的bug首先我们分析出现空级联原因是：由于数据是从后台传递过来的，当后端的老铁使用递归算出菜单，然后转换成json传递到前端的时候。就会出现最底层 的子项中 的 children 为空数组，这样就会造成，空级联 的bug存在。解决办法： 在前台js代码中，同样使用递归的方式，将最底层中的 children设为undefinedHTML部分： <el-cascader :change-on-...
2020-12-01 10:43:55
2049
转载 element ui 实现table序号递增
实现table序号递增element ui 实现table序号递增：(pageNo - 1) * pageSize + scope.$index + 1如何使用：<el-table-column label="序号" type="index" width="40" align="center"> <template slot-scope="scope"> <span>{{(pageNo - 1) * pageS
2020-12-01 10:29:32
925
转载 Vue使用bus总线时，第一次路由跳转时数据没成功传递的原因以及解决办法
bus总线是vue中路由跳转传递数据的常用方法，适用于传递数据不多的情况，但是在使用的过程中发现，bus总线在第一次路由跳转的时候总是不能够成功传递需要传递的数据。检查bus的配置以及调用方法，均没有出错，错就错在没有理解Vue的生命周期！！！我们知道bus的$on的监听应该位于$emit之前，如果在emit之前没有创建监听事件，那么肯定是得不到需要的数据。因此，我通过两个页面来了解路由跳转时两个页面的生命周期，下面给出其中一个页面的部分代码： //页面1 beforeCrea.
2020-12-01 10:23:43
980
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人