halo1416的博客

输入框限制了maxlength=“11”，需要在输入第12位时，输入框变红；当然，第12位是不能真正输入到输入框中的。在绑定的事件中，对事件源进行处理；将参数放到e.target.参数名 = '参数值'=> 这样在每个事件源中都能获取到参数/*** 限制输入框最大长度，达到限制长度再次输入时，输入框变红* 用法：v-input-maxlength="6" 不能在标签上配置 maxlength 属性*/},});// 指令事件间传参，

在可视化大屏项目中，屏幕适配是绕不过去的一个问题（ps：如果知道大屏展示的屏幕是固定的，当我没说）。这里简单介绍通过css的transform属性 里面的 scal()实现常规屏幕适配。

预处理器安装后，Nuxt.js 会自动识别被导入文件的扩展名，之后，webpack 会使用相应的预处理器进行处理。前提是，你安装了对应预处理器。时，你需要在 plugins/ 目录下创建相应的插件文件，并在 nuxt.config.js 中的 plugins 配置项中配置插件的路径。该文件是Nuxt框架的主要配置文件，其大多数配置都可以在这里进行配置。：某一些模块的配置可以写在modules配置外，配置详情请参考模块的官方文档。这里除了配置一些公用的js外，每次你需要使用。

ElementUI 组件默认属性

一、前言在最近的实际项目开发中，有个统计报表需要对单元格进行合并，如下图：实现功能：合并分公司相同的公司（ 没有分公司的也合并到一起，但是这些没有分公司的数据可能并不是连续的，需要前端自己排序 ）合并ETC客服中心相同的数据（不至于出现没有客服中心的数据，但在没有分公司的情况下，相同的客服中心可能不是连续的，也需要自己排序）自定义累计栏，将前三列合并，自定义完成率的计算公式显示累计栏后，table横向滚动条会出现在累计栏上方（element示例也是这样的），需要修改样式；如下图二、功能

一、 前言分页对于前端开发而言，是一个经常遇见也比较简单的功能。常见的处理方式是结合后端接口处理即可。但偶尔有时候后端接口不太方便提供该功能时，我们可以自己通过前端实现一个假的分页效果！二、实现代码其主要实现和传统的分页（如element提供的分页组件）区别在于对 current-change（页码）改变时的处理传统分页：在current-change回调时间中，拿到最新的页码，重新请求接口即可自己实现假分页：在current-change回调时间中，拿到最新的页码，去从所以的列表数据中截取出

一、前言在实际项目开发中，特别是在前后端联调过程中，我们往往会添加很多 console.log 日志来帮助我们开发。大多时候，我们在开发完成之后便将对应的 console.log 删除，但是，有时候我们忘记或者需要在上线后也看一段时间的日志（比如有一些逻辑测试环境无法测试，需要在正式环境进行微调）。这种时候，我们就可以添加一个全局开启/关闭日志的方法，省去我们挨个添加删除 console.log 的麻烦即重写一下 console.log 方法const isDebug = true; // 控制是

一、问题描述在第一次使用vue-cli创建项目的时候，工具会提示是否切换到从 taobao 镜像拉起资源 和选择 yarn或者npm安装包，如下图：1.1 是否切换到淘宝镜像拉起资源1.2选择yarn或者npm：在我们选择使用yarn或者npm之后，下一次再次使用vue-cli生产项目时，它将直接使用上一次选择的工具去安装！如果我们想更换安装工具，该怎么操作？为什么要更好工具？我在生产vue3的项目时，使用yarn安装依赖，有时候会报错，有一个包无法安装，使用npm就能正常安装！二、解决

一、使用场景在vue实际开发中（开发的都是单页应用），我们都使用Vue-Router做页面导航，而每次切换路由的时候，页面都是会进行重新加载的，对应的所有周期页面被重新执行一遍。但是，有一些场景却需要我们把页面状态保存下来，否则用户体验很不好，如：分页列表中，假设我们已经切换到第五页，这时我们进入了其中一条数据的详情页面，然后返回，这时如果不做特殊处理，会重新执行created 和 mounted生命周期，从而重新加载页面，默认就显示到第一页去了，绝望！！一个列表页中，存在条件筛选，查询到相关数据

1.错误写法 这样拼接的图片地址是正确的，但是页面显示不出来<img :src="'@/assets/images/user-center/bank-step' + step + '.png'" alt="">2. 正确写法（使用require引入）<img :src="require('@/assets/images/user-center/bank-step' + step + '.png')" alt="">文章仅为本...

一、问题描述vue在将页面滚动到页面中部或者底部（反正不在顶部），再进行页面跳转后，新页面的滚动条还处于上一个页面的位置，并没有更新到页面顶部二、解决方法在全局路由钩子里面将页面滚动到页面顶部router.beforeEach((to, from, next) => { document.body.scrollTop = 0; document.documentElement.scrollTop = 0; // 兼容IE window.scrollT

一、背景在实际项目中，一般都会给页面添加 loading，从而提升用户体验。添加 loading 的方式有两种（基于vue+element）：1.1 添加到table上这种方式是将 loading 主要添加到table组件上，并且在一些需要的地方进行单独处理，如给button添加loading效果。1.2 全局添加这种方式是根据请求全局添加，只有请求就显示loading。一般在全局的ajax封装中处理。这里主要介绍的是全局添加的方式二、有什么问题根据请求显示loading（用elemen

一、背景目前负责的系统（商城后台管理系统）里面有这么一个需求，为了配合前台的展示，上传的商品图片比较必须是1:1的正方形。（其它地方有时会有5:4或者16:9的需求，但较少）。所以需要对上传的图片先进行裁剪，并且按要求只能裁剪为1:1，然后在进行上传。当然，为了兼容系统其它地方有5:4或者16:9的图片比例需求，需要给出一个参数，可以随时控制图片裁剪的比例。二、使用什么插件实现使用vue-cropper显示，该插件是基于cropper的二次封装，简单小巧，更合适vue项目。注意：功能...

一、rem介绍rem是CSS3新增的一个相对单位（root em，根em），这个单位引起了广泛关注。这个单位与em有什么区别呢？区别在于使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素。这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。目前，除了IE8及更早版本外，所有浏览器均已支持rem。对于不支持它的浏览器，应对方法也很简单，就是多写一个绝对单位的声明。这些浏览器会忽略用rem设定的字体

vue.config.js 的作用： 一个可选的配置文件，如果项目的 (和 package.json 同级的) 根目录中存在这个文件，那么它会被 @vue/cli-service 自动加载。也可以将配置写到 package.json 中的 vue 字段中。简单的webpack配置：（ chainWebpack 需要根据项目具体要求配置 ）module.exports = { publicPath: '', // 你的项目发布的路径。Vue CLI 会假设你的应用是被部署在一个域名的根

一、全局安装 vue-cli1. 安装脚手架npm install -g @vue/cli# ORyarn global add @vue/cli2. 验证是否安装成本（查看版本号）vue -V // 我安装的版本：@vue/cli 4.5.4二、新建项目1. 使用命令创建项目vue create 项目名称2. 选择项目配置（最后选择手动配置）注：选择手动配置后，由于选择的项目配置不一样，后续步骤可能存在差异，仅供参考！3. 选择你想要的配置（如：添加vue-route

一、前言：如果你的项目中使用了sass作为预编译，则会下载一个包：node-sass，但是这个包会下载失败。二、产生原因在下载node-sass 这个包时，package.json中生成的依赖记录事这样的"node-sass": "^4.9.0"，表示为安装的node-sass最低版本为4.9.0，而安装高版本就会报错。有一种解释是这样的：npm安装node-sass时，会从github.com上下载 .node 文件。蛋由于国内网络环境的问题，这个下载时间会很差，甚至导致超时失败。三、解决方法

前言：该篇文章是vue响应式的基本实现，包括对对象，数组的处理，以及对部分数组方法的重写。 vue的响应式原理实现 ==>> 基于Object.defineProperty 实现特点： 1. 使用对象的时候 必须先声明属性 ，这个属性才是响应式的 2.增加不存在的属性 不能更新视图 （需要使用 vm.$set ==> ...

后台返回的数据结构Tree 组件需要的数据结构：自己写的： ===>> 这样递归必须要知道最顶层的对象，然后传入顶层对象一次遍历得到自己目录data.data.forEach((item, index) => { if (item.parentDeptId == 0) { //先将一级组织保存起来 this.organizationD...

一、暴力型this.$forceUpdate()二、婉约型用一个临时变量保存数据，完成所有操作后；最后再赋值给data里面指定的变量eg：let obj = {...}// 各种操作 obj.a = ...this.dataObj = obj;三、官方型使用 $seteg:data() { return { obj:...

前言：今天有一个需求，一个列表中每一行都会有一个element-ui的popover 弹窗，使用click或者hover触发；但是，这个组件自身不会自动关闭，处理手动点击页面其他地方。使用需要对这一现象进行处理，使用doClose() 方法。第一步：给每一个el-popover标签添加一个key唯一标识的ref第二步：在每次点击、hover触发el-popover时（clic...

想要的效果：但是，我将官网的代码复制下来，没有效果也没有报错！！！原因： 可能你项目下载安装的element-ui版本和你看的官方文档版本不一样， element-ui ,输入框el-input长度限制这个组件是最新版本2.8.2才有的所以：如果想要 输入长度限制组件 生效，请将element-ui的版本至少升级待 2.8.2...

1. 限制小数位数1.1 Vue 限制input输入 小数点后两位number&lt;input type="number" @keydown="keydownFn" placeholder="请输入价格" v-model="price"&gt;keydownFn(event) { // 通过正则过滤小数点后两位 // event.target.value = (ev...

前言：表单提交数据在网站页面中是十分常见的，而这个表单数据的获取在原生写法甚至于JQ都是比较麻烦的（首先需要获取DOM，然后获取值）。但是，在vue的项目环境下，表单数据的收集又该怎么办呢？（这种自己写input元素的方法在实际项目中是不常用的哈，因为一般我们都会用一个UI库，方便而快捷！）首先，看一下最后的效果：然后，上一下完整的代码：&lt;!DOCTYPE html&g...

vue引入font awesome的方法： npm install font-awesome --save 然后在main.js 中：import 'font-awesome/css/font-awesome.css'问题描述：打包后发现图标不显示 报错为font awesome的相关文件引用路径问题；这是由于打包的配置文件webpack conf.b...

一、vue-html5-editor在安装好脚手架的依赖后，要执行 npminstallvue-html5-editor--save-dev 来安装这个富文本插件，由于这个富文本插件的图标是依赖font-awesome.css的，所以要npm install font-awesome.css 安装这个css然后在main.js中引入这个cssimport"font-aweso...

一、缓存路由组件对象1、理解1) 默认情况下, 被切换的路由组件对象会死亡释放, 再次回来时是重新创建的2) 如果可以缓存路由组件对象, 可以提高用户体验2、代码实现 <keep-alive> <router-view></router-view> </keep-alive&gt...

说明：vue-router是vue的一个最常用的的插件，用于路由跳转。是做SPA应用的必备哦！一、路由基本使用1、名词解释路由器：用于管理路由路由：一种映射关系，即key：value 。 key：是path；value：是组价。2、API说明1) . VueRouter(): 用于创建路由器的构建函数        new VueRouter({            ...

问题描述：父组件调用了一个子组件，传递了一个id的属性到子组件，但是在子组件中将这个id的props属性赋值给了data里面定义的另外一个属性myId，并且写了watch监听这个id的props。结果：第一次的时候子组件并没有更新界面（即data里面的myId属性没有更新）；第二次及以后就都可以了原因：第一次穿过来的值并没有赋值给myId，导致界面没有更新，只要在mounted里面赋值一次...

一、打包过程1. 运行命令：cnpm run build 1.2. 得到的 dist文件夹有两个文件（static：文件夹；index.html：文件）。保证 index.html 文件可以在本地正常打开2. 将打包得到的dist 放到服务器上（Apache Tomcat的服务器一般放在 webapps文件夹下面）3. 利用服务器域名打开 dist/index.html ...

1. vue中操作DOM操作当前时间元素的第二个子元素的style；默认事件形参: event ==>> @绑定的事件没有传参数，默认会有一个参数event，即当前绑定时间的DOM的使用信息（一般使用event.target比较多）隐含属性对象: $event ==>> @绑定的事件会传参数，那么可以传递一个参数$event（在事件绑定的地方当着一个普...

在vue的时间开发过程中遇到比较头疼的事情之一，就是在本地与非本地环境中的接口进行联调。最常遇见的就是跨域问题，一把的解决方法有三种：1. 后台更改header（注：这是后台的事，我们做不了）2. 使用JQuery提供的jsonp  (注：只为了使用jsonp而引入Jquery，有点浪费哈)3. 使用http-proxy-middleware 代理解决（注：项目使用vue-cli脚手架...

vue是号称实现了数据双向绑定的框架，但事实上在日常开发中我们用的最多的就是 v-model 将data（vue实例中）里面的是数据和view 相关联，实现 data 更新，view自动刷新的效果。但是，在移动成都上来说，这种数据双向绑定的效果并不是特别的明显。今天，我用输入框和 computed 配置来实现一个比较明显的数据双向绑定的效果：先来看一下最终的效果：主要实现的效果：...

前言：图片是网站优化的一个重点，图片懒加载是其中比较好用的一个方法。jquery也有很多图片懒加载的插件，今天看了一下vue的图片懒加载插件 ----vue-lazyload。1. 安装：cnpm install vue-lazyload --save-dev（当然可以用npm或者yarn哦）2. main.js 中全局引入：import VueLazyLoad from 'vu...

先来一张vuex官方的流程图：vuex流程理解：vuex中包括的对象有：state、mutations、actions、getters和modules。在vuex流程中设及到的对象：Components、Actions、Mutations和State。实现过程：用户在component中通过操作dispatch触发了一个action，action就会commit一个muta...

一、前提：安装node（使用它的包管理工具npm）；全局安装cnpm（npm比较慢，但也可以省略该步骤）；全局安装vue脚手架工具vue-cli（命令：npm install -g vue-cli ）二、新建项目：1. 在指点目录下使用命令：vue init  webpack 项目名称2. cd 进入项目文件夹，使用命令：cnpm install 安装依赖文件3. ...

1. 前言：因为vue源码是比较复杂的，考虑的东西比较多；而这里只是简单的了解下类似vue的mvvm框架的部分原理，所以我们用这个库： https://github.com/DMQ/mvvm  （仿vue实现的mvvm库，比vue简介，简单） ==&gt;&gt; 下面称其为 mvvm2. 概念解析：1) 数据代理: 通过一个对象代理对另一个对象(在前一个对象内部)中属性的操作(读/写)...

一、情况说明：在wacth里面生成了一个日期字符串的的数组（如下图1），如果遍历这个数组生成一个以日期为key的Object，但是数组里面的元素顺序和Object的属性的顺序是不一样的，并且在vue模板中遍历这个Object并显示key，得到的是数组的元素顺序（如下图2）！图1图2 二、过程分析：问题出在了遍历数组得到对象上，这个时候的顺序变了三、解决方法：先给数组排序，在...

为了减少vue项目打包文件大小，我们对Element UI按照官网的文档进行按需加载。一、按需加载1. 按照依赖 npm install babel-plugin-component -D2. 修改 .babelrc 文件 注意：官方文档让我们直接修改.babelrc ；但是有可能会出错，因为那样会把脚手架默认的配置给覆盖掉了，应该将文档中的配置添加到.ba...

前言：需要做的效果如下图：用到的技术栈：vue、vuex、vue-router。主要的vue-router的路由守卫。一、首先，看一下vue-router的路由守卫注意：这三个方法是依次调用的（有点类似于生命周期有执行顺序一样） 路由守卫在刚进入页面时，是不会执行的 回调函数中的三个参数： 二、代...