如何更新popper.js元素的x / y位置？

Question

如何移動popper.js元素以遵循特定的coords？

我能夠得到（我認為）在textarea中的插入位置，但現在我需要讓Popper.js遵循它。

我在根和修飾符上嘗試，更新和onUpdate。 我完全不懂文檔。

我創建了一個codepen來展示我到目前為止能夠實現的目標：

https://codepen.io/anon/pen/gzGvvG

const refEl = document.getElementById('ref');
const popEl = document.getElementById('pop');

new Popper(refEl, popEl, {
  placement: 'auto',

            modifiers: {
                offset: {
                    enabled: true,
                    offset: '0,10'
                },
                flip: {
                    behavior: ['left', 'bottom', 'top']
                },
                preventOverflow: {
                    enabled: true,
                    padding: 10,
                    escapeWithReference: false,
                }
            },
});

document.getElementById("ref").onkeyup = function() {
  var xy = getCursorXY(refEl, refEl.selectionEnd)

  document.getElementById("log").innerText = `X: ${xy.x}, Y: ${xy.y}`;
}

我從Medium獲得的getcursorXY函數： https ： getcursorXY

Answer 1

這不是你的問題的完整答案......因為它需要一些調整才能使它像我認為你試圖讓它工作一樣。 但是，這是我從你的CodePen修改的javascript，相信這是你想要實現的目標的正確方向。

    const refEl = document.getElementById('ref');
    const popEl = document.getElementById('pop');

    function update_popper(x, y) {
        new Popper(refEl, popEl, {
            placement: 'auto',

            modifiers: {
                offset: {
                    enabled: true,
                    offset: (x - 150) + ',' + (-1 * (y - 140))
                },
                flip: {
                    behavior: ['left', 'bottom', 'top']
                },
                preventOverflow: {
                    enabled: true,
                    padding: 10,
                    escapeWithReference: false,
                }
            },
        });
    }

    document.getElementById("ref").onkeyup = function () {
        var xy = getCursorXY(refEl, refEl.selectionEnd)

        document.getElementById("log").innerText = `X: ${xy.x}, Y: ${xy.y}`;
        update_popper(xy.x, xy.y);
    }

    const getCursorXY = (input, selectionPoint) => {
        const {
            offsetLeft: inputX,
            offsetTop: inputY,
        } = input
        // create a dummy element that will be a clone of our input
        const div = document.createElement('div')
        // get the computed style of the input and clone it onto the dummy element
        const copyStyle = getComputedStyle(input)
        for (const prop of copyStyle) {
            div.style[prop] = copyStyle[prop]
        }
        // we need a character that will replace whitespace when filling our dummy element if it's a single line <input/>
        const swap = '.'
        const inputValue = input.tagName === 'INPUT' ? input.value.replace(/ /g, swap) : input.value
        // set the div content to that of the textarea up until selection
        const textContent = inputValue.substr(0, selectionPoint)
        // set the text content of the dummy element div
        div.textContent = textContent
        if (input.tagName === 'TEXTAREA') div.style.height = 'auto'
        // if a single line input then the div needs to be single line and not break out like a text area
        if (input.tagName === 'INPUT') div.style.width = 'auto'
        // create a marker element to obtain caret position
        const span = document.createElement('span')
        // give the span the textContent of remaining content so that the recreated dummy element is as close as possible
        span.textContent = inputValue.substr(selectionPoint) || '.'
        // append the span marker to the div
        div.appendChild(span)
        // append the dummy element to the body
        document.body.appendChild(div)
        // get the marker position, this is the caret position top and left relative to the input
        const { offsetLeft: spanX, offsetTop: spanY } = span
        // lastly, remove that dummy element
        // NOTE:: can comment this out for debugging purposes if you want to see where that span is rendered
        document.body.removeChild(div)
        // return an object with the x and y of the caret. account for input positioning so that you don't need to wrap the input
        return {
            x: inputX + spanX,
            y: inputY + spanY,
        }
    }        

我在這里做的是將你的Popper（）移動到一個名為update popper的函數中，每次使用新的x，y偏移量重建popper。 你不必擔心一遍又一遍地創建新的Popper（），因為它幾乎都是數學，而且重量很輕。

無論如何，我認為這應該有助於讓你更接近你的目標..祝你好運！