qyp_1的博客

前言这是一个非常非常有用的东西，大家在用vue开发项目的时候应该会遇到要刷新一下组件的需求，如果大家用的js的方法，就很没有用户体验感，这个方法是通过$nextTick来进行一个刷新，我把它封装到了app.vue中，用的时候就很方便，大家看到了就都了解一下吧一、在App.vue中写<template> <router-view v-if="isRouterAlive"></router-view></template><script&g

前言这是一般的vue项目中都会有的切换组件的顶部进度条，挺好看的，也很炫酷先看一下是什么样子的就是这个蓝色条条，现在我们来实现它一、在项目中安装npm install --save nprogress二、在main.js中配置import NProgress from 'nprogress'import 'nprogress/nprogress.css'NProgress.configure({ easing: 'ease', // 动画方式 speed: 500, //

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

前言这个东西所有的项目都会用到的，拿去用<template> <button @click="djs" :disabled:"disabled">{{yzm}}</button></template><script>exprot default{ data(){ return{ yzm:'获取验证码', disabled:false,

前言一个非常实用的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

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

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

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

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

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

前言这篇文章给小伙伴们说的是在使用element这个UI库的时候，它里面有Layout 布局，但是如果没有自己设置的话，它只能分为24的因数，就比如3、4、6这种布局，但是我们在开发的时候，还会碰到5或者7这样的布局，那么就很头痛了。我想很多小伙伴应该和我一样，输入4.8，但是这是没有用的，那么今天我来给大家站展示一下怎么解决5栏布局的问题1、原理讲解先随手写一个普通的4栏布局，进入控制台，大家会发现然后就比较清晰了思路，我们会发现:span="6"，到控制台中的class就是el-col-6，那

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

前言这个功能大家肯定都会用过或者见过，因为在逛淘宝的时候会有标签选择的功能，当然，咱们这篇文章就是来让大家学习这个功能，这个功能的话在很多地方都能用的到，希望大家仔细阅读。一、效果展示二、代码展示<template> <div class="box"> <p class="yx"> 已选条件 <span v-for="(item,index) in yxx" :key="index">{{item}}</sp

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

前言这篇文章是在项目中登录后的，在本地存储用户的信息用的加密，用的是CryptoJS做的加密，在过程中也是遇到了一些小坑，这篇文章将会为大家清晰的展示加密操作一、在项目中安装CryptoJSnpm install crypto-js二、在需要加密或解密的文件中引入crypto-jsimport CryptoJS from "crypto-js";三、加密代码let cipherText = CryptoJS.AES.encrypt("1", "secretkey123").toString

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

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

前言此文章是我自己在开发中遇到的一些权限问题，然后主要是用了一种别的方法，这种方法十分简单，通俗易懂，代码简介，一看就会，上代码上代码在main.js中加入import router from './router'router.beforeEach((to, from, next) => { let token = localStorage.getItem("token");//登陆成功之后存储的token值 //以下是站在用户角度的4种情况，我为大家一一列举 if (toke

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

前言先给大家看一下效果图这篇文章是半转载的博客，之前项目需要这么一个功能，然后在论坛上找到一个相似的，但是复制过来的话有些地方有问题，然后改了半天，又添加了一些小细节的优化，代码复制过去有问题的话可以在下方评论（基本上不可能有问题），再改的过程中也遇到过一些小坑，谷歌浏览器自带的翻译功能千万不要开，如果好奇心大的话可以试一试（这个东西耽误了我很长时间，喃现在也不知道是电脑的原因还是什么原因，希望有大牛可以指点），废话不多说，上代码代码<template> <div clas

前言

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

vue中仿window系统左键画框效果一、代码原理通过鼠标按下，移动，抬起事件来操作首先鼠标按下来获取当前按下的位置然后通过判断来进行鼠标移动的操作，判断鼠标是否按下，按下时才能执行鼠标移动的事件在移入过程中的根据框的多个形式来判断画框操作最后松开时恢复到原有的样子二、上代码<template> <div> <div class="cc" style="border:1px solid red;width:100%;height:100vh"

**vue中根据倒计时来排序的模块一、原理分析此demo是实现多条数据的有效时间，通过数据的有效时间来进行排序，从而进行倒计时，倒计时归零后将自动删除此模块实现思路为将时间戳转换为可视时间，通过set方式添加到数组对象中，然后通过sort方式来进行排序二、代码展示<template> <div class="hello"> <ul> <li v-for="(item,index) in list1" :key="index"&gt