Cara mengimpor folder sebagai komponen Vue

Saya ingin menampilkan komponen Vue yang berbeda untuk perangkat seluler. Dan saya menemukan solusi ini (https://stackoverflow.com/a/48515205/11079653) melalui mixin.

Dan, misalnya, saya memiliki komponen - Card.vue. Namun untuk perangkat seluler, saya telah membuat CardMovile.Vue.

Sekarang saya ingin meletakkan komponen-komponen ini di folder Card yang berisi index.js

-Card
--Card.vue
--CardMobile.vue
--index.js

Setelah itu, saya hanya ingin mengimpor Card di App.vue saya dan index.js harus memutuskan komponen apa yang dibutuhkan (Card.vue atau Card.mobile.vue)

<template>
  <Card></Card>
</template>

<script>
import Card from './Card'
</script>

apa itu mungkin?


javascript vue.js vuejs2
person Dmitry    schedule 01.03.2019    source sumber

Jawaban (1)


arrow_upward
1
arrow_downward

Anda dapat mencoba menulis yang berikut ini di file Card/index.js:

import isMobile from 'is-mobile'

import Card from './Card.vue'
import CardMobile from './CardMobile.vue'

export default isMobile() ? CardMobile : Card
person Hammerbot    schedule 01.03.2019
comment
Perhatikan bahwa saya menggunakan paket npm is-mobile dalam contoh ini tetapi jangan ragu untuk menggunakan fungsi apa pun yang Anda ingin deteksi di browser seluler - person Hammerbot; 01.03.2019