Документация API

Атрибуты

Основные атрибуты

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

• Тип Boolean

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

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

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

Размер отображения, можно использовать единицы измерения px и %;

• Когда это массив: первый элемент указывает ширину, второй — высоту;
• Когда массив состоит из одного значения: указывает одинаковую ширину и высоту, в этом случае значения свойств resizable, min-size, max-size будут проигнорированы, то есть изменение размера будет запрещено.
• ( Поддержка адаптивного размера ) Можно установить значение в формате 0/[0]/[0,размер]/[размер,0], чтобы сделать размер компонента автоматически адаптированным к содержимому. В этом случае свойства min-size, max-size становятся доступными.

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

• Тип Строка
• По умолчанию правый край

Положение закрепления, возможные значения: верхний край, правый край, нижний край, левый край.

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

• Тип Строка
• По умолчанию -

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

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

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

Установка родительского элемента, можно использовать строки (селекторы) и объекты DOM. > При отсутствии установленной цели, компонент Slide будет отображаться с использованием position: fixed.

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

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

Атрибуты маски

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

• Тип: Логическое значение
• По умолчанию: истинно

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

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

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

Цвет маски.

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

• Тип: Логическое значение
• По умолчанию: истинно

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

Заполнение родительского контейнера

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

• Тип: Логическое значение
• По умолчанию: ложно

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

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

• Тип: Логическое значение
• По умолчанию: ложно

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

Размер и положение

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

• По умолчанию ложь

Разрешает ли использование мыши для изменения размера.

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

• Тип Число
• По умолчанию 60

Минимальное ограничение размера при изменении, измеряется в пикселях.

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

• Тип Число
• По умолчанию 0

Максимальное значение ограничения перемещения в пикселях (px). Установка значения 0 отключает это ограничение.

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

• Тип Логическое значение
• По умолчанию ложь

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

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

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

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

Другие атрибуты

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

• Тип Число
• По умолчанию 1997

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

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

• Тип Строка
• По умолчанию -

Название пользовательского класса стилей.

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

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

Показывать кнопку закрытия.

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

• Тип Логическое значение
• По умолчанию ложь

Отключение анимации при показе/скрытии.

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

• Тип Логическое значение
• По умолчанию ложь

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

arrow-button (необязательный)

• Тип Логическое значение
• По умолчанию истина > Установка значения true позволяет отображать кнопку закрытия в виде стрелки; в противном случае используется символ Х.

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

• Тип Boolean
• По умолчанию true

Отображение содержимого только когда visible равно true.## Слоты

header

• Область действия {title}

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

buttons

Расширяемая часть кнопок шапки.

default

Основное содержимое.

footer

Внутреннее содержимое нижней части.

События

opening

• Аргументы e: {pause: Boolean, resume: Boolean}

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

opened

• Аргументы -

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

closing

• Аргументы e: {pause: Boolean, resume: Boolean}

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

closed

• Аргументы -

Вызывается после полного закрытия, событие срабатывает после события closing.