20251222

AdminPanel/plugins/utils/dom/cursor.js

@@ -0,0 +1,65 @@
+/**
+
+ * 获取当前光标位置 返回表示位置的索引（number）以0开头
+
+ * @param ctrl
+
+ * @returns {number}
+
+ */
+
+export function getCursorPosition(element) {
+
+    var CaretPos = 0;
+
+    if (document.selection) {//支持IE
+
+        element.focus();
+
+        var Sel = document.selection.createRange();
+
+        Sel.moveStart('character', -element.value.length);
+
+        CaretPos = Sel.text.length;
+
+    }
+
+    else if (element.selectionStart || element.selectionStart == '0')//支持firefox
+
+        CaretPos = element.selectionStart;
+
+    return (CaretPos);
+
+}
+
+export function insertAtCursor(myField, myValue) {
+
+    //IE 浏览器 
+    if (document.selection) {
+        myField.focus();
+        sel = document.selection.createRange();
+        sel.text = myValue;
+        sel.select();
+    }
+
+    //FireFox、Chrome等 
+    else if (myField.selectionStart || myField.selectionStart == '0') {
+        var startPos = myField.selectionStart;
+        var endPos = myField.selectionEnd;
+
+        // 保存滚动条 
+        var restoreTop = myField.scrollTop;
+        myField.value = myField.value.substring(0, startPos) + myValue + myField.value.substring(endPos, myField.value.length);
+
+        if (restoreTop > 0) {
+            myField.scrollTop = restoreTop;
+        }
+
+        myField.focus();
+        myField.selectionStart = startPos + myValue.length;
+        myField.selectionEnd = startPos + myValue.length;
+    } else {
+        myField.value += myValue;
+        myField.focus();
+    }
+}

AdminPanel/plugins/utils/dom/dom.js

@@ -0,0 +1,313 @@
+/**
+ * 简单版对dom的封装
+ * 初始化一个myDom对象
+ * 通过类、id、以及dom元素创建
+ * 可以获取所有子节点、父节点、第一个子节点、最后一个子节点、上一个兄弟节点、下一个兄弟节点
+ * 判断元素类型
+ * 获取文本
+ * 获取元素的坐标、宽高
+ * 设置元素的坐标、宽高
+ * 设置样式
+ * 复制元素
+ * 返回真正的dom元素
+ * 获取所有父亲节点
+ * 获取指定类型的父节点
+ * 获取所有子节点
+ * 获取自定类型的子节点
+ */
+
+/**
+ * 获取dom元素
+ * @param {*} 参数 ,可以接受dom元素或者id(id必须带#号)
+ */
+export function $(el) {
+    //id选择器
+    if (typeof el == 'object') {
+        return new Dom(el);
+    } else if (typeof el == 'string') {
+        let dom = document.getElementById(el);
+        return dom ? new Dom(dom) : null;
+    } else {
+        console.warn(`Dom：传入的字符串不符合要求${el}`);
+    }
+
+    return null;
+}
+
+export class Dom {
+    constructor(el) {
+        this._el = el;
+    }
+    /**
+     * 获取元素内的所有文本内容
+     */
+    getTexts() {
+        let result = [];
+        const callback = (el) => {
+            let arr = [...el.childNodes];
+            arr.filter(item => item.nodeType == 3).forEach(item => result.push(item.nodeValue))
+            arr.filter(item => item.nodeType == 1).forEach(item => callback(item));//遍历所有元素的子节点
+        }
+        callback(this._el);
+        return result;
+    }
+
+    /**
+     * 获取标签内第一个文本，没有返回空
+     * @returns 
+     */
+    getText() {
+        let texts = this.getTexts();
+        return texts.length > 0 ? texts[0] : ''
+    }
+
+    /**
+     * 获取元素的高
+     */
+    getHeight() {
+        return this._el.offsetHeight;
+    }
+
+    /**
+     * 获取元素的宽
+     */
+    getWidth() {
+        return this._el.offsetWidth;
+    }
+
+    get left() {
+        return this.getLeft();
+    }
+
+    get top() {
+        return this.getTop();
+    }
+
+    get width() {
+        return this._el.offsetWidth;
+    }
+
+    get height() {
+        return this._el.offsetHeight;
+    }
+
+    get bottom() {
+        return this.top + this.height;
+    }
+
+    get right() {
+        return this.left + this.width;
+    }
+
+    /**
+     * 获取元素的left坐标
+     */
+    getLeft() {
+        const callback = (e) => {
+            return e.offsetParent != null ? e.offsetLeft + callback(e.offsetParent) : e.offsetLeft
+        }
+        return callback(this._el)
+    }
+
+    /**
+     * 获取元素的顶点坐标
+     */
+    getTop() {
+        const callback = (e) => {
+            return e.offsetParent != null ? e.offsetTop + callback(e.offsetParent) : e.offsetTop
+        }
+        return callback(this._el)
+    }
+
+    /**
+     * 获取坐标，包含4个点以及宽高
+     * @returns 
+     */
+    getPosition() {
+        return {
+            left: this.getLeft(),
+            top: this.getTop(),
+        }
+    }
+
+    /**
+     * 设置样式，直接合并css的样式对象
+     * @param {*} option 
+     */
+    setStyle(option) {
+        Object.assign(this._el.style, option);
+    }
+
+    addUnit(val, unit = 'px') {
+        // return unit ? val + unit : val;
+        return val + unit;
+    }
+
+    /**
+     * 设置坐标
+     * @param {*} val 左坐标位置
+     * @param {*} unit 默认单位为px，如果不用则，需要传递null
+     */
+    setLeft(val, unit = 'px') {
+        this.setStyle({ left: this.addUnit(val, unit) })
+    }
+
+    /**
+     * 设置顶坐标
+     * @param {*} val 
+     * @param {*} unit 
+     */
+    setTop(val, unit = 'px') {
+        this.setStyle({ top: this.addUnit(val, unit) })
+    }
+
+    /**
+     * 设置宽度
+     * @param {*} val 
+     * @param {*} unit 
+     */
+    setWidth(val, unit = 'px') {
+        this.setStyle({ width: this.addUnit(val, unit) })
+    }
+
+    setHeight(val, unit = 'px') {
+        this.setStyle({ height: this.addUnit(val, unit) })
+    }
+
+    setSize(width, height, unit = 'px') {
+        this.setStyle({
+            width: this.addUnit(width, unit),
+            height: this.addUnit(height, unit),
+        })
+    }
+
+    /**
+     * 设置元素位置
+     * @param {*} left 
+     * @param {*} top 
+     * @param {*} unit 单位，默认为px
+     */
+    setPosition(left, top, unit = 'px') {
+        this.setStyle({
+            left: this.addUnit(left, unit),
+            top: this.addUnit(top, unit)
+        })
+    }
+
+    /**
+     * 克隆元素
+     * @param {*} deep 
+     * @returns 
+     */
+    clone(deep = true) {
+        let el = this._el.cloneNode(deep);//克隆元素
+        return new Dom(el);
+    }
+
+    /**
+     * 移除元素
+     */
+    remove() {
+        this._el.remove();
+    }
+
+    /**
+     * 返回原本的dom元素
+     * @returns 
+     */
+    getElement() {
+        return this._el;
+    }
+
+    /**
+     * 获取封装一层的子元素
+     */
+    childNodes() {
+        return [...this._el.childNodes].map(item => new Dom(item))
+    }
+
+    parentNode() {
+        return new Dom(this._el.parentNode)
+    }
+
+    firstChild() {
+        return new Dom(this._el.firstChild);
+    }
+
+    lastChild() {
+        return new Dom(this._el.lastChild)
+    }
+
+    nextSibling() {
+        return new Dom(this._el.nextSibling)
+    }
+
+    previousSibling() {
+        return new Dom(this._el.previousSibling)
+    }
+
+    /**
+     * 是否是标签元素
+     * @returns 
+     */
+    isElement() {
+        return this._el.nodeType == 1;
+    }
+
+    /**
+     * 获取第一个指定标签的元素
+     * @param {*} name 标签名字
+     */
+    firstParentByName(name) {
+        name = name.toUpperCase();//转大写
+        const callback = (el) => {
+            let parent = el.parentNode;
+            if (parent.nodeName == 'BODY')
+                return null;
+
+            if (parent.nodeName == name)
+                return new Dom(parent)
+            return callback(parent);
+        }
+
+        return callback(this._el);
+    }
+
+    firstChildByName(name) {
+        name = name.toUpperCase();//转大写
+        const callback = (el) => {
+            let childs = el.childNodes;
+            if (childs.length == 0)
+                return null;
+
+            for (let i = 0; i < childs.length; i++) {
+                const item = childs[i];
+                if (item.nodeName == name)
+                    return new Dom(item)
+            }
+
+            for (let i = 0; i < childs.length; i++) {
+                const item = childs[i];
+                if (item.childNodes.length > 0)
+                    return callback(item)
+            }
+            return null;
+        }
+
+        return callback(this._el);
+    }
+
+    getNodeName() {
+        return this._el.nodeName;
+    }
+
+    /**
+     * 全选
+     */
+    select() {
+
+        // console.log(this._el);
+        this._el.focus();
+        this._el.select();
+    }
+}

AdminPanel/plugins/utils/dom/index.js

@@ -0,0 +1,113 @@
+/**
+ * 获取元素坐标
+ * @param {*} params 
+ */
+export function getRefPosition(e) {
+    return { left: getLeft(e), top: getTop(e) };
+}
+
+export function getTop(e) {
+    var offset = e.offsetTop;
+    if (e.offsetParent != null) offset += getTop(e.offsetParent);
+    return offset;
+}
+
+export function getLeft(e) {
+    var offset = e.offsetLeft;
+    if (e.offsetParent != null) offset += getLeft(e.offsetParent);
+    return offset;
+}
+
+export function getHeight(id) {
+    let dom = document.getElementById(id);
+    return dom.offsetHeight;
+}
+
+export function getWidth(id) {
+    let dom = document.getElementById(id);
+    return dom.offsetWidth;
+}
+export function getClientHeight(id) {
+    let dom = document.getElementById(id);
+    return dom.clientHeight;
+}
+
+export function getClientWidth(id) {
+    let dom = document.getElementById(id);
+    return dom.clientWidth;
+}
+
+export function getWindowsHeight(param) {
+    return document.body.clientHeight
+}
+
+export function getWindowsWidth(param) {
+    return document.body.clientWidth
+}
+
+/**
+ * 教程菜单位置，保证菜单出现的位置不超出不可见区域
+ * @param {*} e 
+ * @param {*} menuId 
+ * @returns 
+ */
+export function correctMenuPosition(e, menuId) {
+    let winHeight = getWindowsHeight();
+    let height = getHeight(menuId);
+
+    let winWidth = getWindowsWidth();
+    let windth = getWidth(menuId);
+
+    let top = (height + e.clientY) > winHeight ? winHeight - height : e.clientY;
+
+    let left = (windth + e.clientX) > winWidth ? winWidth - windth : e.clientX;
+    return { top, left: left + 5 }
+}
+
+/**
+ * 设置id的元素选择
+ * @param {*} id 
+ */
+export function setInputSelect(id, time = 0) {
+    let count = 0;
+    const callbcak = () => {
+        let dom = document.getElementById(id);
+        if (!dom) {
+            count += 1;
+            if (count > 50) return
+            return setTimeout(callbcak, 50);
+        }
+        dom.select();
+        dom.focus()
+    }
+    time == 0 ? callbcak() : setTimeout(callbcak, 50);
+}
+
+export function setFoucs(id, time = 0) {
+    setTimeout(() => {
+        let dom = document.getElementById(id);
+        dom.focus()
+    }, time);
+}
+
+
+
+/**
+ * 获取dom元素位置
+ * @param {*} e 
+ * @returns 
+ */
+export function getPosition(e) {
+    var evt = e || event;
+    return { x: evt.clientX, y: evt.clientY }
+}
+
+/**
+ * 根据id获取元素的位置
+ * @param {*} elementId 
+ * @returns 
+ */
+export function getPostionById(elementId) {
+    var el = document.getElementById(elementId);
+    return getRefPosition(el);
+}