import { nextTick } from "vue";
|
|
|
|
//+++++++++++++++++++++++++++++++++++++++++++++++++++++++++
|
//自定义指令
|
//+++++++++++++++++++++++++++++++++++++++++++++++++++++++++
|
//dialog
|
export const dialogdrag = (el) => {
|
const dialogHeaderEl = el.querySelector('.el-dialog__header');
|
const dragDom = el.querySelector('.el-dialog');
|
|
dialogHeaderEl.style.cursor = 'move';
|
const dragDomCurrentStyle = dragDom.currentStyle || window.getComputedStyle(dragDom, null);
|
|
dialogHeaderEl.onmousedown = (e) => {
|
//鼠标坐标
|
const mouseXAxis = e.clientX;
|
const mouseYAxis = e.clientY;
|
|
//鼠标坐标
|
const dialogHeaderElXAxis = dialogHeaderEl.offsetLeft;
|
const dialogHeaderElYAxis = dialogHeaderEl.offsetTop;
|
|
const originalDialogHeaderElXAxis = mouseXAxis - dialogHeaderElXAxis;
|
const originalDialogHeaderElYAxis = mouseYAxis - dialogHeaderElYAxis;
|
|
//获取浏览器宽度
|
const screenWidth = document.body.clientWidth;
|
const screenHeight = document.documentElement.clientHeight;
|
|
//获取窗体大小
|
const dragDomWidth = dragDom.offsetWidth;
|
const dragDomHeight = dragDom.offsetHeight;
|
|
//获取窗体偏移量
|
const originalDragDomXAxis = dragDom.offsetLeft;
|
const originalDragDomYAxis = dragDom.offsetTop;
|
|
//获取窗体最大偏移量
|
const maxDragDomLeft = screenWidth - originalDragDomXAxis - dragDomWidth;
|
const maxDragDomTop = screenHeight - originalDragDomYAxis - dragDomHeight;
|
|
//处理窗体样式
|
let dragDomCurrentStyleL, dragDomCurrentStyleT;
|
if (dragDomCurrentStyle.left.includes('%')) {
|
dragDomCurrentStyleL = +document.body.clientWidth * (+dragDomCurrentStyle.left.replace(/\%/g, '') / 100);
|
dragDomCurrentStyleT = +document.body.clientHeight * (+dragDomCurrentStyle.top.replace(/\%/g, '') / 100);
|
} else {
|
dragDomCurrentStyleL = +dragDomCurrentStyle.left.replace(/px/g, '');
|
dragDomCurrentStyleT = +dragDomCurrentStyle.top.replace(/px/g, '');
|
}
|
|
document.onmousemove = function (e) {
|
let targetMoveXAxis = e.clientX - originalDialogHeaderElXAxis;
|
let targetMoveYAxis = e.clientY - originalDialogHeaderElYAxis;
|
|
dragDom.style.left = `${targetMoveXAxis + dragDomCurrentStyleL}px`;
|
dragDom.style.top = `${targetMoveYAxis + dragDomCurrentStyleT}px`;
|
}
|
|
document.onmouseup = function (e) {
|
document.onmousemove = null;
|
document.onmouseup = null;
|
}
|
}
|
}
|
|
|
export const prefixDirective = {
|
mounted: function(el, binding) {
|
const prefix = binding.value;
|
const input = el.querySelector('input');
|
|
if (input) {
|
// 使用span元素包裹前缀
|
const span = document.createElement('span');
|
span.style.userSelect = 'none';
|
span.textContent = prefix;
|
// 插入到input前面
|
el.insertBefore(span, input);
|
}
|
}
|
};
|
|
|
export const thousandsDirective = {
|
mounted: function (el, binding) {
|
// 获取数字输入框
|
const numberInput = el.getElementsByTagName('input')[0];
|
// 创建一个新的 el-input 元素用来展示格式化后的值
|
const textInput = document.createElement('input');
|
textInput.type = 'text';
|
textInput.autocomplete = 'off';
|
textInput.classList.add('el-input__inner');
|
// 把创建的元素插入到数字框后
|
numberInput.insertAdjacentElement('afterend', textInput);
|
// 默认效果
|
textInput.style.display = 'block';
|
numberInput.style.display = 'none';
|
// 文本框聚焦时显示原来数字类型框
|
textInput.onfocus = (e) => {
|
textInput.style.display = 'none';
|
numberInput.style.display = 'block';
|
// 等待数字框加载成功时聚焦数字框
|
nextTick(() => {
|
numberInput.focus();
|
});
|
};
|
// 数字框失焦时显示格式化后的值
|
numberInput.onblur = (e) => {
|
numberInput.style.display = 'none';
|
textInput.style.display = 'block';
|
};
|
},
|
updated: function (el, binding) {
|
// debugger
|
// 数据改变时格式化赋值到隐藏的文本框
|
if (el.tagName.toLocaleUpperCase() !== 'INPUT') {
|
const numberInput = el.getElementsByTagName('input')[0];
|
const textInput = el.getElementsByTagName('input')[1];
|
// 同步禁用状态
|
const parentClass = el.classList.value;
|
if (parentClass.includes('is-disabled')) {
|
textInput.setAttribute('disabled', true);
|
} else {
|
textInput.removeAttribute('disabled');
|
}
|
// 千分位格式化
|
const valueWithoutComma = numberInput.value.replace(/,/g, ''); // 去除千分号的','
|
if (valueWithoutComma) {
|
// 转换为浮点数
|
const floatValue = parseFloat(valueWithoutComma);
|
// 格式化为千分位
|
textInput.value = floatValue.toLocaleString('zh', {
|
minimumFractionDigits: 2,
|
maximumFractionDigits: 2,
|
});
|
} else {
|
textInput.value = '';
|
}
|
}
|
}
|
};
|
