数字的精度的控制 和自定义指令

JS是没有类的概念的,把JS中的构造函数看做的类
所以说类式继承也是一种针对构造函数来做继承的一种方式

将父类创建出来的对象赋值给子类的原型,就是类式继承

改变el-popover的触发方式

<el-popover
                    placement="top"
                    v-model="jumpble"
                    trigger="manual"
                    @show="forhide"
                    content="至少填写一个KR的复盘总结"
                    >
                    <el-button type="primary" @click="addReplaySubmit" slot="reference">确 定 </el-button>
                </el-popover>
                
                
                
  self.jumpble = true
            self.stageSummaries.forEach(item => {
                if (item.summary) {
                    self.jumpble = false
                } 
            })
            if (self.jumpble) {
                return 
            }            
            
            // 隐藏
        forhide () {
            const self = this
            setTimeout(function () {
                self.jumpble = false
            }, 1000)
        },
            
                

文字强制换行

word-wrap: break-word;
word-break: break-all;

把代码中的换行换成br标签

showText (data) {
            return data.replace(/\n/g, '<br />')
        },

小数点的精度控制

/**
 * 浮点型数据转换为百分比显示
 * @param {*} value 
 */
const progressFloatToPercentage = (value, decimal = 3) => {
    if (value && !isNaN(parseFloat(value))) {
        let showValue = 0;
        let num = value.toString()
        let index = num.indexOf('.')
        if (index !== -1) {
            num = num.substring(0, decimal + index + 1)
        } else {
            num = num.substring(0)
        }
        //showValue = parseFloat(num * 100);
        showValue = parseFloat((num * 100).toFixed(2))
        return showValue + '%';
    } else {
        value = '0%'
    }
    return value
}
const progressFloatToPercentageNoLog = (value, decimal = 3) => {
    if (value && !isNaN(parseFloat(value))) {
        let showValue = 0;
        let num = value.toString()
        let index = num.indexOf('.')
        if (index !== -1) {
            num = num.substring(0, decimal + index + 1)
        } else {
            num = num.substring(0)
        }
        // showValue = parseFloat(num * 100);
        showValue = parseFloat((num * 100).toFixed(2))
        return showValue;
    }
    return value
}
const tableProgressTrans = (value, decimal = 3) => {
    if (!value) {
        return '0%';
    }
    let reValue = progressFloatToPercentageNoLog(value, decimal);
    return reValue + '%';
}
export default {
    progressFloatToPercentage,
    progressFloatToPercentageNoLog,
    tableProgressTrans
};

自定义事件

const clickoutsideObj = { // 初始化指令
    bind (el, binding, vnode) {
        function documentHandler (e) {
            // 这里判断点击的元素是否是本身，是本身，则返回
            if (el.contains(e.target)) {
                return false;
            }
            // 判断指令中是否绑定了函数
            if (binding.expression) {
                // 如果绑定了函数 则调用那个函数，此处binding.value就是handleClose方法
                binding.value(e);
            }
        }
        // 给当前元素绑定个私有变量，方便在unbind中可以解除事件监听
        el.__vueClickOutside__ = documentHandler;
        document.addEventListener('click', documentHandler);
    },
    update () {},
    unbind (el, binding) { // 解除事件监听
        document.removeEventListener('click', el.__vueClickOutside__);
        delete el.__vueClickOutside__;
    }
}
export default {
    install: (Vue) => {
        Vue.directive('clickoutside', clickoutsideObj);
    }
};


index.js

import permission from './permission';
import loadmore from './loadmore';
import clickoutside from './clickoutside';

export default {
    permission,
    loadmore,
    clickoutside
};


在man中引入


<div class="update-content" v-clickoutside="directiveDialogChange">

directiveDialogChange () {
            if (this.cursorEditFlag || this.confirmFlag) {
                this.cursorEditFlag = false
                this.drawer = true
                return
            }
            this.drawer = false
        },

@input 一般用于监听事件

只要输入的值变化了就会触发input

async-validator是一个表单的异步验证的第三方库

也是elementUI中的form组件所使用的验证方式,
基本用法包括定义一个descriptor，将其分配给schema，并将要验证的对象和回调函数传递给schema创建出来的validator的validate方法：

// 基本用法
var schema = require('async-validator'); // 引用组件
var descriptor = {
 name: {
  type: "string",
  required: true,
  validator: (rule, value) => value === 'muji',
 }
}; // 定义一个descriptor
var validator = new schema(descriptor); // descriptor分配给schema，创建一个validator
validator.validate({name: "muji"}, (errors, fields) => {
 if(errors) {
  // validation failed, errors is an array of all errors
  // fields is an object keyed by field name with an array of
  // errors per field
 return handleErrors(errors, fields);
 }
  // validation passed
}); // 参数一：要验证的对象、参数二：回调函数