# vue directive -- 案例合集
# input 默认输入数字
# 备注: 传入特定参数 可输入 中英文
import Vue from 'vue';
// 根据参数设置是否可首位为 0 , 是否可输入英文
Vue.directive('enterIntNumber', {
inserted: function (el, binding) {
let expression = binding.value || {};
let trigger = (el, type) => {
const e = document.createEvent('HTMLEvents');
e.initEvent(type, true, true);
el.dispatchEvent(e);
};
el.addEventListener('keyup', function (e) {
let input = e.target;
// let reg = new RegExp("^\\d{1}\\d*$"); //正则验证是否是数字
let reg = /^([0-9])+$/; //正则验证是否是数字
let correctReg = /^([0-9])*/; //正则获取是数字的部分
if (expression.en) {
//支持字母
reg = /^[A-Za-z0-9]+$/;
correctReg = /^[A-Za-z0-9]*/;
}
let matchRes = input.value.match(reg);
if (matchRes === null) {
//若不是纯数字 把纯数字部分用正则获取出来替换掉
let correctMatchRes = input.value.match(correctReg);
if (correctMatchRes) {
input.value = correctMatchRes[0];
} else {
if (!expression.zero) {
input.value = '';
}
}
} else if (matchRes[0] == 0) {
if (!expression.zero) {
input.value = '';
}
}
trigger(input, 'input');
});
},
});
// === template
// 允许输入中英文 // zero中文 en英文
<el-input v-model="params.v_no" v-enterIntNumber:map="{ zero: true, en: true }" placeholder="请输入会员编号(数字或字母)"></el-input>;
// 或 禁止中文输入
<el-input v-model="params.v_no" v-enterIntNumber placeholder="请输入数字"></el-input>;
// 或 数字输入框 禁止输入
<el-input-number v-model="params.v_no" :min="0" :max="999" size="small" v-enterIntNumber ></el-input-number>
# input 只能输入数字
import Vue from 'vue';
Vue.directive('enterNumberPoint2', {
componentUpdated: function (el, binding) {
let expression = binding.value || {};
let trigger = (el, type) => {
const e = document.createEvent('HTMLEvents');
e.initEvent(type, true, true);
el.dispatchEvent(e);
};
el.addEventListener('keyup', function (e) {
let input = e.target;
let num = isNaN(expression.num) ? 2 : expression.num;
let reg = new RegExp(`^((?:(?:[1-9]{1}\\d*)|(?:[0]{1}))(?:\\.(?:\\d){0,${num}})?)(?:\\d*)?$`); //正则验证是否是数字(小数整数均可)
let matchRes = input.value.match(reg);
if (matchRes === null) {
input.value = '';
} else {
//matchRes[0]是匹配的无限位的小数
if (matchRes[1] !== matchRes[0]) {
input.value = matchRes[1];
}
}
trigger(input, 'input');
});
},
});
// === template
<el-input v-model="params.v_no" v-enterNumberPoint2 placeholder="请输入数字"></el-input>;
# 表格高度自适应
# 备注: 控制好底部距离
import Vue from 'vue';
/**
*
* @param {*} el
* @param {*} binding
* binding.value 格式为 {
* table: $refs.table, // 表格对象
* topHeight: 140 // 表格顶边 距离顶部高度，默认值为 140
* footerHeight: 120 // 表格底部 距离底部高度，默认值为 120
* }
* @param {*} vnode
* @param {*} oldVnode
*/
Vue.directive('table-height-adaptive', {
update(el, binding) {
let topHeight = binding.value.topHeight ? binding.value.topHeight : 0;
let footerHeight = binding.value.footerHeight ? binding.value.footerHeight : 0;
let minHeight = binding.value.minHeight ? binding.value.minHeight : 400;
let isMyTable = binding.value.isMyTable;
let table = binding.value.table;
if (isMyTable) {
const index = table.$children.length - 1;
table = table.$children[index];
}
const px32 = 96; //表格外层加入了padding上下16px；
let tableHeight = window.innerHeight - el.offsetTop - footerHeight - topHeight - px32;
let finalHeight = tableHeight > minHeight ? tableHeight : minHeight;
table.layout && table.layout.setHeight(finalHeight);
table.doLayout && table.doLayout();
// 监听窗口大小变化
window.addEventListener('resize', () => {
tableHeight = window.innerHeight - el.offsetTop - footerHeight - topHeight - px32;
let finalHeight = tableHeight > minHeight ? tableHeight : minHeight;
table.layout && table.layout.setHeight(finalHeight);
table.doLayout && table.doLayout();
});
},
});
// === template
<el-table :data="list" ref="multipleTable" stripe height="450" v-table-height-adaptive="{ table: $refs.multipleTable, footerHeight: 68, topHeight: 0 }" > </el-table>
// 备注: 若是 底部没有 el-pagination 表格上部没有 自定义行内容, 只有一个显示的表格 设置 footerHeight: 0, topHeight: 0
# 颜色区别化: 数值 >0 或 <0
/**
*
* @param {*} el
* @param {*} binding
* binding.value 格式为 {
* value: Number, // 要判断的值
* positive: true/false // >0 的数是否要有颜色
* }
* @param {*} vnode
* @param {*} oldVnode
*/
Vue.directive('colors', (el, binding) => {
let value = binding.value.value;
if (!Number(value) && value != 0) return;
if (!value) return;
if (+value <= 0) el.style.color = '#ff5151';
else {
if (!binding.value.positive) el.style.color = '#34c635';
}
});
// === template
// > 0 但无颜色
<div class="col f1" v-colors="{ value: 1 }">¥ 1</div>
// 或 > 0 有颜色
<div class="col f1" v-colors="{ value: 1, positive:true }">¥ 1</div>
// 或 < 0
<div class="col f1" v-colors="{ value: -1 }">¥ -1</div>