Как манипулировать DOM в Vue динамически и определять ОС пользователя - PullRequest
Новая
       9

Как манипулировать DOM в Vue динамически и определять ОС пользователя

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

Я пытаюсь обнаружить пользовательскую ОС с помощью User Agent в Vue. Я пробовал все, что знаю, например, с помощью document и getElementById, и я пытался использовать ref, как показано ниже, но я просто не могу заставить его работать. Любая помощь приветствуется, спасибо. 

<template>
<v-container>
  <v-container fluid d-flex justify-center align-center flex-xs-column class="grey lighten-3">
    <div class="d-flex justify-space-between align-center flex-xs-column">
      <div class="d-flex flex-column">
      HERE ---><h1 ref="downloadTitle">yep</h1> <----
      HERE ---><p ref="downloadDesc">nope</p> <----
      <!-- <h1 v-if="navigator.userAgent.includes('win') == true"> Download For Windows </h1>
      <h1 v-if="navigator.userAgent.includes('Linux') == true"> Download For Linux </h1>
      <h1 v-if="navigator.userAgent.includes('Android') == true || navigator.userAgent.includes('like Mac') == true"> Not Available For Download On This Device </h1> -->
      <v-btn dark min-width="100" max-width="20%" class="ma-auto">Download</v-btn>
      </div>
      <v-divider vertical></v-divider>
      <v-img src="https://gamepedia.cursecdn.com/minecraft_gamepedia/6/62/Dirt_JE2_BE1.png" max-height="10%" class="ma-8"></v-img>
    </div>
  </v-container>
  <v-divider class="grey"></v-divider>
  <v-container fluid d-flex justify-center class="mb-12">
    <div class="d-flex flex-column justify-center text-center">
      <h1 class="ma-4"> Download For Your Other Devices </h1>
      <div class="d-flex justify-space-around">
      <v-card min-width="40%" class="text-center d-inline-block">
        <v-img src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/5f/Windows_logo_-_2012.svg/1024px-Windows_logo_-_2012.svg.png" aspect-ratio="1" max-width="100" contain class="ma-auto mt-4"></v-img>
        <v-card-subtitle class="d-block text-wrap ma-auto">Download For Windows</v-card-subtitle>
        <v-card-actions>
          <v-btn dark class="ma-auto" href="">Download</v-btn>
        </v-card-actions>
      </v-card>
      <v-card min-width="40%" class="text-center d-inline-block">
        <v-img src="https://cdn3.iconfinder.com/data/icons/logos-brands-3/24/logo_brand_brands_logos_linux-512.png" aspect-ratio="1" max-width="100" contain class="ma-auto mt-4"></v-img>
        <v-card-subtitle class="d-block text-wrap text-center">Download For Linux</v-card-subtitle>
        <v-card-actions>
          <v-btn dark class="ma-auto" href="">Download</v-btn>
        </v-card-actions>
      </v-card>
      </div>
    </div>
  </v-container>
</v-container>


<script>
  export default {
        name: "Downloads",
        methods: {
          detectOS: function detectOS() {
            var name = "Unknown OS"; 
            var download;
            var desc;
            if (navigator.userAgent.includes("win") != -1)  {
                name = "Windows";
            }
            else if (navigator.userAgent.includes("Mac") != -1) {
                name = "Mac"; 
            }
            else if (navigator.userAgent.includes("Linux") != -1) {
                name = "Linux"; 
            }
            else if (navigator.userAgent.includes("Android") != -1) {
                name = "Android OS"; 
            }
            else if (navigator.userAgent.includes("like Mac") != -1)  {
                name = "iOS";
            }
            else {
                name;
            };
        },
        mounted() {
          detectOS();
          this.$ref.downloadTitle.innerHTML = download;
          this.downloadDesc.innerHTML = desc;
          alert("hey");
        }
      };
</script>

<script scoped></script>

Я пробовал все это смонтировать и создать, но ничего не работает. Заранее спасибо!

Ответы [ 2 ]

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

Как здесь 

  data: {
    userAgent:"",
    userOs:""
    },
  mounted() {
    console.log('userAgent; ',navigator.userAgent);

    this.userAgent = navigator.userAgent || '';
    this.userOs = navigator.platform || '';

    let osType = this.userOs.toLowerCase();

    if(osType.includes('win')) alert('win');
    else if(osType.includes('mac')) alert('mac');
    else if(osType.includes('ios')) alert('ios');
    else if(osType.includes('android')) alert('android');
    else if(osType.includes('linux')) alert('linux');
    else  alert('unkown os');
    }
0 голосов
/ 06 мая 2020

Конечно, ничего не работает, приятель, ваш метод detectOS ничего не возвращает и не обновляет.

И что это за код в методе detectOS? 

if (navigator.userAgent.includes("win") != -1)
...

Этот код не имеет никакого смысла, и это не то, как вы получаете имя ОС. Вы можете узнать, как это сделать, на этой странице

После исправления сделайте следующее:

Шаг 1:

Переместите все свои свойства на data(). Установленный хук не может получить доступ к вашим свойствам desc, download и name внутри метода detectOS. 

data () {
  return {
    desc: '',
    download: '',
    osName: 'Unknown OS'
  }
},
methods: {
...

Шаг 2:

Убедитесь, что ваш метод detectOS правильно получает имя ОС. Зарегистрируйте переменную name и убедитесь, что она по-прежнему не равна «Неизвестная ОС» 

...
else {
 name;
};
console.log(name)

Если она по-прежнему равна «Неизвестная ОС», это означает, что вы по-прежнему неправильно получаете имя ОС.

Шаг 3:

Обновите свойство osName, чтобы его могли использовать другие методы. 

data () {
  return {
    desc: '',
    download: '',
    osName: 'Unknown OS'
  }
},
methods: {
  detectOS() {
     // Get the OS name
     ...

     // Update property
     this.osName = name
  }
}
...