1. 90前端首页
  2. 前端开发
  3. JavaScript

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

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
}); // 参数一:要验证的对象、参数二:回调函数

本文来自网络整理,转载请注明原出处:https://segmentfault.com/a/1190000021650137

展开阅读全文

发表评论

登录后才能评论