如何在 vuetify 3 中创建小吃店？

Question

我想创建如本示例所示的小吃店 (vuetify 2)。我的问题是如何在 vuetify 3 中做到这一点

https://codepen.io/scp-nm/pen/LYpBeoe?editors=1010

App.vue

<v-snackbar
  v-model="snackbar.visible"
  auto-height
  :color="snackbar.color"
  :multi-line="snackbar.mode === 'multi-line'"
  :timeout="snackbar.timeout"
  :top="snackbar.position === 'top'"
>
  <v-layout align-center pr-4>
    <v-icon class="pr-3" dark large>{{ snackbar.icon }}</v-icon>
    <v-layout column>
      <div>
        <strong>{{ snackbar.title }}</strong>
      </div>
      <div>{{ snackbar.text }}</div>
    </v-layout>
  </v-layout>
  <v-btn
    v-if="snackbar.timeout === 0"
    icon
    @click="snackbar.visible = false"
  >
    <v-icon>clear</v-icon>
  </v-btn>
</v-snackbar>

当我将 vue 2 代码转换为 vue 3 时，转换不起作用并且 vuetify 3 api 不像我预期的那样清晰。

这是我的代码工作区

Answer 1

如前所述，您的沙箱无法正常工作，所以分享一个简单的示例可能会更容易，因为我完全了解您在迁移过程中的位置，但这个相当简单的示例将助您一臂之力！

模板：

<v-snackbar
  :timeout="timeout"
  v-model="show"
>
  {{ message }}
    <template
      v-slot:actions
    >
      <v-btn
        variant="text"
        @click="show=false"
      >
        Close
      </v-btn>
    </template>
</v-snackbar>

脚本：

  data() {
    return {
      show: false,
      message: '',
      timeout: 3000,
    }
  },
  methods: {
    handleSnackbar() {
      this.message = 'This is a snackbar!'
      this.show = true;
    },
  }

示例：https://codepen.io/alexpetergill/pen/KKxGYXx/6f787eea03f27fcf290b4b938cbd11c5

更新： 过渡似乎不起作用，也许是这个 WIP（就像很多东西一样！）。 您可以自己使用一些自定义 CSS 来捏造它。我已经更新了 Codepen，它可以工作，但 CSS 不是特别好！ 您还需要

eager

道具来呈现小吃店。

<v-snackbar
  :timeout="timeout"
  v-model="show"
  :location="location"
  transition="slide-y-transition" // not working
  eager
>