Справочник API

Свойства

Основные

v-model (обязательно)

• тип Boolean

Состояние видимости компонента.

размер (необязательно)

• тип Строка/Число/Массив
• значение по умолчанию 400px

Размер компонента, доступны как px, так и %;

• Если это массив, то: первый элемент — ширина, второй элемент — высота,

• если есть только один элемент: ширина равна высоте.

• В этом случае свойства resizable, min-size, max-size недоступны.

• ( Поддерживается автоматическое заполнение размера ). > Вы можете установить значение 0/[0]/[0,размер]/[размер,0], чтобы сделать компонент автоматически адаптированным к размеру содержимого. > В этом случае свойства min-size, max-size доступны.

dock (необязательно)

• тип Строка
• значение по умолчанию right

Положение закрепления компонента, допустимые значения: top, right, bottom, left.

заголовок (необязательно)

• тип Строка

Текст заголовка компонента, если этот текст пустой и <template #header> тоже пустой, заголовок будет скрыт.

цель (необязательно)

• тип Строка/Элемент DOM
• значение по умолчанию body

Прикрепляет компонент в указанном элементе. Допустимы как строка(селектор), так и Элемент DOM(объект DOM). Используйте стиль position: fixed, если свойство target не указано.

Обратите внимание, что целевой элемент должен существовать до монтирования компонента

Например, целевой элемент не может быть отрендерен самим компонентом, а лучше всего он должен находиться вне всего дерева компонентов Vue. Если вы хотите прикрепить его к родительскому элементу, используйте :target="null". ### Маска

показывать-маску (необязательно)

• тип Логический
• значение по умолчанию true

Является ли маска видимой.

цвет-маски (необязательно)

• тип Строка
• значение по умолчанию rgba(0, 0, 0, 0.5)

Цвет слоя маски.

закрывать-по-клику-на-маске (необязательно)

• тип Логический
• значение по умолчанию true

Закрывается ли компонент при клике на маску.

Заполнение родителя

показывать-кнопку-заполнения (необязательно)

• тип Логический
• значение по умолчанию false

Является ли кнопка заполнения видимой.

заполнять-родителя (необязательно)

• тип Логический
• значение по умолчанию false

Разрешено ли заполнение родителя (перетягивание отключено, если значение равно true).
Используйте v-model:fill-parent для синхронизации значения (выход из режима заполнения после закрытия). ### Размер и положение

можно-изменять-размер (необязательно)

• тип Логический
• значение по умолчанию false

Можно ли изменять размер. - значение по умолчанию 60 Минимальный лимит для изменения размера с помощью перетаскивания, значение в px.

max-size (необязательный)

• тип Число
• значение по умолчанию 0

Максимальный лимит для изменения размера с помощью перетаскивания, значение 0 отключает ограничение, значение в px.

fixed (необязательный)

• тип Логический
• значение по умолчанию false

Использовать ли position: fixed.

offset (необязательный)

• тип Строка
• значение по умолчанию 0

Отступ от стороны dock, как px, так и % доступны. (Эффективно работает только если свойство size является массивом).

Другие

z-index (необязательный)

• тип Число
• значение по умолчанию 1997

Значение z-index компонента.

custom-class (необязательный)

• тип Строка

Настраивает имя пользовательского CSS класса.

show-close (необязательный)

• тип Логический
• значение по умолчанию true

Видимость кнопки закрытия.

disable-animation (необязательный)

• тип Логический
• значение по умолчанию false

Отключение анимации.

ignore-esc (необязательный)

• тип Логический
• значение по умолчанию false

Пропуск нажатия клавиши esc, установите false или оставьте значение по умолчанию для закрытия компонента при нажатии Esc.

arrow-button (необязательный) - тип Логический

• значение по умолчанию true

Отображение кнопки закрытия в виде стрелки (>) если значение true, в противном случае отображается в виде крестика (×).

render-when-visible (необязательный)

• тип Логический
• значение по умолчанию true

Не рендерить содержимое, когда visible равно false.

Слоты

default

• аргументы -

Слот содержимого.

header

• аргументы {title}

Слот шапки, заменяет всю панель шапки, title не будет влиять (и кнопка закрытия будет удалена), если указано это, используйте slot-scope="{ title }" для получения свойства title.

buttons

• аргументы -

Расширение кнопок шапки.

footer

• аргументы -

Слот нижней части.

События

opening

• аргументы e: {pause: Логический, resume: Логический}

Вызов перед открытием компонента, в обратном вызове функции, присвойте e.pause = true для приостановки открытия, и присвойте e.resume = true для возобновления открытия (поддерживается асинхронность).

opened

• аргументы -

Вызов после открытия (и после завершения анимации).

closing

• аргументы e: {pause: Логический, resume: Логический}

Вызов перед закрытием компонента, в обратном вызове функции, присвойте e.pause = true для приостановки закрытия, и присвойте e.resume = true для возобновления закрытия (поддерживается асинхронность).

closed

• аргументы - > Эмитируется после закрытия компонента, он отправляется после события closing.