new generic dialog component (testing)

parent b03067fd
<template>
<div>
<q-dialog v-model="showDialog" >
<q-card style="width: 700px; max-width: 80vw;">
<q-bar class="text-white bg-green"><strong>{{title}}</strong>
<q-space/>
<q-btn v-close-popup dense round flat icon="close" />
</q-bar>
<q-scroll-area :style="{height:height}">
<!-- <q-scroll-area style="height:400px"> -->
<q-card-section>
<slot ></slot>
</q-card-section>
<q-card-actions align="center">
<q-btn v-close-popup no-caps label="Cancel"/>
</q-card-actions>
</q-scroll-area>
</q-card>
</q-dialog>
</div>
</template>
<script>
export default {
name: 'hiDialog',
props: {
title: {
type: String,
default: ''
},
show: {
type: Boolean,
default: false
},
uuid: {
type: String,
default: ''
}
},
computed: {
height() {
// calculate dialog height based on current window height
return (window.innerHeight/5)*3 +'px'
},
showDialog: {
get() {
console.log("hiDialog get showDialog: ", this.show)
return this.show;
},
set(val) {
this.$emit('close');
return val;
}
}
},
data() {
return {}
}
};
</script>
<template>
<div>
<hi-dialog :title="title" :show="showDialog" @close="$emit('close')">
dit is de dialog voor {{uuid}}
</hi-dialog>
</div>
</template>
<script>
import hiDialog from '@/components/hiDialog.vue'
export default {
name: 'hiPerson',
components: { hiDialog },
props: {
title: {
type: String,
default: ''
},
show: {
type: Boolean,
default: false
},
uuid: {
type: String,
default: ''
}
},
computed: {
showDialog: {
get() {
return this.show;
},
set(val) {
this.$emit('close');
return val;
}
}
},
data() {
return {}
}
};
</script>
<template>
<div>
<div class="row q-pa-xl">
<q-bar>testpage</q-bar>
<q-separator/>
</div>
<div class="row">
<h1>testpage</h1>
<q-btn label="Associate Person" @click="showPerson=!showPerson"/>{{showPerson}}
</div>
<hi-person :show="showPerson" uuid='42' @close="showPerson=false" title="Associate Person"/>
</div>
</template>
<script>
export default {};
import hiPerson from '@/components/hiPerson'
export default {
components: { hiPerson },
methods: {
},
data() {
return {
showPerson: false
}
}
};
</script>
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment