yarn add slash-layer

npm install slash-layer

import { createApp } from 'vue'
import App from './App.vue'
import SlashLayer from 'slash-layer';
import { config } from './LayerConfig';
import 'slash-layer/dist/style.css';

let app = createApp(App);
app.use(SlashLayer, config);
app.mount('#app');

import { LayerGlobalConfigure } from '../packages/components/Layer/ts/LayerConfigureDefinition';

export const config = {
    title: 'Пользовательская глобальная метка',
    max: false, // кнопка для увеличения окна
    min: false, // кнопка для уменьшения окна
    header: true, // отображение верхней части модального окна
    loadingTime: 500, // время анимации загрузки / миллисекунды
    dbFull: true, // двойной щелчок для изменения размера окна
    successDecide(msg: any) {
        console.log(msg);
        if (msg.code === 200) {
            return {
                msg: msg.msg,
                result: true,
                data: msg.data
            };
        } else {
            return {
                msg: msg.msg,
                result: false,
                data: msg.data
            };
        }
    }
} as LayerGlobalConfigure;

export default config;

Layer.modal({
    title: 'Без конфигурации',
    content: {
        component: HelloWorld,
        parent: this,
        props: {
            msg: 'Передача параметров'
        }
    }
});

Layer.modal({
    title: 'Размер sm',
    content: {
        position: 'sm',
        component: HelloWorld,
        parent: this,
        props: {
            msg: 'Передача параметров'
        }
    }
});
```## Предустановленное модальное окно MD размера

```typescript
Layer.modal({
    title: `Модальное окно среднего размера md`,
    position: "md",
    content: {
        component: HelloWorld,
        parent: this,
        props: {
            msg: "Передача параметров"
        }
    }
});

Layer.modal({
    title: `Модальное окно большого размера lg`,
    position: "lg",
    content: {
        component: HelloWorld,
        parent: this,
        props: {
            msg: "Передача параметров"
        }
    }
});

Layer.modal({
    title: `Без конфигурации`,
    position: "full",
    content: {
        component: HelloWorld,
        parent: this,
        props: {
            msg: "Передача параметров"
        }
    }
});

Layer.modal({
    position: {
        top: 200,
        left: 100,
        width: 400,
        height: 400
    }
})

Layer.createForm({
    title: "Добавление системы",
    content: {
        component: SystemManagementUpdate,
        props: {
            id: "xxx"
        }
    }
} as FormConfigure).then(res => {
    // Выполнение последующих действий
})

const doSubmit = async () => {
    console.log("Сохранение");
    if (!formInstance) {
        return;
    }
    let result = await checkFormData();
    if (!result) {
        return;
    }
    return sysAppApi.doSaveEntity(formData.value);
};
```## Изменение формы

### Компонент вызывающей стороны

Аналогично созданию формы, при вызове возвращает Promise, при успешной отправке данных возвращается ответ от сервера.

```typescript
Layer.updateForm({
    title: "Изменение системы",
    content: {
        component: SystemManagementUpdate,
        props: {
            ...row // Распаковка передачи данных
        }
    }
} as FormConfigure).then(res => {
    // Выполнение поиска списка
})

const doUpdate = async () => {
    if (!formInstance)
        return;
    let result = await checkFormData();
    if (!result) {
        return;
    }
    return sysAppApi.doUpdateEntity(formData.value);
}

Layer.readForm({
    title: "Создание пользователя",
    content: {
        component: UserForm,
        props: {
            msg: "Создание пользователя"
        }
    }
});

export default defineComponent({
    name: 'SystemManagementUpdate',
    props: ["id", "runMode"],
    setup: (props, ctx) => {
        const formInstance = ref<FormInstance>();
        const { id, runMode } = toRefs(props); // Извлечение двух параметров
    }
})

![](./assets/images/images.png)

# Уведомления

![](./assets/images/confim.png)

## Подтверждение

```typescript
Layer.confirm("Вы уверены, что хотите удалить?").then((msg) => {
    alert("Нажата кнопка 'Подтвердить'");
}).catch((msg) => {
    alert("Нажата кнопка 'Отмена'");
});

Layer.success("Это успешное уведомление.");

Layer.error("Это сообщение об ошибке.");

Layer.info("Это обычное уведомление.");