发表于 | 阅读次数:

前言

在项目中有表单提交的时候，用户一般填了数据之后返回上一个页面再进入时不希望已填数据丢失，这时候就需要对页面进行状态保持。

实现原理

主要实现原理，状态保持的路由不会执行生命周期的钩子函数，只有第一次进入页面会执行钩子函数。
actived :这也是一个钩子函数，keepAlive状态保持的页面中生命周期的钩子函数不会触发，但是会触发actived钩子函数，那么这样可操作性就很大了。

具体实现代码

App.vue文件
<template>
  <div id="app">
    <keep-alive>
      <router-view v-if="$route.meta.keepAlive" />
    </keep-alive>
    <router-view v-if="!$route.meta.keepAlive" />
  </div>
</template>

Router文件夹下定义路由的文件index.js
export const reserverRoom = {
  name: 'reserverRoom',
  path: 'reserverRoom',
  component: createAsyncComponent(() => import('自己的文件路径')),
  meta: {
    title: '预订会议室',
    keepaAlive: true,
    isBack: false,
    firstTime: true,
  }
}

这样就可以对某一个页面进行状态保持了，而不用对所有页面都状态保持。

actived和created的区别

created()：在创建vue对象时，当html渲染之前就触发；但是注意，全局vue.js不强制刷新或者重启时只创建一次，也就是说，created()只会触发一次；

activated()：在vue对象存活的情况下，进入当前存在activated()函数的页面时，一进入页面就触发；可用于初始化页面数据等。

发表于 | 阅读次数:

前言


最近在用vue+vux+es6+webpack搭建一个简单的移动端会议室预订系统，在做登录页面的时候遇到要将密码加密成md5格式。这里做一个简单的记录。

md5散列


根据官方文档https://doc.vux.li/zh-CN/tools/md5.html 里面标注，直接在你用到相关的函数的时候引入即可。

用法： import { md5 } from 'vux';
      md5('password');

base64


同理，直接引入即可。可以进行加解密操作。

import { base64 } from 'vux'
base64.encode('VUX')
base64.decode('VlVY')

发表于 | 阅读次数:

前言


最近在学习javascript的类与继承的时候发现一个新的问题，就是call()和apply()方法,就我们所知都是用于改变this的指向，然后我就联想到了它们之间有什么区别，因此有本文。

call()方法


call()方法有两个参数，第一个参数是改变this指向，第二个参数是需要传的参数。

Person.call(this, name)

apply()方法


apply()方法有一个必选参数，第二个参数是可选的，第一个参数也是改变this的指向，而第二个参数只能传一个实参且须是数组。

Person.prototype.apply(this);
Person.apply(this, [name, age]);

两者之间的区别


call()方法的第二个参数可以传递多个参数，实参必须要按照形参的个数和顺序进行传参。
apply()方法的第二个值只能传递一个参数而必须是数组。

发表于 | 阅读次数:

前言

最近在学习一些js知识，遇到DOM事件流这个概念以及一些相关知识点，写个笔记做个记录也为加深自己的印象。

事件流

定义：

  1. 事件流 描述的是从页面中接收事件的顺序,也可理解为事件在页面中传播的顺序。
  2. 事件 就是用户或浏览器自身执行的某种动作。诸如click(点击)、load(加载)、mouseover(鼠标悬停)。
  3. 事件处理程序 响应某个事件的函数就叫事件处理程序(或事件侦听器)。

事件处理程序有两个方法：addEventListener()和removeEventListener()分别用于处理监听某个指定事件和删除事件。所有DOM节点中都包含这两个方法，并且它们都接收3个参数：要处理的事件名、作为事件处理程序的函数和一个布尔值。当这个布尔值为true时，表示在捕获阶段调用事件处理程序；若果是false，表示在冒泡阶段调用事件处理程序。

事件作用范围

元素自己所占页面空间部分加嵌套元素所占空间范围(若嵌套元素覆盖在容器元素上，则事件的作用范围为容器元素自身所占空间大小)

事件的执行顺序

事件执行有两种分别为事件冒泡和事件捕获，事件冒泡 为从最内层的div逐步到最外层div。即事件开始时由最具体的元素(文档中嵌套层次最深的节点)接收，然后逐级向上传播到较为不具体的节点。
而事件捕获则完全相反，事件捕获为从最外层的div逐步到最内层div。事件捕获的思想是不太具体的节点应该更早接收到事件，而最具体的节点应该最后接收到事件。

结论：

  1. 当容器元素及其嵌套元素都在冒泡阶段调用事件处理程序时：事件按事件冒泡的顺序执行事件处理程序。
  2. 当容器元素及其嵌套元素都在捕获阶段调用事件处理程序时：事件按事件捕获的顺序执行事件处理程序。
  3. 当容器元素及嵌套元素，即在捕获阶段又在冒泡阶段调用事件处理程序时：事件按DOM事件流的顺序执行事件处理程序，且当事件处于目标阶段时，事件调用顺序决定于绑定事件的书写顺序，按上面的例子为，先调用冒泡阶段的事件处理程序，再调用捕获阶段的事件处理程序。
    具体执行代码：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59

<html>
  <head>
    <style>
      #wrap {
        width: 200px;
        height: 200px;
        background: orange;
      }
      #outer {
        position: relative;
        top: 50px;
        left: 50px;
        width: 100px;
        height: 100px;
        background: #eeddff;
      }
      #inner {
        position: relative;
        top: 25px;
        left:25px;
        width: 50px;
        height: 50px;
        background: #44ddff;
      }
    </style>
  </head>
  <body>  
    <div id="wrap">
      <div id="outer">
        <div id="inner"></div>
      </div>
    </div>
  </body>
  <script>
    var wrap = document.getElementById('wrap');
    var outet = document.getElementById('outer');
    var inner = document.getElementById('inner');
    
    wrap.addEventListener('click',function(){
      alert('789');
    },false);
    outer.addEventListener('click',function(){
      alert('456');
    },false);
    inner.addEventListener('click',function(){
      alert('123');
    },false);
    wrap.addEventListener('click',function(){
      alert('wrap');
    },true);
    outer.addEventListener('click',function(){
      alert('outer');
    },true);
    inner.addEventListener('click',function(){
      alert('inner');
    },true);
  </script>
</html>

当点击页面中心浅蓝色部分的时候，先从最不具体的节点捕获事件，先弹出wrap,接着弹出outer。接着处于目标阶段，先弹出123，再弹出inner。紧接着，事件处于冒泡阶段，先弹出456，再弹出789。
当点击橙色部分时候，即从捕获阶段进入到了目标阶段，则按事件顺序执行，先弹出789，接着弹出wrap，整个事件捕获冒泡完毕。

参考博客：https://segmentfault.com/a/1190000003497939

发表于 | 阅读次数:

前言


最近在做一个颜色配色的页面，需要用户配取的颜色直接显示到表格对应行里直接显示，这样用户就可以很直白的看到自己选取颜色变化，就不用切换页面才能看。
实现思路： 由于项目中用到的是elementui框架，所以我们这里直接取用标签,这里还可以选用vue的插件
vColorPickerhttp://vue-color-picker.rxshc.com/

但是这个插件有一个坑，会影响到我的页面布局，故弃用了，因为它的显示是visibility: hidden;,就是说在页面上看不到，但是还是会占用到该高度。
考虑到表格行的渲染，我们先看一下官方文档上的描述：

这里我们用到的是row-style属性
先看实现效果是不是你需要的

上代码讲解：

阅读全文 »

发表于 | 阅读次数:

前言


最近遇到一个很棘手的问题，就是需要上传多个图片或视频文件，我一直陷在数组里面无法自拔，正如我们所知，上传一张图片，formdata的格式是这样的，

从这里我们可以联想到多张图片应该也是要这样子传的，一开始就陷入在数组的坑里，来来回回，各种尝试，终于出现了真的的结果多张图片应该张下面这样

具体代码


阅读全文 »

发表于 | 阅读次数:

前言


最近在跟后台对接口时遇到一个这样的问题，后台接口返回的JSON数据格式如下，而我在级联下拉框中选中后需要给后台传targetNumber字段，但是在分组里该字段是空的，不能通过简单的设置defaultprop来实现选中得到的东西。所以我想到了递归搜索返回并写了一个函数来实现他。

{
    "value": "1010",
    "label": "演示对象组",
    "parentid": null,
    "leaf": false,
    "disabled": false,
    "targetNumber": null,
    "children": [
        {
            "value": "27B62743B87E4CCD9592F2F0FC93BFE4",
            "label": "作业人员B",
            "parentid": "1010",
            "leaf": true,
            "disabled": false,
            "targetNumber": "S62178186220125",
            "children": null
        },
        {
            "value": "E30795CD2FA9454CA2394ED4E63423DC",
            "label": "作业人员A",
            "parentid": "1010",
            "leaf": true,
            "disabled": false,
            "targetNumber": "S62178186220111",
            "children": null
        }
    ]
}

代码如下：

阅读全文 »

发表于 | 阅读次数:

前言


最近做的一个页面跳转碰到一个问题就是我点击跳转的第一次没有传到值，再点击第二次的时候才有值，很是奇怪，研究了一下watch的一些相关属性。

immediate属性


发现watch的一个特点是最初绑定的时候不执行改变即第一次直接赋值不会监听到，这里需要用到immediate属性，默认值为false,我们需要这样写immediate：true,即立刻执行。

deep属性


watch的另一个属性是deep,默认值为false,代表是否深度监听，设置deep:true,意思就是深入观察，监听器会一层层的往下遍历，给对象的所有属性都加上这个监听器，但是这样开销性能就会非常大了，任何修改对象里面的一个属性都会触发这个监听器里的handler。优化方法就是像我下面的代码一样使用字符串形式监听。

注销watch


为什么要注销 watch？因为我们的组件是经常要被销毁的，比如我们跳一个路由，从一个页面跳到另外一个页面，那么原来的页面的 watch 其实就没用了，这时候我们应该注销掉原来页面的 watch 的，不然的话可能会导致内置溢出。好在我们平时 watch 都是写在组件的选项中的，他会随着组件的销毁而销毁。

const app = new Vue({
template: ‘
‘,
data: {
text: 0
},
watch: {
text(newVal, oldVal){
console.log(${newVal} : ${oldVal});
}
}
});
但是，如果我们使用下面这样的方式写 watch，那么就要手动注销了，这种注销其实也很简单

const unWatch = app.$watch(‘text’, (newVal, oldVal) => {
console.log(${newVal} : ${oldVal});
})

unWatch(); // 手动注销watch
由于我这个currentNavigation是写在store.js里的,所以在页面时需要计算赋值给它。

实现代码：

store.js

currentNavigation: {            // 当前页面信息
  name: '首页',
  id: 'home',
  componentName: 'appHome'
},

页面.vue

computed: {
    currentNavigation () {
      return this.$store.state.currentNavigation
    }
  },

watch: {
    'currentNavigation.param': {
      immediate: true,
      deep: true,
      handler (val, oldVal) {
        if (!Utils.isEmptyData(val) && oldVal !== val) {
          this.handleRouteParam() // 处理路由跳转后的页面渲染数据
        }
      }
    }
}

发表于 | 阅读次数:

想要异步判断某一项数据是否已经存在的时候，由于我是写在表单中的，这个时候需要监听表单对象
实现方法： 

<el-form label-width="150px" label-position="right" :inline="true" :model="addForm" :rules="addRuleForm">
      <el-form-item label="业务代码：" prop="code">
        <el-input v-model="addForm.code"></el-input>
      </el-form-item>
</el-form>

方法1：只监听一个数据

watch: {
    'addForm.code' (val) {
      console.log(val)      
    }  
}

方法2：监听整个对象

watch: {
    addForm: {
      deep: true,
      handler (val) {
        if (val) {
          this.addForm.parentId = val.moduleId
        }
      }
    }
}

方法三：实现输入框回馈信息
效果图：

 validBusinessCode (rule, value, callback) {
  if (value) {
    this.checkCodeing = true
    if (this.auto) clearTimeout(this.auto)
    this.auto = setTimeout(() => {
      businessDefManagerApi.validBusinessCode(value).then(res => {
        this.checkCodeing = false
        if (res.status === 0 && res.data.isExist) {
          callback()
        } else {
          callback(new Error('业务代码已存在'))
        }
      })
    }, 500)
  } else {
    if (this.auto) clearTimeout(this.auto)
    this.checkCodeing = false
    callback()
  }
},