72 lines
1.9 KiB
Vue
72 lines
1.9 KiB
Vue
<template>
|
|
<!-- <div class="q-pa-md q-gutter-sm" > -->
|
|
<q-dialog :model-value="visible" persistent bordered >
|
|
<q-card class="" style="min-width: 40vw; max-width: 80vw; max-height: 95vh;" :style="cardStyle">
|
|
<q-toolbar class="bg-grey-4">
|
|
<q-toolbar-title>{{ name }}</q-toolbar-title>
|
|
<q-space v-if="$slots.toolbar"></q-space>
|
|
<slot name="toolbar"></slot>
|
|
<q-btn flat round dense icon="close" @click="CloseDialogue('Cancel')" />
|
|
</q-toolbar>
|
|
<q-card-section class="q-mt-md" :style="sectionStyle">
|
|
<slot></slot>
|
|
</q-card-section>
|
|
<q-card-actions v-if="!disableBtn" align="right" class="text-primary">
|
|
<q-btn flat :label="okBtnLabel || '確定'" :loading="okBtnLoading" :v-close-popup="okBtnAutoClose" @click="CloseDialogue('OK')" />
|
|
<q-btn flat label="キャンセル" :disable="okBtnLoading" v-close-popup @click="CloseDialogue('Cancel')" />
|
|
</q-card-actions>
|
|
</q-card>
|
|
</q-dialog>
|
|
<!-- </div> -->
|
|
</template>
|
|
<script>
|
|
import {computed} from 'vue'
|
|
export default {
|
|
name: 'ShowDialog',
|
|
props: {
|
|
name:String,
|
|
visible: Boolean,
|
|
width:String,
|
|
height:String,
|
|
minWidth:String,
|
|
minHeight:String,
|
|
okBtnLabel:String,
|
|
okBtnLoading:Boolean,
|
|
okBtnAutoClose:{
|
|
type: Boolean,
|
|
default: true
|
|
},
|
|
disableBtn:{
|
|
type: Boolean,
|
|
default: false
|
|
}
|
|
},
|
|
emits: [
|
|
'close',
|
|
'update:visible'
|
|
],
|
|
setup(props, context) {
|
|
const CloseDialogue = (val) => {
|
|
context.emit('update:visible', false);
|
|
context.emit('close', val);
|
|
}
|
|
|
|
const cardStyle = computed(() => ({
|
|
minWidth: props.minWidth,
|
|
width: props.width
|
|
}));
|
|
|
|
const sectionStyle = computed(() => ({
|
|
height: props.height,
|
|
minHeight: props.minHeight
|
|
}));
|
|
|
|
return {
|
|
CloseDialogue,
|
|
cardStyle,
|
|
sectionStyle
|
|
}
|
|
},
|
|
}
|
|
</script>
|