子组件完整代码:
<template>
<q-dialog v-on="$listeners" v-bind="$attrs" @hide="onDialogHide">
<q-card
style="max-width: 80vw; width: 600px; position: relative"
:style="{ right: dialogX + 'px', top: dialogY + 'px' }"
>
<q-card-section
class="row items-center q-pb-none"
v-touch-pan.prevent.mouse="onMouseDrag"
:style="{ cursor: allowDrag ? 'grab' : '' }"
>
<slot name="title">
<div class="text-h6">提示</div>
</slot>
<q-space />
</q-card-section>
<q-btn
icon="close"
flat
round
dense
v-close-popup
style="
position: absolute;
right: 10px;
top: 10px;
"
/>
<q-card-section class="q-pt-none" v-touch-pan.prevent.mouse="onMouseDrag">
<slot name="default">
<span class="text-subtitle1">很多人就是不看文档 !</span>
</slot>
</q-card-section>
</q-card>
</q-dialog>
</template>
<script>
export default {
name: "GhDialog",
props: {
allowDrag: {
type: Boolean,
default: false,
},
},
data() {
return {
dialogX: 0,
dialogY: 0,
};
},
methods: {
onMouseDrag({ delta }) {
if (!this.allowDrag) return;
this.dialogX -= delta.x;
this.dialogY += delta.y;
},
onDialogHide() {
this.dialogX = 0;
this.dialogY = 0;
},
},
};
</script>
<style scoped lang="scss"></style>
父组件使用的完整代码:
效果图: