kirinlau的专栏

wangEditor是前端一个比较流行的简洁易用，功能强大的前端富文本编辑器，支持 JS Vue React，提供了很多丰富的功能，下面手把手教你实现wangWditor富文本插件在vue项目中配置，保存、图片上传等功能。无脑ctrl+c即可

要使用FontFaceObserver来加载设置项目本地的字体，先确保字体文件位于项目中或者可以从服务端获取到，这样就可以使用FontFaceObserver来检测并加载这些字体下面写个伪代码的示例：首先引入字体资源，css配置字体。

elementui组件el-pagination分页组件 背景色修改

项目需要在不同环境下运行，如开发，测试，生产等，但是每个环境下请求的服务地址不是确定的， 为了避免频繁切换请求的地址以及相关的配置容易出错的问题，新的vue-cli脚手架没有直接提供配置选项，怎么办呢？属性了，因为它变成了一个全局的变量，可以在任何地方使用，它会根据环境自动去赋值baseURL了。分别为.env.development，.env.test，.env.production。就像下面这种，就是.env文件只需要声明环境，不需要配置。首先我们在根目录新建3个文件，一、建立.env系列文件。

vue最主要的两大特性就是响应式和组件化，组件化项目少不了组件之间的通讯，那么组件之间到底有几种通信方式呢。今天着重讲一下另外一种事件中转bus，非常简单快捷，不需要走其他中转或者提交事件，只需要触发和监听即可，也是我之前项目中用到比较多的一种，尤其是多组件依赖某一个小的组件的数据时，比如单页面上方有个radio-group，事件触发后需要其他组件同步更新数据时， 尤为好用，

随着项目越来越多的交互和展示， 图表类的看板也在项目中应用的越来越多， echarts作为一款优秀并开源的产品，在项目中也大规模的应用，尤其是边缘计算和大数据可视化的项目中，随处都能见它的身影，本文记录封装一个基础的echarts图表组件

在vue中，父组件中使用子组件方法的和传递过来的参数时直接只用参数就可以了，如下：// childthis.$emit('change', param)// parent@change='parentHandle(param)'如果我们在使用子组件方法的同时，还想使用自定义参数呢，使用场景比如，在父组件中遍历子组件，想使用每个组件的索引， 这时候就需要修改一下写法：// childthis.$emit('change', param)// parent@change='parentHan

插槽是vue项目中常见的应用，也是一项对项目组件比较友好的技术，一直想写一篇关于插槽的理解文章，但是碍于比较忙，今天恰好也遇到了，趁着晚上有时间来更一下：关于vue的三种插槽：1、匿名插槽2、具名插槽3、作用域插槽前两种用的比较多，我就简单地说一下：匿名插槽在子组件中给定位置后，在父组件就是直接在写在子组件标签中，它会自动占用子组件给定的位置，一般用于只有一个比较大的自定义的区域。像：<slot name="label"> <span v-if="label" cl

最近在写一款基于weex的UI组件库，遇到很多问题，一直想歇写一点东西，无奈比较忙，下午遇到一个小问题在动态渲染class的时候顺手写了下面的第一种方式来绑定class，调了半天在naive移动端无效，改了后面的第二种方式后好了， 第一种并不是动态修改条件后不能生效，是根本就没根据条件来渲染class。:class="{selectedColor:item.isSelected}" 改为一下...

1. 原因js代码是运行在内存中的，代码运行时的所有变量、函数也都是保存在内存中的。　　刷新页面，以前申请的内存被释放，重新加载脚本代码，变量重新赋值，所以这些数据要想存储就必须存储在外部，例如：Local Storage、Session Storage、Index DB等。这些都是浏览器提供的API，让你可以将数据存储在硬盘上，做持久化存储。具体选择哪一个就根据你实际需求来选择。　　二、...

在移动端的web开发中，由于设备的局限性，上拉滚动加载可以带来更好的用户体验，一个列表或者waterfall的lasyload都是基于上拉判断距离后触发事件进行请求加载数据，如何在Vue项目中实现这个功能呢，我们使用了一款vue direvtive指令性的插件vue-infinite-scroll。detail link：https://github.com/ElemeFE/vue-infini...

简单粗暴，先上图，大概长这样：在使用vue时有遇到像上图下拉框change事件切换div，change切完后大概会变成这个样子：上代码：<div class="test"> <p class="title"> <select v-model="selected" v-on:change="change"> <option v-for="option in

Vue.js是一套构建用户界面的渐进式框架，小巧、灵活、简洁。 下面介绍一下Vue.js父子组件和非父子组件间的传值通信的几种常见方法。父组件向子组件传值： parent：<parent> <child :message="msg"></child></parent>data(){ return { msg: "this is parent message"

vue项目打包后在production模式下提示图片 ‘404（not found），在dev环境下好好的，打包了就提示这个错误。这是为什么呢，以前第一次使用vue-cli构建项目的的时候只有两个图片文件，当时部署后报错路径问题， 当时的想法就是简单粗暴，直接在build好的文件修改了文件路径，再后来项目中遇到了一大堆静态资源，修改路径显然是不行的，看了一下生成文件大概知道是文件目录改变了，所以引...

工作中项目使用的是前端的Vue框架，请求用的是自己封装好的axios，api请求均已封装成方法，在页面中使用时直接import 然后写在自己的自定义触发方法中即可。 然而遇到一个棘手的问题就是有一个超级大的表单无论怎么调都是错误，服务端不能接受到参数，然后试着换成原生的页面请求后，服务端可以收到请求和参数，但是没有设置请求头token以至于服务端不认数据，所以在main.js中设置了axios的一...

项目中需要的日期格式为yyyy-mm-dd，但是我们在使用的element-ui的 日期选择器后默认的时间格式为Fri Sep 07 2018 00:00:00 GMT+0800 (中国标准时间)网上查了一下，大家的方法大概就是在datepicker 标签中添加 change事件，以参数的方式在函数中在赋值即可，长下面这样，试了一下没什么卵用：&lt;el-date-picker ty...

在项目中遇到对话框关闭或者取消后，再次打开验证错误或者表单内容依然存在的效果，如下：这种用户体验显然不好，那么如何解决这种问题呢？第一种方法简单粗暴，就是在dialog对话框添加v-if，下次打开对话框重新渲染即可。第二种方法就是在 dialog取消按钮或者在对话框关闭的 ‘before-colse’事件中添加：this.$refs[formData].resetFields();f...

el-table默认选中项核心伪代码如下：this.$refs.multipleTable.toggleRowSelection(this.tableData[index],true); //row 选中外面套两层for循环，if判断想要选中的某项值和tableData中某对象的某个值相等即可...

vue-cli是什么？为什么要使用vue-cli？ vue-cli 是vue.js的脚手架工具，用于自动生成vue.js模板工程的，为什么不直接引用vue.js使用呢？ 因为这样构建项目时才会不需要我们去做一些额外的无用功，更专注于代码的实现： 即这样才会显得正式一点。1，安装node 2，安装npm（node package manger，目前来说node自带可以免安装） 3，安装c