记录最近遇到的一些坑

记录最近遇到的一些坑

input使用的坑

input使用为type='number',初始定义为null。输入值没问题,当手动删除后成了空字符串。(ps:el-input也是如此)

<template>
  <div>
    <input type="number" v-model.number="count" />
    {{countType}}
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 0,
    };
  },
  computed:{
    countType(){
      return typeof this.count
    }
  },
  methods: {
    addCount() {
      this.count += 1;
    },
  },
};
</script>

解决方案

定义个全局指令当需要使用type='number'的input时加上指令

import Vue from "vue";
Vue.directive("null-if-empty", {
  bind(el, binding, vnode) {
    el.addEventListener("input", function (e) {
      let value = e.target.value;
      vnode.componentInstance.$emit("input", value === "" ? null : value);
    });
  },
});

el-form表单自动验证

**领导提了一个需求。一百多个输入、选择控件的表单要在输入完所有验证消息后自动弹出确定提交框。 当时心里就是一万只羊驼在奔走，这不得让我写麻了。

解决方案

<template>
<el-form  @validate="validate"></el-form>
</template>
export default {
    methods:{
        validate() {
            let valid = true;
            Object.keys(this.rules).forEach((key) => {
                let keyArr = key.split(".");
                let a = keyArr[0];
                let b = keyArr[1];
                if (
                a &&
                b &&
                (this.form[a][b] === null ||
                    this.form[a][b] === undefined ||
                    this.form[a][b] === "")
                ) {
                valid = false;
                }

                if (
                !b &&
                a &&
                (this.form[a] === null ||
                    this.form[a] === undefined ||
                    this.form[a] === "")
                ) {
                valid = false;
                }
            });
            if (valid) {
                this.$confirm("信息已填写完整,是否确定提交？", "提示", {
                confirmButtonText: "是",
                cancelButtonText: "否",
                type: "warning",
                }).then(() => {
                let api = ***;
                api(params).then((res) => {
                    if (res.data.result) {
                    this.$emit("close", true);
                    } else {
                    this.$message.warning(res.data.message);
                    }
                });
                });
            }
            },
    }
}