可移动浮动工厂按钮 ionic vue

Question

我正在 Ionic Vue 中构建一个应用程序

我添加了一个如下所示的 fab 按钮：

  <ion-fab
    vertical="bottom"
    horizontal="end"
    slot="fixed"
    class="utility_fab_button"
    :style="{
      bottom: `${ion_fab_position.bottom}px`,
      right: `${ion_fab_position.right}px`,
    }"
    ref="utility_fab_button_ref"
  >
    <ion-fab-button color="dark" v-on:dragstart="dragStart">
      <ion-icon :icon="helpCircleOutline"></ion-icon>
    </ion-fab-button>
    <ion-fab-list side="top">
      <ion-fab-button color="dark" @click="goToWhatsApp($event)">
        <ion-icon :icon="logoWhatsapp"></ion-icon>
      </ion-fab-button>
      <ion-fab-button color="dark" @click="sendEmail($event)">
        <ion-icon :icon="mailOutline"></ion-icon>
      </ion-fab-button>
      <ion-fab-button color="dark" @click="makeCall($event)">
        <ion-icon :icon="callOutline"></ion-icon>
      </ion-fab-button>
    </ion-fab-list>
  </ion-fab>

exports default {
  data() {
    return {
      ion_fab_position: {
        bottom: "10",
        right: "10",
      },
    }
  }
}

我想在 fab 按钮中添加拖动系统，用户可以在屏幕上拖动和移动按钮。

我该怎么做？

Answer 1

添加position: fixed和z-index: 9999