[ 项目实战——emos在线办公系统：会议申请、请假申请等部分代码理解（1）

哈喽哈喽，这里是小菜不拖延博主！

trigger

1.tigger:'blur'：校验文本框是否为空

2.tigger:'changer':手动选择的东西，就用change

distinguishCancelAndClose

关于弹窗是点击空白关闭还是自定义关闭，如果是true就是点击空白关闭

element-ui组件

message box组件

效果：

调用$prompt方法即可打开消息提示，它模拟了系统的 prompt。可以用inputPattern字段自己规定匹配模式，或者用inputValidator规定校验函数，可以返回Boolean或String，返回false或字符串时均表示校验未通过，同时返回的字符串相当于定义了inputErrorMessage字段。此外，可以用inputPlaceholder字段来定义输入框的占位符。

<template>
  <el-button type="text" @click="open">点击打开 Message Box</el-button>
</template>
 
<script>
  export default {
    methods: {
      open() {
        this.$prompt('请输入邮箱', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          inputPattern: /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/,
          inputErrorMessage: '邮箱格式不正确'
        }).then(({ value }) => {
          this.$message({
            type: 'success',
            message: '你的邮箱是: ' + value
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '取消输入'
          });       
        });
      }
    }
  }
</script>

标签大小写区分

在html当中是不区分大小写的，标签名使用大写或者小写都能达到一样的效果

that.$emit('refresh')

就是相当于触发一个叫做refresh的事件

this.$nextTick(()=>{}

this.$nextTick()将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它，然后等待 DOM 更新。

this.$refs

ref 有三种用法：　　1、ref 加在普通的元素上，用this.$refs.（ref值）获取到的是dom元素

　　2、ref 加在子组件上，用this. $refs.（ref值）获取到的是组件实例，可以使用组件的所有方法。在使用方法的时候直接this.$ refs.（ref值）.方法（）就可以使用了。

.resetFields()

restFields()方法说明：对整个表单进行重置，将所有字段值重置为初始值并移除校验结果。

使用：例如

that.$refs['dataForm'].resetFields(); 就是把ref为dataForm重置

el-dialog标签的属性——:close-on-click-modal="false"

他的含义是：点击空白处是否关闭

scope.row.reason\

scope.row相当于一个{},{}里边都是数据；按理说，列表里的数据是要供给表单展示，列表中的每个{}都是结构一样的，或者理解为包含的数据项相同。

例如（{"tomasfeng":"我是Tomas"，"id":"1"}，{"tomasfeng":"我是FH","id":"2"} ）,包含相同的tomasfeng和id的key

所以：scope.row.tomasfeng表示就是这个{}中的tomasfeng属性值。

[ 项目实战——emos在线办公系统：会议申请、请假申请等部分代码理解（1） | 青训营笔记]