https://www.ast-inter.ru/local/vue-components/Popup/Template/script.js

1Vue.component("popup-template", {
2    name: "PopupTemplate",
3    props: {
4        "showOverlay": {
5            type: Boolean,
6            default: true
7        },
8        "timeoutClose": 0,
9        "showWait": false,
10        "absoluteWait": false
11    },
12    methods: {
13        hide: function () {
14            this.$emit("close");
15        },
16    },
17    created: function () {
18        if (this.timeoutClose > 0) {
19            setTimeout(this.hide.bind(this), this.timeoutClose * 1000);
20        }
21    },
22    template:
23        '<div name="popupTemplate" class="popup-template">' +
24            '<overlay :isShow="showOverlay"></overlay>' +
25            '<div class="popup-template__content">' +
26                '<a href="" class="popup-template__close" @click.prevent="hide">' +
27                '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">' +
28                    '<path d="M18.7065 6.72846C19.0974 6.33827 19.0979 5.70511 18.7077 5.31425C18.3175 4.92339 17.6844 4.92284 17.2935 5.31302L18.7065 6.72846ZM5.29351 17.2923C4.90264 17.6825 4.9021 18.3156 5.29228 18.7065C5.68247 19.0974 6.31563 19.0979 6.70649 18.7077L5.29351 17.2923ZM17.2935 18.687C17.6844 19.0772 18.3175 19.0766 18.7077 18.6858C19.0979 18.2949 19.0974 17.6617 18.7065 17.2715L17.2935 18.687ZM6.70649 5.29228C6.31563 4.9021 5.68247 4.90264 5.29228 5.29351C4.9021 5.68437 4.90264 6.31753 5.29351 6.70772L6.70649 5.29228ZM17.2935 5.31302L5.29351 17.2923L6.70649 18.7077L18.7065 6.72846L17.2935 5.31302ZM18.7065 17.2715L6.70649 5.29228L5.29351 6.70772L17.2935 18.687L18.7065 17.2715Z"/>' +
29                '</svg>' +
30                '</a>' +
31                '<div class="popup-template__title">' +
32                    '<slot name="title"></slot>' +
33                '</div>' +
34                '<div class="popup-template__body">' +
35                    '<slot name="body"></slot>' +
36                '</div>' +
37                '<div class="popup-template__footer">' +
38                    '<slot name="footer"></slot>' +
39                '</div>' +
40                '<loader :show="showWait" :absolute="absoluteWait"></loader>' +
41            '</div>' +
42            '</div>' +
43        '</div>'
44});