Как применить собственный шрифт при использовании Stripe в Vue? vue -stripe-элементы-плюс - PullRequest
Новая
       42

Как применить собственный шрифт при использовании Stripe в Vue? vue -stripe-элементы-плюс

0 голосов
/ 28 апреля 2020

Я использую модуль vue -stripe-elements-plus NPM и не вижу, как добавить собственный шрифт?

1 Ответ

0 голосов
/ 28 апреля 2020

Этот плагин использует параметры, которые вы передаете первому элементу, созданному вами для создания элементов VUE.

Он передает объект стиля параметру стиля, когда Stripe создает элементы .

Передает свойство elements в функцию элементов Stripe .

. Здесь можно добавить объект CustomFontSource .

Обратите внимание, что, как и в этом примере, если вы хотите использовать шрифт Google, вам нужно go ввести указанный URL и захватить URL в дескрипторах @fontface. Возможно, вам лучше будет разместить шрифт самостоятельно, так как я боюсь, что эти URL-адреса могут со временем меняться. 

  stripeOptions: {
    elements: {
      fonts: [{
        family: 'Lexend Deca',
        src: 'url(https://fonts.gstatic.com/s/lexenddeca/v1/K2F1fZFYk-dHSE0UPPuwQ5qnJy_YZ2ON.woff2)',
        unicodeRange: 'U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD',
        style: 'normal',
        weight: '400',
        display: 'swap',
      }],
    },
    style: {
      base: {
        color: 'red',
        fontFamily: '"Lexend Deca", sans-serif',
        fontSize: '18px',
        fontWeight: '400',
        fontSmoothing: 'antialiased',
      },
    },
  },

Компоненты Stripe: 

          <card-number
            :stripe="stripeId"
            :options="stripeOptions"
          />

          <card-expiry
            :stripe="stripeId"
            :options="stripeOptions"
          />

          <card-cvc
            :stripe="stripeId"
            :options="stripeOptions"
          />
...