A_Qyp-CSDN博客

原创 js 0-100进度彩色指标

前言这个功能是在开发终于到的一个小组件,因为这个项目就是原生h5的项目,也没再多做些什么,我感觉挺好用的,大家应该也遇到过,我把它兼容了一下,开始数和结尾数都是可以自己变化的,非常的方便,直接上图了上图这个就是一个静态的展示图,不是滑块,主要这个东西的就是它的兼容,开始和结尾都是可变的,直接上代码,代码的话应该还有可以优化的地方,后期会封装一下的,上代码上代码<!DOCTYPE html><html lang="en"><head> <me

2021-06-09 13:38:56 194

原创安卓手机H5页面判断wifi还是数据

前言这个小事件是公司有这个需求,然我我去解决,虽然也是网上找的,也找了挺长时间,写这文章主要是让大家,碰到这个需求的时候有幸能碰到这篇文章的话会更方便一点直接上代码,复制过去就能用function isWifi() { try { let wifi = true let ua = window.navigator.userAgent let con = window.navigato

2021-05-21 14:40:48 932 2

原创 ECharts来自定义仪表盘

前言首先呐，我先介绍一下这个demo，是公司要求我来做一个额度指针转盘，这个东西也是非常的炫酷啊，难度也是有的，当时我做的时候也花了时间，但是做出来效果是非常的满意的，下面，我来给大家一步一步讲解。一、上效果图就是这个样子的，下面开始讲解这个东西是怎么实现的二、demo解析这个是分为两部分，一个就是Echarts的图表，一个就是中间的数字，它是滚动的，就是一个简单的数字滚动，本来这篇文章是不该又这个数字滚动的，就是专门来讲这个图表的，但是我懒的删了，就直接都说了吧，万一有小伙伴需要的话就不用

2020-12-04 15:56:10 2517 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 671

原创 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 541

原创 vue中监听本地储存的值变化

前言这个操作是在vue中一个组件的值发生变化，从而别的组件都可以监听到，从而发生一系列的操作，是这样的一个功能，也是挺实用的。要达成这个功能的前提是得存到本地才能产生监听的效果一、在main中配置代码Vue.prototype.resetSetItem = function (key, newVal) { if (key === 'data') { // 创建一个StorageEvent事件 var newStorageEvent = document.createEvent('S

2020-11-24 10:00:07 3433 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 687

原创 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 276

原创 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 1368

原创 js中单击跳转，双击复制

前言这篇文章是一个非常实用的操作，大家有可能在做项目的时候会碰到这中需求，就是一个链接，然后单击它的话就是跳转，双击它的话就是复制，但是直接给事件的话会有一个冲突，就是你双击的时候肯定会出发单击的事件，然而这并不是我们想要的效果，我当时碰到这个问题的时候也研究了很长时间，我是在vue中运用的，但是代码的话都是很基本的js，也可以运用到别的框架中去。上代码<script>var timers = null;//判断双击还是单击export default{ data(){

2020-11-15 17:16:56 465

原创 element表单验证的封装

前言这一篇文章是在用element中的表单的时候，会用到正则来判断表单的对错，当然正则的话得自己写，比如这样但是我们开发的时候就会发现如果两个组件都用到了这个正则那么就会产生重复性，这还只是两个，一般的话不止两个，会有很多，会产生很多的重复的正则，那么，就很烦，因为我们是要追求优雅，简介的，诶，碰到我了，那么就很简单的解决了。1、创建一个js文件创建一个js文件，我是习惯性创建到assets中，这个没有什么规定的，然后就在里面写正则，就是按这样的来，因为我们是用的人家element的东西，所以得规规

2020-10-09 10:54:33 961 1

原创对keep-alive初步简单的认知

前言这篇文章是来说一下用keep-alive的用后感，来给大家分享一下，主要还是通过博客这种形式来和大佬们一起学习，欢迎在下方踊跃留言1、怎么了解到keep-alive的这个东西如果说问刚毕业的应届生的话应该很少有人知道，因为这东西只有在实际的项目中才能起上它的作用。我刚开始的时候我也不知道这是个什么东西，后来我的一个好朋友问了我一下，然后我也有点懵，因为没有用到过，然后面试的时候也没有问到过这个东西，所以就非常的陌生，然后就是我们习惯的操作，‘查百度’，了解了一下，然后后来就没有太在意了。2、使

2020-10-09 10:35:17 133

原创箭头函数在vue中的妙用

前言这篇文章是带大家认识一个非常好用的小技巧，是对箭头函数的理解，我是在进行vue项目开发的时候碰到的，所以在这里整理一下分享给大家，如果有不对或者不恰当的地方，大家可以在下方评论，我们一起交流。举几个例子1、在对象中，看图没有用箭头函数的情况下是还是指向这个对象中ccc，如果我们用上箭头函数的话那么指向的就是data里面的值了2、使用回调函数的时候用普通函数的话就是找不到，报错，当然这里可以声明that对this的一个保存，但是箭头函数也可以解决这个问题，会让代码变得更加的简洁、

2020-10-09 10:14:26 1209

原创 element中tree树形控件查找父级的id

前言大家在开发过程中的时候，如果用的Vue那么基本上都会是是使用element ui的，因为它里面的功能非常的强大，经常用的小伙伴都知道的，当然在使用这个ui库的时候，肯定会遇到这些很头疼的难题，就比如这篇文章，是来为大家讲解tree树形控件，这个组件应该很多的小伙伴都使用过，今天来为大家讲解的是通过一个节点来获取它的父级id一、原理解释有细心的小伙伴可能通过百度什么的可以在文档中找到这两个方法，但是它这个节点的话就是只能在有选择框的tree树上生效，如图那么就会很头痛，因为我们当前的tree树是

2020-08-12 17:45:09 2174

原创 ECharts中图表加载动画时间

前言这一篇文章没什么技术要点，就是来给小伙伴们扩展一下ECharts的知识，我们平常用ECharts的时候每次刷新都会重新加载一下ECharts图表，那么加载的时候就会有个图表数据增长或者是变化的过程，这个过程可以说是一个动画，那么提到了动画，就会有这些个需求了，我们想让它加载的慢一点或者快一点，这时候这篇文章就发挥到它的作用了。一、效果图我这边的这个图表大家可以清晰的发现，是要比默认的慢了好多，那么它的运作场景就是很大的图表，就比如宽是一个屏，那么你不设置动画时间采用默认的话，感觉体验会非常的不好

2020-07-30 11:32:37 5571

原创 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 4020 3

原创 Vue中EChatrs中两个图表联动(一个图表控制另一个图表的数据)

前言这篇文章给小伙伴们带来的是EChatrs的操作，是通过点击一个图表来控制另一个图表的数据的操作，看着还是蛮有用的，因为大家在做管理系统的项目的时候，应该都是可以用的上的，也非常的简单，就是有的小伙伴可能刚接触EChatrs的时候可能不太熟悉其中的属性，因为它的属性功能太多、太强大了。展示一、原理它的原理其实十分的简单，非常的简单，就是给一个图表绑定一个点击事件，当然这个操作在原生的js代码中还是很好实现的，就获取下DOM，然后操作操作就可以了。但是这篇文章来主要给大家说的是在Vue中应该怎样

2020-07-29 14:26:24 2562 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 2623 24

原创 vue中动态引入Iconfont(阿里巴巴矢量图)

前言这篇文章主要为大家呈现的是动态改变Iconfont，这个icon一般用于导航菜单的标题前面，当我们有要可以动态修改更换标题图标时，不用再手动去修改代码了，是可以直接放在数据中修改的，非常的方便，而且很容易操作，尽管不是自己团队中的人，替换的话也很简单，下面我来为大家展示一、先登录Iconfont-阿里巴巴登录的时候有几个选项，咱要不是阿里员工的话就直接微博扫码登录就可以了二、创建项目1、用鼠标触摸到导航菜单的图标管理，会展开一个二级菜单，其中有一个菜单叫我的项目2、点击进去，有一个新建项

2020-07-17 12:02:54 2179 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 1018

原创 element中通过外部按钮来修改日期选择器的范围

前言这篇文章来为大家讲解的是在Vue中使用element-ui的时候，在使用ui库中的一个日期选择器这个模块的时候，我们可以通过日期选择器外部的事件来操作日期选择器的范围，因为element中的日期选择器自带的范围控制是在日期选择器里面，当我们的需求是在外面的时候，这时候就会有些困惑了，但是这篇文章将带你解决这个难题一、效果图展示二、代码展示<template> <div class="time"> <div class="t">

2020-07-08 09:52:18 667

原创本地储存加密（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 2192

原创 vue中要修改element组件中的样式

前言刚用到element的小伙伴可能会碰到这个问题，就是想要修改某一个组件的样式，在页面上课修改，然后改完复制过来在看的话就不生效，那么就把小伙伴给难到了，不过没关系，你看到了这篇文章，我将带你用element的时候想修改哪里就修改哪里。我为大家准备了两个方法，大家都可以去试试一、在class名之前加 ::v-deep，如图所示二、在写一个style，style标签不要scoped属性，用来专门存放element的样式，如图所示结语以上两种方法都是可行的，如果这篇文章对你有所帮助的话

2020-05-29 15:06:12 337

原创 vue element中tree自定义内容

前言这篇文章用到的是element中的tree，需求是它的节点上不止只有一个标题，还要有别的。这个在文档里面是有的，但是文档上写的有点复杂，可能会触及了有些小伙伴的知识盲区，所以在这里，我为大家梳理了最简单的代码，直接copy就可以了最终效果上代码<template> <div> <el-tree :data="data" :props="defaultProps" accordion @node-click

2020-05-29 14:52:31 2289

原创 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 382 2

原创 vue element开发侧边栏时的菜单根据路径动态绑定

前言这篇文章的话是要跟据自己项目的router路径来锁定菜单的默认选择值，因为代码的话就是整个项目的一个交互，所以这篇文章，主要内容是用文字和图片来和大家讲解原理的，代码就很少，主要就是它的原理构成，话不多说，现在开始为大家讲解。一，为什么会有这个需求在开发时，我们的用户点击菜单的第二个选项，看到里面的内容时，然后F5刷新，没有设置的情况下，它的菜单高亮还是会默认的选择原有设置的一个，我们的目的就是把默认选择高亮的菜单变成动态的，它的选择是根据路径来变化的二，开始在element中，制作侧边栏要用

2020-05-28 11:10:21 1393

qyp_1的博客