- 博客(33)
- 资源 (1)
- 收藏
- 关注
原创 js 0-100进度彩色指标
前言这个功能是在开发终于到的一个小组件,因为这个项目就是原生h5的项目,也没再多做些什么,我感觉挺好用的,大家应该也遇到过,我把它兼容了一下,开始数和结尾数都是可以自己变化的,非常的方便,直接上图了上图这个就是一个静态的展示图,不是滑块,主要这个东西的就是它的兼容,开始和结尾都是可变的,直接上代码,代码的话应该还有可以优化的地方,后期会封装一下的,上代码上代码<!DOCTYPE html><html lang="en"><head> <me
2021-06-09 13:38:56
214
原创 安卓手机H5页面判断wifi还是数据
前言这个小事件是公司有这个需求,然我我去解决,虽然也是网上找的,也找了挺长时间,写这文章主要是让大家,碰到这个需求的时候有幸能碰到这篇文章的话会更方便一点直接上代码,复制过去就能用function isWifi() { try { let wifi = true let ua = window.navigator.userAgent let con = window.navigato
2021-05-21 14:40:48
1033
2
原创 ECharts来自定义仪表盘
前言首先呐,我先介绍一下这个demo,是公司要求我来做一个额度指针转盘,这个东西也是非常的炫酷啊,难度也是有的,当时我做的时候也花了时间,但是做出来效果是非常的满意的,下面,我来给大家一步一步讲解。一、上效果图就是这个样子的,下面开始讲解这个东西是怎么实现的二、demo解析 这个是分为两部分,一个就是Echarts的图表,一个就是中间的数字,它是滚动的,就是一个简单的数字滚动,本来这篇文章是不该又这个数字滚动的,就是专门来讲这个图表的,但是我懒的删了,就直接都说了吧,万一有小伙伴需要的话就不用
2020-12-04 15:56:10
2684
1
原创 vue刷新组件
前言这是一个非常非常有用的东西,大家在用vue开发项目的时候应该会遇到要刷新一下组件的需求,如果大家用的js的方法,就很没有用户体验感,这个方法是通过$nextTick来进行一个刷新,我把它封装到了app.vue中,用的时候就很方便,大家看到了就都了解一下吧一、在App.vue中写<template> <router-view v-if="isRouterAlive"></router-view></template><script&g
2020-11-24 10:11:42
696
原创 vue项目中切换组件时动态进度条
前言这是一般的vue项目中都会有的切换组件的顶部进度条,挺好看的,也很炫酷先看一下是什么样子的就是这个蓝色条条,现在我们来实现它一、在项目中安装npm install --save nprogress二、在main.js中配置import NProgress from 'nprogress'import 'nprogress/nprogress.css'NProgress.configure({ easing: 'ease', // 动画方式 speed: 500, //
2020-11-24 10:04:04
555
原创 vue中监听本地储存的值变化
前言这个操作是在vue中一个组件的值发生变化,从而别的组件都可以监听到,从而发生一系列的操作,是这样的一个功能,也是挺实用的。要达成这个功能的前提是得存到本地才能产生监听的效果一、在main中配置代码Vue.prototype.resetSetItem = function (key, newVal) { if (key === 'data') { // 创建一个StorageEvent事件 var newStorageEvent = document.createEvent('S
2020-11-24 10:00:07
3539
2
原创 vue中获取验证码之后一分钟倒计时实现
前言这个东西所有的项目都会用到的,拿去用<template> <button @click="djs" :disabled:"disabled">{{yzm}}</button></template><script>exprot default{ data(){ return{ yzm:'获取验证码', disabled:false,
2020-11-20 14:46:52
695
原创 js时间戳转为可读时间
前言非常实用的时间戳转为可读时间function getYMDHMS(timestamp) {//如果拿过来的时间戳是毫秒就不用了乘1000了 let time = new Date(timestamp * 1000); let year = time.getFullYear(); const month = (time.getMonth() + 1).toString().padStart(2, "0"); const date = time.getDate().to
2020-11-20 14:44:17
300
原创 js复制事件
前言一个非常实用的js复制事件function copy(data) { let url = data; let oInput = document.createElement("input"); oInput.value = url; document.body.appendChild(oInput); oInput.select(); // 选择对象; document.execCommand("Copy"); // 执行浏览器复制命令 con
2020-11-20 14:41:54
1398
原创 js中单击跳转,双击复制
前言这篇文章是一个非常实用的操作,大家有可能在做项目的时候会碰到这中需求,就是一个链接,然后单击它的话就是跳转,双击它的话就是复制,但是直接给事件的话会有一个冲突,就是你双击的时候肯定会出发单击的事件,然而这并不是我们想要的效果,我当时碰到这个问题的时候也研究了很长时间,我是在vue中运用的,但是代码的话都是很基本的js,也可以运用到别的框架中去。上代码<script>var timers = null;//判断双击还是单击export default{ data(){
2020-11-15 17:16:56
494
原创 element表单验证的封装
前言这一篇文章是在用element中的表单的时候,会用到正则来判断表单的对错,当然正则的话得自己写,比如这样但是我们开发的时候就会发现如果两个组件都用到了这个正则那么就会产生重复性,这还只是两个,一般的话不止两个,会有很多,会产生很多的重复的正则,那么,就很烦,因为我们是要追求优雅,简介的,诶,碰到我了,那么就很简单的解决了。1、创建一个js文件创建一个js文件,我是习惯性创建到assets中,这个没有什么规定的,然后就在里面写正则,就是按这样的来,因为我们是用的人家element的东西,所以得规规
2020-10-09 10:54:33
983
1
原创 对keep-alive初步简单的认知
前言这篇文章是来说一下用keep-alive的用后感,来给大家分享一下,主要还是通过博客这种形式来和大佬们一起学习,欢迎在下方踊跃留言1、怎么了解到keep-alive的这个东西如果说问刚毕业的应届生的话应该很少有人知道,因为这东西只有在实际的项目中才能起上它的作用。我刚开始的时候我也不知道这是个什么东西,后来我的一个好朋友问了我一下,然后我也有点懵,因为没有用到过,然后面试的时候也没有问到过这个东西,所以就非常的陌生,然后就是我们习惯的操作,‘查百度’,了解了一下,然后后来就没有太在意了。2、使
2020-10-09 10:35:17
144
原创 箭头函数在vue中的妙用
前言这篇文章是带大家认识一个非常好用的小技巧,是对箭头函数的理解,我是在进行vue项目开发的时候碰到的,所以在这里整理一下分享给大家,如果有不对或者不恰当的地方,大家可以在下方评论,我们一起交流。举几个例子1、在对象中,看图没有用箭头函数的情况下是还是指向这个对象中ccc,如果我们用上箭头函数的话那么指向的就是data里面的值了2、使用回调函数的时候用普通函数的话就是找不到,报错,当然这里可以声明that对this的一个保存,但是箭头函数也可以解决这个问题,会让代码变得更加的简洁、
2020-10-09 10:14:26
1262
原创 element中tree树形控件查找父级的id
前言大家在开发过程中的时候,如果用的Vue那么基本上都会是是使用element ui的,因为它里面的功能非常的强大,经常用的小伙伴都知道的,当然在使用这个ui库的时候,肯定会遇到这些很头疼的难题,就比如这篇文章,是来为大家讲解tree树形控件,这个组件应该很多的小伙伴都使用过,今天来为大家讲解的是通过一个节点来获取它的父级id一、原理解释有细心的小伙伴可能通过百度什么的可以在文档中找到这两个方法,但是它这个节点的话就是只能在有选择框的tree树上生效,如图那么就会很头痛,因为我们当前的tree树是
2020-08-12 17:45:09
2251
原创 ECharts中图表加载动画时间
前言这一篇文章没什么技术要点,就是来给小伙伴们扩展一下ECharts的知识,我们平常用ECharts的时候每次刷新都会重新加载一下ECharts图表,那么加载的时候就会有个图表数据增长或者是变化的过程,这个过程可以说是一个动画,那么提到了动画,就会有这些个需求了,我们想让它加载的慢一点或者快一点,这时候这篇文章就发挥到它的作用了。一、效果图我这边的这个图表大家可以清晰的发现,是要比默认的慢了好多,那么它的运作场景就是很大的图表,就比如宽是一个屏,那么你不设置动画时间采用默认的话,感觉体验会非常的不好
2020-07-30 11:32:37
5778
原创 element中设置5栏布局
前言这篇文章给小伙伴们说的是在使用element这个UI库的时候,它里面有Layout 布局,但是如果没有自己设置的话,它只能分为24的因数,就比如3、4、6这种布局,但是我们在开发的时候,还会碰到5或者7这样的布局,那么就很头痛了。我想很多小伙伴应该和我一样,输入4.8,但是这是没有用的,那么今天我来给大家站展示一下怎么解决5栏布局的问题1、原理讲解先随手写一个普通的4栏布局,进入控制台,大家会发现然后就比较清晰了思路,我们会发现:span="6",到控制台中的class就是el-col-6,那
2020-07-30 09:56:30
4231
3
原创 Vue中EChatrs中两个图表联动(一个图表控制另一个图表的数据)
前言这篇文章给小伙伴们带来的是EChatrs的操作,是通过点击一个图表来控制另一个图表的数据的操作,看着还是蛮有用的,因为大家在做管理系统的项目的时候,应该都是可以用的上的,也非常的简单,就是有的小伙伴可能刚接触EChatrs的时候可能不太熟悉其中的属性,因为它的属性功能太多、太强大了。展示一、原理它的原理其实十分的简单,非常的简单,就是给一个图表绑定一个点击事件,当然这个操作在原生的js代码中还是很好实现的,就获取下DOM,然后操作操作就可以了。但是这篇文章来主要给大家说的是在Vue中应该怎样
2020-07-29 14:26:24
2880
3
原创 js中Symbol在对象中添加函数如何调用
# 前言这篇文章是一个求助的文章,是因为最近在了解Symbol的时候碰到一个问题,为难了我很长时间,查询很多的资料也没有解决掉,希望看到这篇文章的小伙伴可以帮我参谋一下,在此谢谢了# 问题![在这里插入图片描述](https://img-blog.csdnimg.cn/20200717233039213.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubm
2020-07-17 23:40:22
2670
24
原创 vue中动态引入Iconfont(阿里巴巴矢量图)
前言这篇文章主要为大家呈现的是动态改变Iconfont,这个icon一般用于导航菜单的标题前面,当我们有要可以动态修改更换标题图标时,不用再手动去修改代码了,是可以直接放在数据中修改的,非常的方便,而且很容易操作,尽管不是自己团队中的人,替换的话也很简单,下面我来为大家展示一、先登录Iconfont-阿里巴巴登录的时候有几个选项,咱要不是阿里员工的话就直接微博扫码登录就可以了二、创建项目1、用鼠标触摸到导航菜单的图标管理,会展开一个二级菜单,其中有一个菜单叫我的项目2、点击进去,有一个新建项
2020-07-17 12:02:54
2228
1
原创 vue中制作多选加单选的标签选择
前言这个功能大家肯定都会用过或者见过,因为在逛淘宝的时候会有标签选择的功能,当然,咱们这篇文章就是来让大家学习这个功能,这个功能的话在很多地方都能用的到,希望大家仔细阅读。一、效果展示二、代码展示<template> <div class="box"> <p class="yx"> 已选条件 <span v-for="(item,index) in yxx" :key="index">{{item}}</sp
2020-07-08 10:18:31
1057
原创 element中通过外部按钮来修改日期选择器的范围
前言这篇文章来为大家讲解的是在Vue中使用element-ui的时候,在使用ui库中的一个日期选择器这个模块的时候,我们可以通过日期选择器外部的事件来操作日期选择器的范围,因为element中的日期选择器自带的范围控制是在日期选择器里面,当我们的需求是在外面的时候,这时候就会有些困惑了,但是这篇文章将带你解决这个难题一、效果图展示二、代码展示<template> <div class="time"> <div class="t">
2020-07-08 09:52:18
726
原创 本地储存加密(vue)
前言这篇文章是在项目中登录后的,在本地存储用户的信息用的加密,用的是CryptoJS做的加密,在过程中也是遇到了一些小坑,这篇文章将会为大家清晰的展示加密操作一、在项目中安装CryptoJSnpm install crypto-js二、在需要加密或解密的文件中引入crypto-jsimport CryptoJS from "crypto-js";三、加密代码let cipherText = CryptoJS.AES.encrypt("1", "secretkey123").toString
2020-06-15 14:09:43
2253
原创 vue中要修改element组件中的样式
前言刚用到element的小伙伴可能会碰到这个问题,就是想要修改某一个组件的样式,在页面上课修改,然后改完复制过来在看的话就不生效,那么就把小伙伴给难到了,不过没关系,你看到了这篇文章,我将带你用element的时候想修改哪里就修改哪里。我为大家准备了两个方法,大家都可以去试试一、在class名之前加 ::v-deep,如图所示二、在写一个style,style标签不要scoped属性,用来专门存放element的样式,如图所示结语以上两种方法都是可行的,如果这篇文章对你有所帮助的话
2020-05-29 15:06:12
350
原创 vue element中tree自定义内容
前言这篇文章用到的是element中的tree,需求是它的节点上不止只有一个标题,还要有别的。这个在文档里面是有的,但是文档上写的有点复杂,可能会触及了有些小伙伴的知识盲区,所以在这里,我为大家梳理了最简单的代码,直接copy就可以了最终效果上代码<template> <div> <el-tree :data="data" :props="defaultProps" accordion @node-click
2020-05-29 14:52:31
2338
原创 vue通过本地token控制用户登录前后的权限
前言此文章是我自己在开发中遇到的一些权限问题,然后主要是用了一种别的方法,这种方法十分简单,通俗易懂,代码简介,一看就会,上代码上代码在main.js中加入import router from './router'router.beforeEach((to, from, next) => { let token = localStorage.getItem("token");//登陆成功之后存储的token值 //以下是站在用户角度的4种情况,我为大家一一列举 if (toke
2020-05-28 16:50:51
403
2
原创 vue element开发侧边栏时的菜单根据路径动态绑定
前言这篇文章的话是要跟据自己项目的router路径来锁定菜单的默认选择值,因为代码的话就是整个项目的一个交互,所以这篇文章,主要内容是用文字和图片来和大家讲解原理的,代码就很少,主要就是它的原理构成,话不多说,现在开始为大家讲解。一,为什么会有这个需求在开发时,我们的用户点击菜单的第二个选项,看到里面的内容时,然后F5刷新,没有设置的情况下,它的菜单高亮还是会默认的选择原有设置的一个,我们的目的就是把默认选择高亮的菜单变成动态的,它的选择是根据路径来变化的二,开始在element中,制作侧边栏要用
2020-05-28 11:10:21
1438
原创 js通过数组内容来获取数组下标
前言这是一个通过已知数组里面的某个内容,然后要通过这个内容来删除这个数组,是通过循环来把数组的下标找到,然后再拿去删除代码 var arr = [1, 2, 12, 3, 23, 5, 6, 45]; //数组 var k = 12;//要删除数组的内容 var c = [];//通过内容来获取的数组的下标 //获取下标 for (var i = 0; i < arr.length; i++) {
2020-05-26 17:47:11
14604
原创 关于前端压缩图片的工具
前言打包上传时文件多,图片内存大怎么办,老板说让你优化下怎么办,没关系,这篇博客将会让你体验到新的东西,新的操作这是压缩之前的图片这是压缩之后的整整减少了75%方法很简单压缩网址是https://tinypng.com/只要把图片拖进去就可以,然后等进度条加载完毕点击下载就可以了希望此文章对你 有所帮助...
2020-05-26 16:24:42
513
原创 vue中一周的时间选择多个阶段(手动表格选择)
前言先给大家看一下效果图这篇文章是半转载的博客,之前项目需要这么一个功能,然后在论坛上找到一个相似的,但是复制过来的话有些地方有问题,然后改了半天,又添加了一些小细节的优化,代码复制过去有问题的话可以在下方评论(基本上不可能有问题),再改的过程中也遇到过一些小坑,谷歌浏览器自带的翻译功能千万不要开,如果好奇心大的话可以试一试(这个东西耽误了我很长时间,喃现在也不知道是电脑的原因还是什么原因,希望有大牛可以指点),废话不多说,上代码代码<template> <div clas
2020-05-26 16:07:24
3120
30
原创 vue3中封装axios
vue3中封装axios安装axios npm install axios --save在src文件下创建api文件夹在api文件中建立模板 ceshi.js在模板文件中输入内容import axios from 'axios'//创建axios的一个实例 var instance = axios.create({ baseURL:'http://localhost:8080/',//接口统一域名 timeout: 6000
2020-05-22 13:54:13
2811
原创 vue中仿window系统左键画框效果
vue中仿window系统左键画框效果一、代码原理通过鼠标按下,移动,抬起事件来操作首先鼠标按下来获取当前按下的位置然后通过判断来进行鼠标移动的操作,判断鼠标是否按下,按下时才能执行鼠标移动的事件在移入过程中的根据框的多个形式来判断画框操作最后松开时恢复到原有的样子二、上代码<template> <div> <div class="cc" style="border:1px solid red;width:100%;height:100vh"
2020-05-22 11:45:59
847
1
原创 vue中根据倒计时来排序的模块
**vue中根据倒计时来排序的模块一、原理分析此demo是实现多条数据的有效时间,通过数据的有效时间来进行排序,从而进行倒计时,倒计时归零后将自动删除此模块实现思路为将时间戳转换为可视时间,通过set方式添加到数组对象中,然后通过sort方式来进行排序二、代码展示<template> <div class="hello"> <ul> <li v-for="(item,index) in list1" :key="index">
2020-05-22 10:55:54
400
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人