vue3 左右滚动tabs (基于quasar)

徐同保

于 2024-10-10 14:28:28 发布

阅读量261

点赞数 3

文章标签： javascript

本文链接：https://blog.csdn.net/xutongbao/article/details/142820471

版权

yarn add quasar @quasar/extras
yarn add --dev @quasar/vite-plugin sass@^1.33.0

main.ts:

import './assets/main.css'

import { createApp } from 'vue'
import { createPinia } from 'pinia'
import WujieVue from 'wujie-vue3'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

import App from './App.vue'
import router from './router'
import { ProTable } from './components/light/pro-table/'
import { Quasar } from 'quasar'

// Import icon libraries
import '@quasar/extras/material-icons/material-icons.css'

// Import Quasar css
import 'quasar/src/css/index.sass'

const app = createApp(App)

app.use(createPinia())
app.use(router)
app.use(WujieVue)
app.use(ElementPlus)
app.component('pro-table', ProTable)

app.use(Quasar, {
  plugins: {}, // import Quasar plugins and add here
})

app.mount('#app')

Index.vue:

<script setup>
import { ref, onMounted } from 'vue'
import { QTabs, QTab } from 'quasar'
import './index.css'

const tab = ref('mail')

onMounted(() => {})
</script>

<template>
  <div class="m-home-wrap">
    <q-tabs
      v-model="tab"
      inline-label
      outside-arrows
      mobile-arrows
      class="bg-primary text-white shadow-2"
    >
      <q-tab name="mails" icon="mail" label="Mails" />
      <q-tab name="alarms" icon="alarm" label="Alarms" />
      <q-tab name="movies" icon="movie" label="Movies" />
      <q-tab name="photos" icon="photo" label="Photos" />
      <q-tab name="videos" icon="slow_motion_video" label="Videos" />
      <q-tab name="addressbook" icon="people" label="Address Book" />
    </q-tabs>
  </div>
</template>

<style></style>