64 lines
1.7 KiB
Vue
64 lines
1.7 KiB
Vue
<template>
|
|
<!-- <div class="q-pa-md q-gutter-sm" > -->
|
|
<q-dialog :model-value="visible" persistent bordered >
|
|
<q-card 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></q-space>
|
|
<slot name="toolbar"></slot>
|
|
<q-btn flat round dense icon="close" @click="CloseDialogue('Cancel')" />
|
|
</q-toolbar>
|
|
<q-card-section>
|
|
<!-- <div class="text-h6">{{ name }}</div> -->
|
|
</q-card-section>
|
|
<q-card-section class="q-pt-none" :style="sectionStyle">
|
|
<slot></slot>
|
|
</q-card-section>
|
|
<q-card-actions align="right" class="text-primary q-mt-lg">
|
|
<q-btn flat label="確定" v-close-popup @click="CloseDialogue('OK')" />
|
|
<q-btn flat label="キャンセル" 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
|
|
},
|
|
emits: [
|
|
'close'
|
|
],
|
|
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>
|