因為vuetify中dailog只有上下抽屜的效果，想要左右抽屜效果 於是自己寫了一個左右抽屜的元件 其中比較難搞的還是樣式 和過渡

vuetify中建立過渡元件的方式：https://vuetifyjs.com/zh-Hans/styles/transitions/#todo-list

實現效果：

<template>
  <v-dialog
    class="slide-drawer"
    content-class="my-slide-drawer"
    :value="value"
    @input="val => $emit('input', val)"
    scrollable
    width="600px"
    v-bind="$attrs"
    v-on="$listeners"
    transition="my-transition"
    origin="0px 0px"
  >
    <v-card>
      <v-card-title>
        <v-btn icon @click="$emit('input', false)">
          <v-icon>mdi-close</v-icon>
        </v-btn>
      </v-card-title>
      <v-divider></v-divider>
      <v-card-text>
        <div v-html="content"></div>
      </v-card-text>
    </v-card>
  </v-dialog>
</template>

<script>
// 匯入建立元件方法
import { createSimpleTransition } from "vuetify/lib/components/transitions/createTransition";
// 建立 my-transition 過渡元件  這個元件在模板中的transition屬性使用
const myTransition = createSimpleTransition("my-transition");
// 註冊元件
import Vue from "vue";
Vue.component("my-transition", myTransition);
// import Dialog from "@/components/common/dialog";
export default {
  name: "HistoryInfoDrawer",
  components: {
    // Dialog
  },
  props: {
    value: {
      type: Boolean,
      defualt: false
    },
    content: {
      type: String,
      defualt: ""
    }
  }
};
</script>

<style lang="scss" scoped>
.v-dialog__content {
   // 改變dialog佈局 靠右
  justify-content: start !important;
}
::v-deep {
  .my-slide-drawer {
    border-radius: 0;
    margin: 0;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    max-height: 100% !important;
    .v-sheet.v-card {
      border-radius: 0;
    }
  }
    // 新增側面抽屜效果
    .my-transition {
        // 進入和離開的狀態
        &-enter,
        &-leave-to {
        transform: translateX(-800px);
        }
    }
}
</style>
或者=================================
<style lang="scss">
// 新增側面抽屜效果
.my-transition {
  &-enter,
  &-leave-to {
    transform: translateX(-800px);
  }
}
</style>

 

注意事項：樣式不能在 scoped 中要不不會生效 或者放到 ::v-deep 中