Vuetify3

提示按钮 - ti-tooltip

<v-tooltip text="$texr$" location="$POSTION$">
  <template v-slot:activator="{ props }">
    <v-btn v-bind="props">Tooltip</v-btn>
  </template>
</v-tooltip>

enum(["提示"])
enum(["start","end","top","bottom"])

弹窗 - ti-dialog

<v-dialog
    transition="dialog-bottom-transition"
    width="auto"
  >
    <template v-slot:activator="{ props }">
      <v-btn
        color="primary"
        v-bind="props"
      >From the bottom</v-btn>
    </template>
    
    <template v-slot:default="{ isActive }">
      <v-card>
        <v-toolbar
          color="primary"
          title="Opening from the bottom"
        ></v-toolbar>
        <v-card-text>
          <div class="text-h2 pa-12">Hello world!</div>
        </v-card-text>
        <v-card-actions class="justify-end">
          <v-btn
            variant="text"
            @click="isActive.value = false"
          >Close</v-btn>
        </v-card-actions>
      </v-card>
    </template>
  </v-dialog>

卡片 ti-card

Alert ti-alert

<v-alert
  color="$color$"
  icon="$success"
  title="Alert title"
  text="Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi, ratione debitis quis est labore voluptatibus..."
></v-alert>

enum(["success","error","info","warning"])

选项卡 ti-tabs

<v-tabs
  v-model="tab"
  align-tabs="title"
>
  <v-tab
    v-for="(item,index) in 10"
    :key="index"
    :value="item"
  >
    {{ item }}
  </v-tab>
</v-tabs>

表单 ti-form

<v-sheet width="300" class="mx-auto">
    <v-form @submit.prevent>
      <v-text-field
        v-model="firstName"
        :rules="rules"
        label="First name"
      ></v-text-field>
      <v-btn type="submit" block class="mt-2">保存</v-btn>
    </v-form>
  </v-sheet>

侧边栏 ti-drawer

<v-navigation-drawer
        v-model="drawer"
        location="$postion$"
        temporary
      >
        <v-list
          :items="items"
        ></v-list>
      </v-navigation-drawer>
enum(["start","end","top","bottom"])

悬浮 ti-hover

<v-hover>
  <template v-slot:default="{ isHovering, props }">
    <v-card
      v-bind="props"
      :color="isHovering ? 'primary' : undefined"
      title="Hover over me"
      text="..."
    ></v-card>
  </template>
</v-hover>

头像 ti-avatar

 <v-avatar color="info">
      <v-icon icon="mdi-account-circle"></v-icon>
    </v-avatar>

分页 ti-page

<v-col cols="12">
    <div class="text-center" v-if="total > limit">
        <v-pagination
            rounded="circle"
            v-model="page"
            :length="Math.trunc(total/(limit === 0 ? 20:limit))"
            @update:model-value="changePage"
            @next="next"
            @prev="prev"
        ></v-pagination>
    </div>
</v-col>

const page = ref(0);
const limit = ref(20);
const total = ref(0);
const changePage = (page)=>{
    page.value = page;
    getData();
    
}
const next = ()=>{
    page.value++;
    getData();
}
const prev = ()=>{
    page.value--;
    getData();
}

是否是手机

<script setup>
  import { onMounted } from 'vue'
  import { useDisplay } from 'vuetify'

  const { mobile } = useDisplay()

  onMounted(() => {
    console.log(mobile.value) // false
  })
</script>

无限滚动 - ti-scroll

https://vuetifyjs.com/zh-Hans/components/infinite-scroller/#section-4f7f7528