vue-directive-bb

vue-directive-bb

vue后台常用指令，其实自定义指令非常简单，这其实就是js原生； 当你走过一条陌生的路后，再走一遍，内心由惊恐害怕变成欢喜激动。 万事懂原理，框架的实现过程是把简单的复杂化，框架的理解过程是把复杂的简单化。

vue input 数字指令

• v-input-number 整数
• v-input-number.float 浮点数
• v-input-number.float="2" 保留2位浮点数

<el-input v-input-number.float size="mini" v-model="location.kilometre"></el-input>

bug

• 饿了么表单校验存在问题
• 解决方案

// 计算属性
price: [
         {
           required: true,
           message: '请填写商品价格',
           validator: this.validatePrice,
           trigger: 'blur'
         }
       ]
  
// 校验函数
validatePrice(rule, value, callback) {
     if (typeof value === 'number') {
       callback();
     } else {
       value = value.replace(/[a-zA-Z]/g, '');
       this.productForm.price = value; // 重点
     }
     if (!value) {
       callback(new Error('商品价格'));
     } else {
       callback();
     }
   },

vue 时间戳格式化 （ant design数据格式规范）

<div class="time tr vc fs12" v-time="1615259980998"></div> 渲染成 -> 03-09 11:20

vue 缩略隐藏鼠标悬浮提示

1、跟目录新增节点

 <div class="custome-popover" style="position: absolute;display: none; padding: 4px;line-height:20px;font-size: 12px;border: 1px solid #999;background: #fff; z-index:9999;"></div>

2、全局范围新增样式

.toel{
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

3、使用

<div :title="'超长内容超长内容超长内容'" v-omit-popover class="toel">{{超长内容超长内容超长内容}}</div>