Vuejs как обрабатывать множество изображений в одном файловом компоненте в виде значков, каждый из которых определен для местоположения пользователя - PullRequest
Новая
       71

Vuejs как обрабатывать множество изображений в одном файловом компоненте в виде значков, каждый из которых определен для местоположения пользователя

0 голосов
/ 26 мая 2020

У нас есть нижний колонтитул, где находятся значки поставщиков услуг, как на изображении здесь . В настоящее время мы обрабатываем его как 2 компонента, в одном из которых определяется каждый поставщик, а в другом каждый поставщик назначается местоположению пользователя. В настоящее время мы используем SVG, но размеры файлов по сравнению с хорошо сжатым PNG намного лучше, не говоря уже о проблемах, связанных с SVG, когда пути отображаются правильно. Мы решили перейти на PNG.

пример кода: 

<template>
  <Name v-if="provider === 'name'" />
</template>

import Name from '~/assets/vectors/providers/name.svg'
export const providers = [
  'name']
export default {
  components: {
    Name
},
  props: {
    provider: {
      type: String,
      required: true,
      validator(value) {
        // The value must match one of these strings
        return providers.includes(value)
      }
    }
  },
  data() {
    return {
      image: ''
    }
  },
  methods: {
    setProvider(providerName) {
      this.provider = providers[providerName]
    }
  }
}

Имейте в виду, что каждый провайдер будет дополнительной строкой.

Но у меня вопрос. Лучше сделать каждого поставщика как компонент или оставить его как 2 компонента, один для всех поставщиков и один для определения его для отображения пользователя в соответствии с их местоположением, размер файла компонента, определяющий поставщик, будет расти, поскольку в каталоге будет больше поставщиков будущее.

...