Как импортировать папку как компонент Vue

Я хочу отобразить другой компонент Vue для мобильного устройства. И я нашел это решение (https://stackoverflow.com/a/48515205/11079653) с помощью миксина.

А, например, у меня есть компонент - Card.vue. Но для мобильного устройства я создал CardMovile.Vue.

Теперь я хочу поместить эти компоненты в папку Card, которая будет содержать index.js

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

После этого я просто хочу импортировать карту в свой App.vue, а index.js должен решить, какой компонент нужен (Card.vue или Card.mobile.vue)

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

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

Является ли это возможным?


javascript vue.js vuejs2
person Dmitry    schedule 01.03.2019    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Вы можете попробовать написать следующее в файле 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
Обратите внимание, что в этом примере я использую пакет npm is-mobile, но не стесняйтесь использовать любую функцию, которую хотите определить для мобильного браузера. - person Hammerbot; 01.03.2019