happy81997的博客

给按钮加上一个全局指令 noMoreClick 来限制在一定的时间内控件为 disabled不让再次点击。

很多人在用 或 的时候喜欢直接用，明文存储，直接将信息暴露在；浏览器中，虽然一般场景下都能应付得了且简单粗暴，但特殊需求情况下，比如设置定时功能，就不能实现。就需要对其进行二次封装，为了在使用上增加些安全感，那加密也必然是少不了的了。为方便项目使用，特对常规操作进行封装。不完善之处会进一步更新...封装之前先梳理下所需功能，并要做成什么样，采用什么样的规范，部分主要代码片段是以 作为示例，最后会贴出完整代码的。可以结合项目自行优化，也可以直接使用。设置 setStorageStorage 本身

路由懒加载可以让我们的包不需要一次把所有的页面的加载进来，只加载当前页面的路由组件就行。举个栗子🌰，如果这样写，加载的时候会全部都加载进来。所以，应该避免上面的写法，尽量使用懒加载。路由的懒加载可以分为以下三种写法。Vue异步组件es6的importwebpack提供的require.ensure()2、异步组件异步组件可以让我们在需要一些组件时才将它加载进来，而不是一初始化就加载进来，这跟路由懒加载是一个概念。以前是这么引入组件的如果不是一开始就要加载的组件，我们可以使用组件懒加载.

Day.js一个极简的处理时间和日期的 JavaScript 库，和 Moment.js 的 API 设计保持一样, 但体积仅有2KB。npminstalldayjs基本用法importdayjsfrom'dayjs'dayjs().format('YYYY-MM-DDHH:mm')//=>2022-01-0315:06dayjs('2022-1-315:06').toDate()//=>MonJan03202215:06:00G...

目录Vue前端技术实现文件预览（word、excel、pdf、ppt、mp4、图片、文本）实现方案docx文件实现前端预览代码实现实现效果pdf实现前端预览代码实现实现效果excel实现前端预览代码实现实现效果pptx的前端预览Vue前端技术实现文件预览（word、excel、pdf、ppt、mp4、图片、文本）实现方案找了网上的实现方案，效果看起来不错，放在下面的表格里，里面有一些是可以直接通过npm在vue中引入使用。文档格式

目录Vue3简介基础工作安装 vue-cli创建一个项目Vue3入门Composition APIFragmentscript差异setuprefref获取元素reactivetoRefstoRef判断响应式customRefshallowRef和shallowReactivereadonly和shallowReadonlytoRaw和markRawcomputed计算属性watch侦听器watc...

目录vue工程数字动画组件vue animate-number的使用与填坑一、基本用法篇（一）、环境配置（二）、核心代码：（三）、API​二、填坑篇1、用数组v-for动态传值渲染时候不显示值，显示NAN2、提示找不到找不到start()方法。3、特殊利用formatter方法，定制需要显示的数字样式vue工程数字动画组件vue animate-number的使用与填坑一、基本用法篇（一）、环境配置1.终端执行：npm install vue-a

vuex按F5刷新手数据丢失，无法保存问题最简单解决方案……原因： 页面F5刷新后，vuex会重新更新state，所以存储的数据会丢失解决办法：将vue相对state存在localStorage或sessionStorage或cookie中一份，刷新页面的时候，vuex数据消失了，vuex再从sessionStorage中拿回数据，变相的实现了数据刷新不丢失。具体解决过程：以vuex中的userdistCode变量为例。一、vuex中mutations给需要记忆数据的变量...

NPM安装 -S -D --save-dev --save区别npm i module_name -S = > npm install module_name --save 写入到 package.json文件dependencies 对象npm i module_name -D => npm install module_name --save-dev 写入到 package.json文件devDependencies 对象npm i module_nam..

问题描述：vue工程start运行时候报错：no such file or directory, scandir '.../node_modules/node-sass/vendor'原因：找不到node_modules/node-sass/vendor模块。去文件夹一看，还真的是没有，应该是在安装全局依赖的时候，没有安装到vendor，通过rebuild命令重新安装一下就可以啦。解决办法，运行：npm rebuild node-sass...

vue 实现点击“增加“”按钮，添加一个HTML元素场景描述：vue中经常需要点击一次增加按钮，添加一个HTML元素，比如一个div。初始状态：点击“增加”按钮后，添加一套这样的元素：实现思路：可以利用v-for循环的方式，循环itemcount变量，先设为一个itemcount变量为1（这里初始化显示的是1个），然后“增加”按钮的事件让itemcount增加1，即可。代码：data中定义：itemcount:1,template标签中：<templ

Vue混入mixin介绍mixin官方解释：混入 (mixin) 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项通俗解释：日常开发中，经常会遇到不同组件中会出现需要一些相同的或者相似的代码，这些代码的功能相对独立。可以利用vue的mixin将功能相同的或者相似的提出来，方便代码复用，也有利于代码维护。一、局部组件混入二、...

element-ui提供了很多方便的UI组件，但是使用的时候，特别是频繁使用到一个模块时候，经常需要进行二次包装，比如弹窗，很多弹窗需要加一些确定，取消按钮需要一些固定的模板套路，这些都可以利用二次封装实现。一、二次封装基本套路1、实现二次封装功能的模板：子组件<template> <el-dialog :visible.sync="visibleDialog"> <!--内容区域的默认插槽--> <slot></slo

Vue.extend开发全局组件，可通过js直接调用方法来显示和关闭 Vue.extend是一个全局Api,平时我们在开发业务的时候很少会用到它，但有时候我们希望可以开发一些全局组件比如Loading,Notify,Message等组件时，这时候就可以使用Vue.extend。 本文以开发个全局的loading加载组件为例，实现全局的遮罩层，并且实现通过js直接调用方法来控制组件显示和关闭，而不是通过components关键字来塞到每个vue文件里使用。一、开发全局需要展示的组件，实现...

目录vue工程：过滤器filters(文本格式化)使用、复用、全局注册一、文本格式化的使用二、文本格式化的本VUE文件内复用三、全局注册filtervue工程：过滤器filters(文本格式化)使用、复用、全局注册过滤器filters是被用于一些常用的文本格式化，比如时间显示的格式，比如数字太大，显示成多少万……一、文本格式化的使用过滤器添加再表达式的尾部，由管道符号“ | ”表示<div>{{ text | capitalize }}</div.

场景描述：VUE工程根据数据情况进行V-if渲染，当数据还没进行到哪一步，还没返回结果，或者数据返回有问题时候，提示data.area（数据没有，更不会获取到数据的某个属性值）未定义错误问题解析：没有请求到数据，就无法获取到数据的某个属性值，但是很多时候我们还需要设置数据的属性值解决办法：v-if中添加一个data.length的判断。 v-if="data.length >0" 确保数据有结果了，才进行渲染即可...

vue项目中 v-if和v-show的区别最全解析vue项目中有时候需要控制“条件渲染”，很多时候都是通过v-if或者v-show来控制的，有关二者的区别我想很多人都知道，但是最近做项目发现项目组中不少同志都搞不清，几乎都是乱用，出了问题，还判断不出来问题出在哪里。现在就简单讲讲这两个东西的区别。一、功能区别两个都能实现控制显示和隐藏，但是本质上有巨大的区别：1.1 v-show v-show严格意义上说“条件隐藏”。浏览器首先不管三七二十一，把HTML元素先渲染起来，符合...

目录vue工程 axios请求数据使用传统介绍+经验优化一、axios介绍二、axios安装三、axios入口配置四、axios使用4.1 get请求4.1.1 不带参数4.1.2 带参数4.2 post请求五、改进优化设置vue工程 axios请求数据使用传统介绍+经验优化一、axios介绍 在vue高版本项目中，很多使用axios...

目录VUE 2.X 工程监听使用大全（监听使用+监听本身的属性介绍）一、监听string属性值的变化二、监听object对象三、监听路由四、监听本身的属性4.1immediate属性4.2 deep属性五、监听vuex中值的变化VUE 2.X 工程监听使用大全（监听使用+监听本身的属性介绍）vue项目工程中，很多时候需要我们监听各种值的变化，一般监听......

重新npm install报错：no such file or directory 或者 deprecated XXX@版本号 解决方案问题描述：删除项目node_modules文件夹后，重新install，有时候重换操作系统，比如win7到win10，或者项目初始化构建时候时间太久远，就可能报no such file or directory 或者 deprecated XXX@版本号...

目录一、总体思路二、具体流程1、在src下面新建一个目录utils文件夹2、在utils文件夹下新建一个index.js文件3、main.js挂载到vue实例中三、如何使用vue项目工程中，有很多公用的js函数，为了便于集中管理，可以在src下面新建一个utils文件夹统一管理。这样在使用时候直接调用这个utils文件夹的内容就行。一、总体思路src下面新建一个...

目录一、xe-Utils介绍二、xe-utils API介绍API全局参数基础函数常用函数日期函数高级函数浏览器函数三、如何全局使用xe-utils3.1 安装xe-utils3.1.1 ES6方式（推荐）：3.1.2 CDN安装3.1.3 AMD安装3.2 全局配置3.3 全局参数配置（可省略）3.4 使用4、功能扩展（使用mi...

目录一、综述二、实现过程2.1 安装vue-particles2.2 全局配置vue-particles2.3 使用 vue-particles三、具体参数说明四、样式调整，实现只作为背景4.1、根据id号调整样式4.2 根据自定义的class名称lizi设置样式一、综述为了提高页面展示效果，特别类似于登录界面内容比较单一的，粒子效果作为背景经常使...

目录一、引入第三方插件二、引入函数方法2.1 单个函数引入2.1.1 JS中export函数2.1.2 JS中export default函数2.2 多个函数引入2.3 成组全部引入三、引入数组、对象JS文件四、引入class类js文件五、引入CSS文件vue中经常需要import各种文件，比如样式、组件、方法、js文件、模块等，具体每种如何使用。一...

目录一、动态使用样式二、全局公共css样式文件2.1 main.js中引入2.2 index.html引入三、单个vue文件中引入样式四、样式作用范围控制4.1 scoped私有作用域4.2 混合使用4.3 深度作用选择器4.4 动态生成的dom的样式一、动态使用样式使用场景：根据不同的值使用不同的样式，或者给样式某个属性设置一个变量值使用方法：...

vue cli 3.X （一）、简介、安装、卸载、单vue文件运行、新建系统工程、添加插件plugin1、介绍篇vue cli是一个基于vue.js进行快速开发的完整的系统。有三个组件：CLI：@vue/cli ：全局安装的npm包，提供了终端里的vue命令。（vue create、vue server、vue ui等命令）CLI服务@vue/cli-service ：开发环境依赖...

vue cli 3.X (二) 环境变量篇一、环境变量应用场景一个产品的前端开发过程中，一般会经历本地开发、测试、打包上线等过程，不同的环境可能需要不同的配置，比如接口地址、服务器地址、端口等等。因此，可以使用环境变量来管理不同环境下使用的配置二、四种方式的环境变量所有的设置环境变量文件必须放到代码文件夹的根目录下1、.env配置所有情况下都用到的配置。理论上这个最没吊用，都用到的配...

vue cli 3.X (三) 工程文件配置vue.config.js一、说明vue.config.js是一个可选的配置文件，该文件必须放在根目录下，必须叫这个名字，必须按照固定的模式且严格遵守JSON的规范。只有这样才能被@vue/cli-service自动加载，修改整个工程的配置详细参考：官网 https://cli.vuejs.org/zh/config/#全局-cli-配置二、...