方法1:
<template>
<div class="q-pa-md q-gutter-sm">
<q-dialog :model-value="modelValue" persistent position="right">
<q-card>
<q-card-section>
<div class="text-h6">Terms of Agreement</div>
<q-space />
<q-btn icon="close" flat round dense v-close-popup @click="closeAction" />
</q-card-section>
<q-separator />
<q-card-section style="max-height: 50vh" class="scroll">
<p
v-for="n in 15"
:key="n"
>Lorem ipsum dolor sit amet consectetur adipisicing elit. Rerum repellendus sit voluptate voluptas eveniet porro. Rerum blanditiis perferendis totam, ea at omnis vel numquam exercitationem aut, natus minima, porro labore.</p>
</q-card-section>
<q-separator />
<q-card-actions align="right">
<q-btn label="Decline" color="primary" v-close-popup @click="closeAction"/>
<q-btn flat label="Accept" color="primary" v-close-popup @click="closeAction"/>
</q-card-actions>
</q-card>
</q-dialog>
</div>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
export default defineComponent({
props: {
modelValue: {
type: Boolean,
require: true
}
},
setup(props, context) {
const closeAction = () => {
context.emit('update:model-value', false);
console.log('closeAction');
};
return {
closeAction,
};
},
});
</script>
<style lang="scss" scoped>
</style>
使用
<mine-filter v-model="showFilter"/>
方法2:
<template>
<div class="q-pa-md q-gutter-sm">
<q-dialog :model-value="show" persistent position="right">
<q-card>
<q-card-section>
<div class="text-h6">Terms of Agreement</div>
<q-space />
<q-btn icon="close" flat round dense v-close-popup @click="closeAction" />
</q-card-section>
<q-separator />
<q-card-section style="max-height: 50vh" class="scroll">
<p
v-for="n in 15"
:key="n"
>Lorem ipsum dolor sit amet consectetur adipisicing elit. Rerum repellendus sit voluptate voluptas eveniet porro. Rerum blanditiis perferendis totam, ea at omnis vel numquam exercitationem aut, natus minima, porro labore.</p>
</q-card-section>
<q-separator />
<q-card-actions align="right">
<q-btn label="Decline" color="primary" v-close-popup @click="closeAction"/>
<q-btn flat label="Accept" color="primary" v-close-popup @click="closeAction"/>
</q-card-actions>
</q-card>
</q-dialog>
</div>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
export default defineComponent({
props: {
show: {
type: Boolean,
require:true
}
},
setup(props, context) {
const closeAction = () => {
context.emit('update:show', false);
console.log('closeAction');
};
return {
closeAction,
};
},
});
</script>
<style lang="scss" scoped>
</style>
<filter-data :show="showFilter" v-model:show="showFilter"/>
父組件中:
const showFilter = ref(false);