vue2.0和quasarUI封装弹出框可拖拽

《独白》

已于 2024-01-11 16:31:14 修改

阅读量469

点赞数 6

文章标签：前端 javascript html

于 2024-01-11 15:41:02 首次发布

本文链接：https://blog.csdn.net/qq_45149139/article/details/135531314

版权

子组件完整代码：

<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>

父组件使用的完整代码：

效果图：