Я использую Vue 3 и Quasar. У меня есть q-кнопка внутри #append-слота q-поля. Я пытаюсь вычислить ширину кнопки, чтобы переместить ее вправо от поля.
Я знаю, что могу просто поместить кнопку в другой шаблон, например #after вместо #append, и мне не придется беспокоиться о вычислении ширины и перемещении кнопки в абсолютном положении. К сожалению, в моем конкретном случае это просто невозможно.
Визуально кнопка выглядит совершенно правильно, и текст, который я пытаюсь отобразить на ней, отображается в одну строку. Однако когда я измеряю ширину с помощью offsetWidth, значение неверно для меток с пробелами.
метка на кнопке
offsetWidth
привет
45 пикселей (правильно)
привет, мир
45 пикселей (неверно, должно быть больше)
helloworld
79 пикселей (правильно)
Я пробовал это со строками разной длины. Кажется, проблема в пространстве. Когда я проверяю кнопку с помощью инструментов разработчика, ширина кнопки правильная. Он просто не переносится прямо в мой код.
Я подготовил небольшой тестовый проект с CodeSandbox. Изменив метку q-btn в InputField.vue, вы можете повторить мою ошибку. Во всех журналах моей консоли отображается одна и та же неправильная ширина, как показано в таблице выше.
Вещи, которые я уже проверил:
- Метка отображается внутри одного
- Нет видимого переноса текста (кнопка выглядит однострочной)
- Пробовал принудительное использование: white-space: nowrap;
Ожидаемое поведение:
Измеренная ширина должна отражать фактическую визуальную ширину кнопки, независимо от того, содержит ли метка пробелы.
Вот пример того, как она должна выглядеть (очевидно, между двумя словами должен быть пробел):
Я очень благодарен за любые советы, которые могу получить! Заранее спасибо за ваше время!
Подробнее здесь: https://stackoverflow.com/questions/798 ... ment-width
