วิธีนำเข้าโฟลเดอร์เป็นคอมโพเนนต์ Vue

ฉันต้องการแสดงส่วนประกอบ Vue ที่แตกต่างกันสำหรับอุปกรณ์มือถือ และฉันพบวิธีแก้ปัญหานี้ (https://stackoverflow.com/a/48515205/11079653) ผ่านทาง mixin

และตัวอย่างเช่น ฉันมีส่วนประกอบ - 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