vue-directive-bb v2.1.4

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数据格式规范）

  时间	展示形式
  1 分钟以内的时间	刚刚
  1 小时以内的时间	N 分钟前
  24 小时以内的时间	N 小时前
  24 小时以外的时间	用 mm-dd HH:mm 的形式表示，即 12-08 08:00
  超过一年的时间	用 yyyy-mm-dd HH:mm 的形式表示，即 2019-12-08 08:00

<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>