vuedose.tips（翻译系列十九）

Geolocated currency with MaxMind

Once again, here we have Samuel Snopko! You might know him from his tip of the Vue.js Tip Overload 😉

He’s a creative FrontEnd Knight & DesignOps enthusiast with a passion for web, VueJS an NuxtJS. Co-creator of DX Meetup Basel and co-organizer of Frontend Meetup Freiburg.

Let’s move on to the tip!

有时您需要在您的网站上集成地理定位的内容。 在这个小技巧中，我将向您展示使用VueJS，MaxMind GeoIP和Autonumeric有多么容易。 该示例是用NuxtJS编写的，用于地理定位货币的特殊情况，但是相同的原理也适用于原始VueJS应用程序。

地理位置货币意味着，即使您仅以一种语言显示页面，您也要根据访问者所在的国家/地区显示不同的货币。 来自美国的访客将看到美元符号$ 10,000，来自德国的访客将在同一句子中看到欧元符号10.000€。 您还会注意到这两种情况下的标点符号不同。

好的，我认为您的内容可以通过诸如Storyblok之类的无头CMS的API到达，例如我的案例。 请记住，货币可以在任何字符串中使用。 这就是为什么我定义了可以在任何字符串中用于标记地理位置货币的唯一模式的原因。 我使用了这种模式＃{number}＃，这意味着字符串Price：＃{10000}＃在美国将替换为字符串Price：$ 10,000，在德国替换为Price：10.000€。

// API returns:  { description:  "Price: #{10000}#";  }

首先，您必须找到并将模式转换为HTML标签。 我想使用全局过滤器来做，但是后来我发现v-html和v-text中禁止使用过滤器。 因此，我使用全局混合来做到这一点，它将字符串＃{number}＃转换为字符串<span data-currency> number </ span>。

// mixins.js
import Vue from "vue";
// Adds global currency method to transfor #{}# string to span
Vue.mixin({
  methods: {
    extractCurrency(string) {
      if (!string.includes("#{")) {
        return string;
      }
      const openTag = `<span data-currency>`;
      const closeTag = `</span>`;
      const openRegex = /#{/g;
      const closeRegex = /}#/g;
      string = string.replace(openRegex, openTag);
      string = string.replace(closeRegex, closeTag);
      return string;
    }
  }
});

由于这是全局混合，因此您可以在每个组件中使用函数extractCurrency。例如。

// component.vue 
<template>  <p v-html="extractCurrency(description)"  />  </template>

如果像我一样使用nuxt generate来生成静态页面，则将以包含以下内容的静态页面结尾：

<!--  static-page.html -->  
<p>Price:  <span data-currency>10000</span></p>

现在，您必须使用MaxMind的GeoIP找出访问者所在的国家/地区，然后调用自动数字功能以添加正确的货币。 您将在VueJS的mount（）生命周期中执行此操作，因为该操作只能在客户端运行。 在NuxtJS中执行此操作的最佳位置是布局文件中。

// layouts/default.vue
export default {
  mounted() {
    geoip2.country(
      success => {
        const currencyType =
          success.country.iso_code === "US" ? "NorthAmerican" : "French";
        AutoNumeric.multiple(
          "[data-currency]",
          AutoNumeric.getPredefinedOptions()[currencyType]
        );
      },
      error => {
        console.warn("Error occured by getting geolocation.");
      }
    );
  }
};

如果GeoIP无法正常工作或需要很长时间才能返回位置，则可以使用CSS：before伪元素显示不带货币的数字或显示默认货币。

// fallback for currency
span[data-currency]:not([value]) {
  &::after {
    content: " €";
  }
}

Don’t forget that you could use also the global event bus in the NuxtJS to trigger method on component according to the geolocation. You would add this line this.emit("geolocationFound", success.country.iso_code) into your mounted cycle.

Pretty easy or?

That’s it for this week! Remember you can read this tip online (with copy/pasteable code).