前端判断安卓/ios/pc设备

首先是判断安卓/ios/pc，根据不同的设备展示不同的按钮

<template>
    <div class="download">
        <div class="download-body">   
          <div v-if="type===2">
            <a type="button" href="javascript:void(0)" class="android-download downloadBtn" @click="showQRCodeDialog(0)">
              <img src="../../assets/images/android.png" alt="">Android版本下载
            </a>
            <a type="button" href="javascript:void(0)" class="ios-download downloadBtn" @click="showQRCodeDialog(1)">
                <img src="../../assets/images/ios.png" alt="">ios版本下载
            </a>
          </div>
          <div style="margin-bottom:100px" v-else-if="type===1">
            
            <a type="button"  href="javascript:void(0)" class="ios-download downloadBtn" @click="download">
                <img src="../../assets/images/ios.png" alt="">ios版本下载
            </a>
          </div>
          <div style="margin-bottom:100px" v-else>
            <a type="button" href="javascript:void(0)" class="android-download downloadBtn" @click="download">
              <img src="../../assets/images/android.png" alt="">Android版本下载
            </a>
          </div>
        </div>
        <div class="dialog">
			  <div class="dialog-shade" :class="{on: showQRCode}"  @click="showQRCode = false"></div>
        <div class="dialog-content" :class="{on: showQRCode}">
          <div class="QRCode-dialog-text">
            <div id="qrcode"></div>
          </div>
        </div>
        </div>
    </div>
</template>

<script>
import { mapState, mapGetters, mapMutations, mapActions } from "vuex";
export default {
  components: {},
  data() {
    return {
      type: 0,    //Android：0；ios：1；pc：2
      showQRCode: false   
    };
  },
  computed: {
  },
  methods: {
    ...mapActions(["getAction", "postAction"]),
  created() {
  //判断设备
    if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) {
      this.type = 1;
    } else if (/(Android)/i.test(navigator.userAgent)) {
      //判断Android
      this.type = 0;
    } else {
      //pc
      this.type = 2;
    }
  },
  mounted() {
  },
  updated() {},
  watch: {}
};
</script>