php | laravel Dialog Modal 컴포넌트
페이지 정보
- 작성자:
- 핵탐
- 작성일
- 07.14 00:26
- 조회
- 1,997
- 댓글
- 0
본문
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개
등록된 댓글이 없습니다.