laravel Dialog Modal 컴포넌트 > IT 기술백서

IT 기술백서

직접 알아내거나 검색하기 귀찮아서 모아 둔 것

php | laravel Dialog Modal 컴포넌트

본문

alpine.js 를 이용한 Dialog Modal

 

생성 

[code]

$ php aritisan make:component Modal

[/code]

 

레이아웃

[code]

<html>

<body>

    ....

    @stack('botStack')

</body>

</html>

[/code]

 

컴포넌트 blade

/resourses/views/components/modal.blade.php

 

[code]

<div {{ $attributes }} x-show="show" x-on:keydown.escape.window="show = false"

    class="fixed inset-0 overflow-y-auto px-4 py-6 z-50 flex justify-center items-center md:py-24 sm:px-0">


    <div class="fixed inset-0 transform" @click="if (!enableClickAway) show=false">

        <div class="absolute inset-0 bg-gray-900 opacity-75"></div>

    </div>


    <div class="bg-white rounded-lg overflow-hidden transform sm:w-full sm:mx-auto max-w-lg" @click="show=false">

        <div v-show="title !== ''" class="flex justify-between p-2 bg-blue-500 bg-gradient-to-t from-blue-900">

            <div class="flex-grow">

                <span x-text="title" class="text-sm text-white"></span>

            </div>

            <div class="actions">

                <a href="javascript:" class="button link mini" @click="show = false">

                    <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="#fff" viewBox="0 0 24 24"

                        stroke="#fff">

                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"

                            d="M6 18L18 6M6 6l12 12" />

                    </svg>

                </a>

            </div>

        </div>


        {{ $slot }}


       

 

        <div x-show="typeof buttons === 'object' && !Array.isArray(buttons) && Object.keys(buttons).length > 0" class="

            border-t p-2 flex justify-end gap-2">

            <template x-for="key in Object.keys(buttons)" :key="key">

                <div>

                    <template x-if="key === 'close'">

                        <button type="button" class="btn btn-light" @click="__doButtonClick('close')">

                            <span x-text="buttons.close"></span>

                        </button>

                    </template>


                    <template x-if="key === 'confirm'">

                        <button type="button" class="btn btn-primary" @click="__doButtonClick('confirm')">

                            <span x-text="buttons.confirm"></span>

                        </button>

                    </template>


                    <template x-if="key === 'yes'">

                        <button type="button" class="btn btn-success" @click="__doButtonClick('yes')">

                            <span x-text="buttons.yes"></span>

                        </button>

                    </template>


                    <template x-if="key === 'no'">

                        <button type="button" class="btn btn-light" @click="__doButtonClick('no')">

                            <span x-text="buttons.no">

                        </button>

                    </template>

                </div>

            </template>

        </div>

    </div>

</div>


@push('botStack')

    @once

        <script>

            Object.assignDeep = (target, ...sources) => {

                const isObject = (item) => {

                    return item && typeof item === 'object' && !Array.isArray(item)

                }


                if (!sources.length) return target

                const source = sources.shift()


                for (const key in source) {

                    if (isObject(source[key])) {

                        if (!target[key]) Object.assign(target, {

                            [key]: {}

                        })

                        if (isObject(target[key])) Object.assignDeep(target[key], source[key])

                        else target[key] = source[key]

                    } else if (Array.isArray(source[key])) {

                        if (!Array.isArray(target[key])) target[key] = []

                        for (const k in source[key]) {

                            target[key].push(source[key][k])

                        }

                    } else {

                        Object.assign(target, {

                            [key]: source[key]

                        })

                    }

                }


                return Object.assignDeep(target, ...sources)

            }



            const Dialog = function(options) {


                let defaultOptions = {

                    show: false,

                    enableClickAway: false,

                    buttons: {},

                    title: '',

                    __init() {

                        this.show = typeof this.show !== 'undefined' ? this.show : false

                        this.title = typeof this.title !== 'undefined' ? this.title : false

                        this.enableClickAway =

                            typeof this.enableClickAway !== 'undefined' ?

                            this.enableClickAway :

                            true

                    },

                    __doButtonClick(event_name) {

                        this.$dispatch('dialog-' + event_name)

                        this.show = false

                    }

                }


                const res = Object.assignDeep({},

                    defaultOptions, options)

                return res

            }

        </script>

 

    @endonce

@endpush


[/code]

 

사용예제

[code]

<x-modal x-data="Dialog({ buttons: { close: '닫기', confirm: '확인' } })" @open-dialog.window="show=true"

@dialog-confirm.window="alert('확인')">

<div class="p-4">

다이얼로그 예제

</div>

</x-modal>

[/code]

 

옵션

button: {

  close: '닫기',

  confirm: '확인',

  yes: '예',

  no: '아니오,

  enableClickAway: [true | false] // 바깥쪽 눌렀을때 닫히게 할지

}

 

title: 제목

 

이벤트

dialog-close

dialog-confirm

dialog-yes

dialog-no

댓글 0개

등록된 댓글이 없습니다.

Menu